From 22dff49673d7732b846107c888259170332746cb Mon Sep 17 00:00:00 2001 From: Mario Date: Fri, 1 Oct 2021 07:14:05 +0000 Subject: improve file upload performance: start uploading next file only after the previous finished, make sure to not return when uploading via ajax --- view/js/mod_cloud.js | 107 ++++++++++--------- view/js/mod_photos.js | 277 +++++++++++++++----------------------------------- 2 files changed, 141 insertions(+), 243 deletions(-) (limited to 'view/js') 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(""); - }); - $(allow_cid).each(function(i,v) { - $('#ajax-upload-files').append(""); - }); - $(deny_gid).each(function(i,v) { - $('#ajax-upload-files').append(""); - }); - $(deny_cid).each(function(i,v) { - $('#ajax-upload-files').append(""); - }); - - 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(""); + }); + $(allow_cid).each(function(i,v) { + $('#ajax-upload-files').append(""); + }); + $(deny_gid).each(function(i,v) { + $('#ajax-upload-files').append(""); + }); + $(deny_cid).each(function(i,v) { + $('#ajax-upload-files').append(""); + }); - // 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( '' + '' + 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(""); - }); - $(allow_cid).each(function(i,v) { - $('#photos-upload-form').append(""); - }); - $(deny_gid).each(function(i,v) { - $('#photos-upload-form').append(""); - }); - $(deny_cid).each(function(i,v) { - $('#photos-upload-form').append(""); - }); - - 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(""); + }); + $(allow_cid).each(function(i,v) { + $('#photos-upload-form').append(""); + }); + $(deny_gid).each(function(i,v) { + $('#photos-upload-form').append(""); + }); + $(deny_cid).each(function(i,v) { + $('#photos-upload-form').append(""); + }); + + 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( '' + - '' + - '' + f.name + '' + - '' + - '' + formatSizeUnits(f.size) + '' + + '' + + '' + + '' + f.name + '' + + '' + + '' + formatSizeUnits(f.size) + '' + '' + '' + - '' + + '' + '' ); } @@ -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('ERROR'); - }); - - // 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); -} -- cgit v1.2.3