jessikitty/Disco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature: Upload Online Attachments front end

Browse Source
This commit is contained in:
Gary Sharp
2025-06-15 18:01:01 +10:00
parent cc1f224456
commit 662e1ed231
34 changed files with 808 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Disco.Web/ClientSource/Scripts/Modules/Disco-AttachmentUploader.js
+88
View File
@@ -161,6 +161,94 @@
};
// #endregion
// #region Online Upload
self.onlineUpload = async function () {
const onlineUploadUrl = self.$host.attr('data-onlineuploadurl');
const qrCodeUrl = self.$host.attr('data-qrcodeurl');
const $button = self.$host.find('.attachmentInput span.online-upload');
if ($button.hasClass('fa-spinner'))
return;
$button
.removeClass('fa-qrcode')
.addClass('fa-spinner fa-spin d-green');
if (!window.QRCode) {
const qrCodeElement = document.createElement('script');
qrCodeElement.src = qrCodeUrl;
qrCodeElement.type = 'text/javascript';
qrCodeElement.onload = function () {
self.onlineUploadDisplay();
};
document.body.appendChild(qrCodeElement);
}
const formData = new FormData();
formData.append('__RequestVerificationToken', self.$host.find('input[name="__RequestVerificationToken"]').val());
const result = await fetch(onlineUploadUrl, {
method: 'POST',
body: formData
});
if (!result.ok) {
alert('Error creating online upload session: ' + result.statusText);
return;
}
const resultModel = await result.json();
if (!resultModel.Success) {
alert('Unable to create online upload session: ' + result.ErrorMessage);
return;
}
self.onlineUploadSession = resultModel;
self.onlineUploadDisplay();
$button
.removeClass('fa-spinner fa-spin d-green')
.addClass('fa-qrcode');
}
self.onlineUploadDisplay = function () {
if (!!window.QRCode && !!self.onlineUploadSession) {
var dialog = $('<div>')
.attr({
title: 'Online Upload',
'class': 'dialog Disco-AttachmentUpload-OnlineUploadDialog'
});
var qrCode = QRCode({
msg: self.onlineUploadSession.SessionUri,
ecl: 'L'
});
dialog.append(qrCode);
$('<input type="text" readonly>')
.val(self.onlineUploadSession.SessionUri)
.appendTo(dialog);
$('<div class="info-box"><p class="fa-p"><i class="fa fa-info-circle information"></i> Scan the QR Code or send the link to upload files</p></div>')
.appendTo(dialog);
var expiration = new Date(self.onlineUploadSession.Expiration);
var sessionExpiration = setTimeout(function () {
dialog.dialog('close');
}, expiration.getTime() - new Date().getTime());
dialog.dialog({
resizable: false,
width: 500,
modal: true,
autoOpen: true,
close: function () {
if (!!sessionExpiration) {
window.clearTimeout(sessionExpiration);
}
dialog.dialog('destroy').remove();
}
});
}
}
// #endregion
// #region Helpers
self.getFileComments = function (fileName, thumbnailHandler, complete) {
var result = false;
Disco.Web/ClientSource/Scripts/Modules/Disco-AttachmentUploader.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
Disco.Web/ClientSource/Scripts/Modules/Disco-AttachmentUploader/disco-attachmentuploader.js
+88
View File
@@ -161,6 +161,94 @@
};
// #endregion
// #region Online Upload
self.onlineUpload = async function () {
const onlineUploadUrl = self.$host.attr('data-onlineuploadurl');
const qrCodeUrl = self.$host.attr('data-qrcodeurl');
const $button = self.$host.find('.attachmentInput span.online-upload');
if ($button.hasClass('fa-spinner'))
return;
$button
.removeClass('fa-qrcode')
.addClass('fa-spinner fa-spin d-green');
if (!window.QRCode) {
const qrCodeElement = document.createElement('script');
qrCodeElement.src = qrCodeUrl;
qrCodeElement.type = 'text/javascript';
qrCodeElement.onload = function () {
self.onlineUploadDisplay();
};
document.body.appendChild(qrCodeElement);
}
const formData = new FormData();
formData.append('__RequestVerificationToken', self.$host.find('input[name="__RequestVerificationToken"]').val());
const result = await fetch(onlineUploadUrl, {
method: 'POST',
body: formData
});
if (!result.ok) {
alert('Error creating online upload session: ' + result.statusText);
return;
}
const resultModel = await result.json();
if (!resultModel.Success) {
alert('Unable to create online upload session: ' + result.ErrorMessage);
return;
}
self.onlineUploadSession = resultModel;
self.onlineUploadDisplay();
$button
.removeClass('fa-spinner fa-spin d-green')
.addClass('fa-qrcode');
}
self.onlineUploadDisplay = function () {
if (!!window.QRCode && !!self.onlineUploadSession) {
var dialog = $('<div>')
.attr({
title: 'Online Upload',
'class': 'dialog Disco-AttachmentUpload-OnlineUploadDialog'
});
var qrCode = QRCode({
msg: self.onlineUploadSession.SessionUri,
ecl: 'L'
});
dialog.append(qrCode);
$('<input type="text" readonly>')
.val(self.onlineUploadSession.SessionUri)
.appendTo(dialog);
$('<div class="info-box"><p class="fa-p"><i class="fa fa-info-circle information"></i> Scan the QR Code or send the link to upload files</p></div>')
.appendTo(dialog);
var expiration = new Date(self.onlineUploadSession.Expiration);
var sessionExpiration = setTimeout(function () {
dialog.dialog('close');
}, expiration.getTime() - new Date().getTime());
dialog.dialog({
resizable: false,
width: 500,
modal: true,
autoOpen: true,
close: function () {
if (!!sessionExpiration) {
window.clearTimeout(sessionExpiration);
}
dialog.dialog('destroy').remove();
}
});
}
}
// #endregion
// #region Helpers
self.getFileComments = function (fileName, thumbnailHandler, complete) {
var result = false;
Disco.Web/ClientSource/Scripts/Modules/qrcode.min.js
Vendored
+2
View File
File diff suppressed because one or more lines are too long
Disco.Web/ClientSource/Style/BundleSite.css
+7
View File
@@ -5711,6 +5711,13 @@ body > .FlagAssignment_Tooltip span.added {
font-style: italic;
font-size: 0.9em;
}
div.Disco-AttachmentUpload-OnlineUploadDialog {
text-align: center;
}
div.Disco-AttachmentUpload-OnlineUploadDialog input {
width: 100%;
box-sizing: border-box;
}
#Document_Generation_Container #Document_Generate {
padding: 0;
}
Disco.Web/ClientSource/Style/BundleSite.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
Disco.Web/ClientSource/Style/Device.css
+7 -5
View File
@@ -391,25 +391,27 @@
padding: 3px;
}
#deviceShowResources #Attachments div.attachmentInput span.action {
color: #333;
display: block;
margin: 0 4px 0 0;
font-size: 1.5em;
cursor: pointer;
float: right;
border: 1px solid #fff;
padding: 0.5em;
}
#deviceShowResources #Attachments div.attachmentInput span.action:hover {
#deviceShowResources #Attachments div.attachmentInput span.action:not(.fa-spin) {
color: #333;
border: 1px solid #fff;
}
#deviceShowResources #Attachments div.attachmentInput span.action:not(.fa-spin):hover {
color: #335A87;
background-color: #ededed;
border: 1px solid #ccc;
}
#deviceShowResources #Attachments div.attachmentInput span.action.disabled {
#deviceShowResources #Attachments div.attachmentInput span.action:not(.fa-spin).disabled {
color: rgba(51, 51, 51, 0.2);
cursor: default;
}
#deviceShowResources #Attachments div.attachmentInput span.action.disabled:hover {
#deviceShowResources #Attachments div.attachmentInput span.action:not(.fa-spin).disabled:hover {
color: rgba(51, 51, 51, 0.2);
background-color: inherit;
border: 1px solid #fff;
Disco.Web/ClientSource/Style/Device.less
+16 -13
View File
@@ -378,29 +378,32 @@
padding: 3px;
span.action {
color: @HeaderBackgroundColour;
display: block;
margin: 0 4px 0 0;
font-size: 1.5em;
cursor: pointer;
float: right;
border: 1px solid @white;
padding: .5em;
&:hover {
color: @HyperLinkColour;
background-color: @SubtleColour;
border: 1px solid @SubtleBorderColour;
}
&.disabled {
color: fade(@HeaderBackgroundColour, 20%);
cursor: default;
&:not(.fa-spin) {
color: @HeaderBackgroundColour;
border: 1px solid @white;
&:hover {
color: @HyperLinkColour;
background-color: @SubtleColour;
border: 1px solid @SubtleBorderColour;
}
&.disabled {
color: fade(@HeaderBackgroundColour, 20%);
background-color: inherit;
border: 1px solid @white;
cursor: default;
&:hover {
color: fade(@HeaderBackgroundColour, 20%);
background-color: inherit;
border: 1px solid @white;
}
}
}
}
Disco.Web/ClientSource/Style/Device.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
Disco.Web/ClientSource/Style/Job.css
+7 -5
View File
@@ -506,25 +506,27 @@
padding: 5px;
}
#jobShowResources #Attachments div.attachmentInput span.action {
color: #333;
display: block;
margin: 0 4px 0 0;
font-size: 1.5em;
cursor: pointer;
float: right;
border: 1px solid #fff;
padding: 0.5em;
}
#jobShowResources #Attachments div.attachmentInput span.action:hover {
#jobShowResources #Attachments div.attachmentInput span.action:not(.fa-spin) {
color: #333;
border: 1px solid #fff;
}
#jobShowResources #Attachments div.attachmentInput span.action:not(.fa-spin):hover {
color: #335A87;
background-color: #ededed;
border: 1px solid #ccc;
}
#jobShowResources #Attachments div.attachmentInput span.action.disabled {
#jobShowResources #Attachments div.attachmentInput span.action:not(.fa-spin).disabled {
color: rgba(51, 51, 51, 0.2);
cursor: default;
}
#jobShowResources #Attachments div.attachmentInput span.action.disabled:hover {
#jobShowResources #Attachments div.attachmentInput span.action:not(.fa-spin).disabled:hover {
color: rgba(51, 51, 51, 0.2);
background-color: inherit;
border: 1px solid #fff;
Disco.Web/ClientSource/Style/Job.less
+16 -12
View File
@@ -528,29 +528,33 @@
padding: 5px;
span.action {
color: @HeaderBackgroundColour;
display: block;
margin: 0 4px 0 0;
font-size: 1.5em;
cursor: pointer;
float: right;
border: 1px solid @white;
padding: .5em;
&:hover {
color: @HyperLinkColour;
background-color: @SubtleColour;
border: 1px solid @SubtleBorderColour;
}
&:not(.fa-spin) {
color: @HeaderBackgroundColour;
border: 1px solid @white;
&.disabled {
color: fade(@HeaderBackgroundColour, 20%);
cursor: default;
&:hover {
color: @HyperLinkColour;
background-color: @SubtleColour;
border: 1px solid @SubtleBorderColour;
}
&.disabled {
color: fade(@HeaderBackgroundColour, 20%);
background-color: inherit;
border: 1px solid @white;
cursor: default;
&:hover {
color: fade(@HeaderBackgroundColour, 20%);
background-color: inherit;
border: 1px solid @white;
}
}
}
}
Disco.Web/ClientSource/Style/Job.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
Disco.Web/ClientSource/Style/Site.css
+7
View File
@@ -1279,6 +1279,13 @@ body > .FlagAssignment_Tooltip span.added {
font-style: italic;
font-size: 0.9em;
}
div.Disco-AttachmentUpload-OnlineUploadDialog {
text-align: center;
}
div.Disco-AttachmentUpload-OnlineUploadDialog input {
width: 100%;
box-sizing: border-box;
}
#Document_Generation_Container #Document_Generate {
padding: 0;
}
Disco.Web/ClientSource/Style/Site.less
+9
View File
@@ -1300,6 +1300,15 @@ body > .FlagAssignment_Tooltip {
}
}
div.Disco-AttachmentUpload-OnlineUploadDialog {
text-align: center;
input {
width: 100%;
box-sizing: border-box;
}
}
#Document_Generation_Container {
#Document_Generate {
padding: 0;
Disco.Web/ClientSource/Style/Site.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
Disco.Web/ClientSource/Style/User.css
+7 -5
View File
@@ -453,25 +453,27 @@
padding: 3px;
}
#userShowResources #Attachments div.attachmentInput span.action {
color: #333;
display: block;
margin: 0 4px 0 0;
font-size: 1.5em;
cursor: pointer;
float: right;
border: 1px solid #fff;
padding: 0.5em;
}
#userShowResources #Attachments div.attachmentInput span.action:hover {
#userShowResources #Attachments div.attachmentInput span.action:not(.fa-spin) {
color: #333;
border: 1px solid #fff;
}
#userShowResources #Attachments div.attachmentInput span.action:not(.fa-spin):hover {
color: #335A87;
background-color: #ededed;
border: 1px solid #ccc;
}
#userShowResources #Attachments div.attachmentInput span.action.disabled {
#userShowResources #Attachments div.attachmentInput span.action:not(.fa-spin).disabled {
color: rgba(51, 51, 51, 0.2);
cursor: default;
}
#userShowResources #Attachments div.attachmentInput span.action.disabled:hover {
#userShowResources #Attachments div.attachmentInput span.action:not(.fa-spin).disabled:hover {
color: rgba(51, 51, 51, 0.2);
background-color: inherit;
border: 1px solid #fff;
Disco.Web/ClientSource/Style/User.less
+16 -13
View File
@@ -480,29 +480,32 @@
padding: 3px;
span.action {
color: @HeaderBackgroundColour;
display: block;
margin: 0 4px 0 0;
font-size: 1.5em;
cursor: pointer;
float: right;
border: 1px solid @white;
padding: .5em;
&:hover {
color: @HyperLinkColour;
background-color: @SubtleColour;
border: 1px solid @SubtleBorderColour;
}
&.disabled {
color: fade(@HeaderBackgroundColour, 20%);
cursor: default;
&:not(.fa-spin) {
color: @HeaderBackgroundColour;
border: 1px solid @white;
&:hover {
color: @HyperLinkColour;
background-color: @SubtleColour;
border: 1px solid @SubtleBorderColour;
}
&.disabled {
color: fade(@HeaderBackgroundColour, 20%);
background-color: inherit;
border: 1px solid @white;
cursor: default;
&:hover {
color: fade(@HeaderBackgroundColour, 20%);
background-color: inherit;
border: 1px solid @white;
}
}
}
}
Disco.Web/ClientSource/Style/User.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long