aboutsummaryrefslogtreecommitdiffstats
path: root/view
diff options
context:
space:
mode:
authorMario <mario@mariovavti.com>2021-10-01 07:14:05 +0000
committerMario <mario@mariovavti.com>2021-10-01 07:14:05 +0000
commit22dff49673d7732b846107c888259170332746cb (patch)
treeb4f371f8347c71ce81f79df334bc6579e135c84e /view
parent6ed160e4fa05e880bc81720b626f2bdc68a20db8 (diff)
downloadvolse-hubzilla-22dff49673d7732b846107c888259170332746cb.tar.gz
volse-hubzilla-22dff49673d7732b846107c888259170332746cb.tar.bz2
volse-hubzilla-22dff49673d7732b846107c888259170332746cb.zip
improve file upload performance: start uploading next file only after the previous finished, make sure to not return when uploading via ajax
Diffstat (limited to 'view')
-rw-r--r--view/js/mod_cloud.js107
-rw-r--r--view/js/mod_photos.js277
-rw-r--r--view/tpl/cloud_directory.tpl4
-rw-r--r--view/tpl/photos_upload.tpl2
4 files changed, 144 insertions, 246 deletions
diff --git a/view/js/mod_cloud.js b/view/js/mod_cloud.js
index 928ce8689..08fdbd677 100644
--- a/view/js/mod_cloud.js
+++ b/view/js/mod_cloud.js
@@ -402,74 +402,87 @@ $(document).ready(function () {
function UploadInit() {
var submit = $("#upload-submit");
- var count = 1;
+ var idx = 0;
var filedrag = $(".cloud-index.attach-drop");
+ var reload = false;
$('#invisible-cloud-file-upload').fileupload({
- url: 'file_upload',
- dataType: 'json',
- dropZone: filedrag,
- maxChunkSize: 4 * 1024 * 1024,
-
- add: function(e,data) {
- $(data.files).each( function() { this.count = ++ count; prepareHtml(this); });
-
- var allow_cid = ($('#ajax-upload-files').data('allow_cid') || []);
- var allow_gid = ($('#ajax-upload-files').data('allow_gid') || []);
- var deny_cid = ($('#ajax-upload-files').data('deny_cid') || []);
- var deny_gid = ($('#ajax-upload-files').data('deny_gid') || []);
-
- $('.acl-field').remove();
-
- $(allow_gid).each(function(i,v) {
- $('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='group_allow[]' value='"+v+"'>");
- });
- $(allow_cid).each(function(i,v) {
- $('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='contact_allow[]' value='"+v+"'>");
- });
- $(deny_gid).each(function(i,v) {
- $('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='group_deny[]' value='"+v+"'>");
- });
- $(deny_cid).each(function(i,v) {
- $('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='contact_deny[]' value='"+v+"'>");
- });
-
- data.formData = $('#ajax-upload-files').serializeArray();
- data.submit();
- },
+ url: 'file_upload',
+ dataType: 'json',
+ dropZone: filedrag,
+ maxChunkSize: 4 * 1024 * 1024,
+ add: function(e,data) {
+
+ idx++;
+ data.files[0].idx = idx;
+ prepareHtml(data.files[0]);
+ var allow_cid = ($('#ajax-upload-files').data('allow_cid') || []);
+ var allow_gid = ($('#ajax-upload-files').data('allow_gid') || []);
+ var deny_cid = ($('#ajax-upload-files').data('deny_cid') || []);
+ var deny_gid = ($('#ajax-upload-files').data('deny_gid') || []);
- progress: function(e,data) {
+ $('.acl-field').remove();
+
+ $(allow_gid).each(function(i,v) {
+ $('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='group_allow[]' value='"+v+"'>");
+ });
+ $(allow_cid).each(function(i,v) {
+ $('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='contact_allow[]' value='"+v+"'>");
+ });
+ $(deny_gid).each(function(i,v) {
+ $('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='group_deny[]' value='"+v+"'>");
+ });
+ $(deny_cid).each(function(i,v) {
+ $('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='contact_deny[]' value='"+v+"'>");
+ });
- // there will only be one file, the one we are looking for
+ data.formData = $('#ajax-upload-files').serializeArray();
- $(data.files).each( function() {
- var idx = this.count;
+ // trick it into not uploadiong all files at once
+ $('#new-upload-' + data.files[0].idx).one('fileupload_trigger', function () {
+ data.submit();
+ });
- // Dynamically update the percentage complete displayed in the file upload list
- $('#upload-progress-' + idx).html(Math.round(data.loaded / data.total * 100) + '%');
- $('#upload-progress-bar-' + idx).css('background-size', Math.round(data.loaded / data.total * 100) + '%');
+ $('#new-upload-1').trigger('fileupload_trigger');
+ },
- });
+ progress: function(e,data) {
+ var id = data.files[0].idx;
+ if(data.loaded == data.total) {
+ if(id == data.originalFiles.length) {
+ reload = true;
+ }
+ else {
+ // trigger uploading the next file
+ var next_id = id + 1;
+ setTimeout(function(){ $('#new-upload-' + next_id).trigger('fileupload_trigger'); }, 1000);
+ }
+ }
+ // Dynamically update the percentage complete displayed in the file upload list
+ $('#upload-progress-' + id).html(Math.round(data.loaded / data.total * 100) + '%');
+ $('#upload-progress-bar-' + id).css('background-size', Math.round(data.loaded / data.total * 100) + '%');
- },
+ },
- stop: function(e,data) {
+ stop: function(e,data) {
+ if(reload) {
+ console.log('Upload completed');
window.location.href = window.location.href;
}
+ }
+ });
- });
-
- $('#upload-submit').click(function(event) { event.preventDefault(); $('#invisible-cloud-file-upload').trigger('click'); return false;});
+ $('#upload-submit').click(function(event) { event.preventDefault(); $('#invisible-cloud-file-upload').trigger('click');});
}
function prepareHtml(f) {
- var num = f.count - 1;
- var i = f.count;
+ var num = f.idx - 1;
+ var i = f.idx;
$('#cloud-index #new-upload-progress-bar-' + num.toString()).after(
'<tr id="new-upload-' + i + '" class="new-upload">' +
'<td></td>' +
diff --git a/view/js/mod_photos.js b/view/js/mod_photos.js
index 1ce410a1b..faf14982b 100644
--- a/view/js/mod_photos.js
+++ b/view/js/mod_photos.js
@@ -20,151 +20,96 @@ function UploadInit() {
var fileselect = $("#photos-upload-choose");
var filedrag = $("#photos-upload-form");
var submit = $("#dbtn-submit");
- var count = 1;
-
- $('#invisible-photos-file-upload').fileupload({
- url: 'photos/' + nickname,
- dataType: 'json',
- dropZone: filedrag,
- maxChunkSize: 4 * 1024 * 1024,
-
- add: function(e,data) {
- $(data.files).each( function() { this.count = ++ count; prepareHtml(this); });
-
- var allow_cid = ($('#photos-upload-form').data('allow_cid') || []);
- var allow_gid = ($('#photos-upload-form').data('allow_gid') || []);
- var deny_cid = ($('#photos-upload-form').data('deny_cid') || []);
- var deny_gid = ($('#photos-upload-form').data('deny_gid') || []);
-
- $('.acl-field').remove();
-
- $(allow_gid).each(function(i,v) {
- $('#photos-upload-form').append("<input class='acl-field' type='hidden' name='group_allow[]' value='"+v+"'>");
- });
- $(allow_cid).each(function(i,v) {
- $('#photos-upload-form').append("<input class='acl-field' type='hidden' name='contact_allow[]' value='"+v+"'>");
- });
- $(deny_gid).each(function(i,v) {
- $('#photos-upload-form').append("<input class='acl-field' type='hidden' name='group_deny[]' value='"+v+"'>");
- });
- $(deny_cid).each(function(i,v) {
- $('#photos-upload-form').append("<input class='acl-field' type='hidden' name='contact_deny[]' value='"+v+"'>");
- });
-
- data.formData = $('#photos-upload-form').serializeArray();
-
- data.submit();
- },
-
- progress: function(e,data) {
-
- // there will only be one file, the one we are looking for
-
- $(data.files).each( function() {
- var idx = this.count;
-
- // Dynamically update the percentage complete displayed in the file upload list
- $('#upload-progress-' + idx).html(Math.round(data.loaded / data.total * 100) + '%');
- $('#upload-progress-bar-' + idx).css('background-size', Math.round(data.loaded / data.total * 100) + '%');
-
- });
-
-
- },
-
-
- stop: function(e,data) {
- window.location.href = window.location.href;
- }
-
- });
-
- $('#dbtn-submit').click(function(event) { event.preventDefault(); $('#invisible-photos-file-upload').trigger('click'); return false;});
-
-
-
-
- // is XHR2 available?
-// var xhr = new XMLHttpRequest();
-// if (xhr.upload) {
-
- // file select
-// fileselect.attr("multiple", 'multiple');
-// fileselect.on("change", UploadFileSelectHandler);
-
- // file submit
-// submit.on("click", fileselect, UploadFileSelectHandler);
-
- // file drop
-// filedrag.on("dragover", DragDropUploadFileHover);
-// filedrag.on("dragleave", DragDropUploadFileHover);
-// filedrag.on("drop", DragDropUploadFileSelectHandler);
-// }
-
-// window.filesToUpload = 0;
-// window.fileUploadsCompleted = 0;
-}
-
-// file drag hover
-function DragDropUploadFileHover(e) {
- e.stopPropagation();
- e.preventDefault();
- e.currentTarget.className = (e.type == "dragover" ? "hover" : "");
-}
-
-// file selection via drag/drop
-function DragDropUploadFileSelectHandler(e) {
- // cancel event and hover styling
- DragDropUploadFileHover(e);
-
- // fetch FileList object
- var files = e.target.files || e.originalEvent.dataTransfer.files;
-
- $('.new-upload').remove();
-
- // process all File objects
- for (var i = 0, f; f = files[i]; i++) {
- prepareHtml(f, i);
- UploadFile(f, i);
- }
-}
+ var idx = 0;
+ var reload = false;
+
+
+ $('#invisible-photos-file-upload').fileupload({
+ url: 'photos/' + nickname,
+ dataType: 'json',
+ dropZone: filedrag,
+ maxChunkSize: 4 * 1024 * 1024,
+
+ add: function(e,data) {
+
+ idx++;
+ data.files[0].idx = idx;
+ prepareHtml(data.files[0]);
+
+ var allow_cid = ($('#photos-upload-form').data('allow_cid') || []);
+ var allow_gid = ($('#photos-upload-form').data('allow_gid') || []);
+ var deny_cid = ($('#photos-upload-form').data('deny_cid') || []);
+ var deny_gid = ($('#photos-upload-form').data('deny_gid') || []);
+
+ $('.acl-field').remove();
+
+ $(allow_gid).each(function(i,v) {
+ $('#photos-upload-form').append("<input class='acl-field' type='hidden' name='group_allow[]' value='"+v+"'>");
+ });
+ $(allow_cid).each(function(i,v) {
+ $('#photos-upload-form').append("<input class='acl-field' type='hidden' name='contact_allow[]' value='"+v+"'>");
+ });
+ $(deny_gid).each(function(i,v) {
+ $('#photos-upload-form').append("<input class='acl-field' type='hidden' name='group_deny[]' value='"+v+"'>");
+ });
+ $(deny_cid).each(function(i,v) {
+ $('#photos-upload-form').append("<input class='acl-field' type='hidden' name='contact_deny[]' value='"+v+"'>");
+ });
+
+ data.formData = $('#photos-upload-form').serializeArray();
+
+ // trick it into not uploadiong all files at once
+ $('#new-upload-' + data.files[0].idx).one('fileupload_trigger', function () {
+ data.submit();
+ });
+
+ $('#new-upload-1').trigger('fileupload_trigger');
+ },
+
+ progress: function(e,data) {
+
+ var id = data.files[0].idx;
+ if(data.loaded == data.total) {
+ if(id == data.originalFiles.length) {
+ reload = true;
+ }
+ else {
+ // trigger uploading the next file
+ var next_id = id + 1;
+ setTimeout(function(){ $('#new-upload-' + next_id).trigger('fileupload_trigger'); }, 1000);
+ }
+ }
+
+ // Dynamically update the percentage complete displayed in the file upload list
+ $('#upload-progress-' + id).html(Math.round(data.loaded / data.total * 100) + '%');
+ $('#upload-progress-bar-' + id).css('background-size', Math.round(data.loaded / data.total * 100) + '%');
+ },
+
+ stop: function(e,data) {
+ if(reload) {
+ console.log('Upload completed');
+ window.location.href = window.location.href;
+ }
+ }
+ });
-// file selection via input
-function UploadFileSelectHandler(e) {
- // fetch FileList object
- if(e.target.id === 'dbtn-submit') {
- e.preventDefault();
- var files = e.data[0].files;
- }
- if(e.target.id === 'photos-upload-choose') {
- $('.new-upload').remove();
- var files = e.target.files;
- }
+ $('#dbtn-submit').click(function(event) { event.preventDefault(); $('#invisible-photos-file-upload').trigger('click'); return false;});
- // process all File objects
- for (var i = 0, f; f = files[i]; i++) {
- if(e.target.id === 'photos-upload-choose')
- prepareHtml(f, i);
- if(e.target.id === 'dbtn-submit') {
- UploadFile(f, i);
- }
- }
}
function prepareHtml(f) {
-
- var num = f.count - 1;
- var i = f.count;
-
+ var num = f.idx - 1;
+ var i = f.idx;
$('#upload-index #new-upload-progress-bar-' + num.toString()).after(
'<tr id="new-upload-' + i + '" class="new-upload">' +
- '<td width="1%"><i class="fa ' + getIconFromType(f.type) + '" title="' + f.type + '"></i></td>' +
- '<td width="96%">' + f.name + '</td>' +
- '<td id="upload-progress-' + i + '" width="1%"></td>' +
- '<td class="d-none d-md-table-cell" width="1%">' + formatSizeUnits(f.size) + '</td>' +
+ '<td></td>' +
+ '<td><i class="fa fa-fw ' + getIconFromType(f.type) + '" title="' + f.type + '"></i></td>' +
+ '<td>' + f.name + '</td>' +
+ '<td id="upload-progress-' + i + '"></td><td></td><td></td>' +
+ '<td class="d-none d-md-table-cell">' + formatSizeUnits(f.size) + '</td><td class="d-none d-md-table-cell"></td>' +
'</tr>' +
'<tr id="new-upload-progress-bar-' + i + '" class="new-upload">' +
- '<td id="upload-progress-bar-' + i + '" colspan="4" class="upload-progress-bar"></td>' +
+ '<td id="upload-progress-bar-' + i + '" colspan="9" class="upload-progress-bar"></td>' +
'</tr>'
);
}
@@ -224,63 +169,3 @@ function getIconFromType(type) {
return iconFromType;
}
-
-// upload files
-function UploadFile(file, idx) {
-
- window.filesToUpload = window.filesToUpload + 1;
-
- var xhr = new XMLHttpRequest();
-
- xhr.withCredentials = true; // Include the SESSION cookie info for authentication
-
- (xhr.upload || xhr).addEventListener('progress', function (e) {
-
- var done = e.position || e.loaded;
- var total = e.totalSize || e.total;
- // Dynamically update the percentage complete displayed in the file upload list
- $('#upload-progress-' + idx).html(Math.round(done / total * 100) + '%');
- $('#upload-progress-bar-' + idx).css('background-size', Math.round(done / total * 100) + '%');
-
- if(done == total) {
- $('#upload-progress-' + idx).html('Processing...');
- }
-
- });
-
-
- xhr.addEventListener('load', function (e) {
- //we could possibly turn the filenames to real links here and add the delete and edit buttons to avoid page reload...
- $('#upload-progress-' + idx).html('Ready!');
-
- //console.log('xhr upload complete', e);
- window.fileUploadsCompleted = window.fileUploadsCompleted + 1;
-
- // When all the uploads have completed, refresh the page
- if (window.filesToUpload > 0 && window.fileUploadsCompleted === window.filesToUpload) {
-
- window.fileUploadsCompleted = window.filesToUpload = 0;
-
- // After uploads complete, refresh browser window to display new files
- window.location.href = window.location.href;
- }
- });
-
-
- xhr.addEventListener('error', function (e) {
- $('#upload-progress-' + idx).html('<span style="color: red;">ERROR</span>');
- });
-
- // POST to the entire cloud path
- xhr.open('post', $('#photos-upload-form').attr( 'action' ), true);
-
- var formfields = $("#photos-upload-form").serializeArray();
-
- var data = new FormData();
- $.each(formfields, function(i, field) {
- data.append(field.name, field.value);
- });
- data.append('userfile', file);
-
- xhr.send(data);
-}
diff --git a/view/tpl/cloud_directory.tpl b/view/tpl/cloud_directory.tpl
index b5ac93204..a851eb203 100644
--- a/view/tpl/cloud_directory.tpl
+++ b/view/tpl/cloud_directory.tpl
@@ -1,7 +1,7 @@
<div class="{{if $tiles}}section-content-wrapper{{else}}section-content-wrapper-np{{/if}}">
{{if $tiles}}
<table id="cloud-index">
- <tr id="new-upload-progress-bar-1"></tr> {{* this is needed to append the upload files in the right order *}}
+ <tr id="new-upload-progress-bar-0"></tr> {{* this is needed to append the upload files in the right order *}}
</table>
<div class="row row-cols-2 row-cols-md-4">
{{if $parentpath}}
@@ -136,7 +136,7 @@
</td>
</tr>
{{/if}}
- <tr id="new-upload-progress-bar-1"></tr> {{* this is needed to append the upload files in the right order *}}
+ <tr id="new-upload-progress-bar-0"></tr> {{* this is needed to append the upload files in the right order *}}
{{foreach $entries as $item}}
<tr id="cloud-index-{{$item.attach_id}}" class="cloud-index{{if $item.collection}} attach-drop{{/if}}"{{if $item.collection}} data-folder="{{$item.resource}}"{{/if}} data-id="{{$item.attach_id}}" draggable="true">
<td>
diff --git a/view/tpl/photos_upload.tpl b/view/tpl/photos_upload.tpl
index 95cf4e295..72f6c4611 100644
--- a/view/tpl/photos_upload.tpl
+++ b/view/tpl/photos_upload.tpl
@@ -55,7 +55,7 @@
</form>
</div>
<table id="upload-index">
- <tr id="new-upload-progress-bar-1"></tr> {{* this is needed to append the upload files in the right order *}}
+ <tr id="new-upload-progress-bar-0"></tr> {{* this is needed to append the upload files in the right order *}}
</table>
{{$aclselect}}
<div id="photos-upload-end" class="clear"></div>