From 2860ce027ab0d458bbcc5841d5b7cb8c7eae03e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Fri, 18 Aug 2017 14:08:51 +0200 Subject: [PATCH 1/4] Remove "errorThrown" parameter MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When the "fail" callback is called, "errorThrown" is a property of the data object instead of a parameter. Signed-off-by: Daniel Calviño Sánchez --- apps/files_sharing/js/files_drop.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/files_sharing/js/files_drop.js b/apps/files_sharing/js/files_drop.js index f1fc71c6ce..b3956948ee 100644 --- a/apps/files_sharing/js/files_drop.js +++ b/apps/files_sharing/js/files_drop.js @@ -101,7 +101,7 @@ var fileIcon = ' ' + fileName; Drop.setFileIcon(fileName,fileIcon); }, - fail: function(e, data, errorThrown) { + fail: function(e, data) { OC.Notification.showTemporary(OC.L10N.translate( 'files_sharing', 'Could not upload "{filename}"', From c70688e5d0c9f6dc4e56b5111b8f4a21a09e64a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Fri, 18 Aug 2017 14:26:15 +0200 Subject: [PATCH 2/4] Update the whole file item instead of only its contents MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The "done" and "fail" callbacks both update the item for the uploaded file using "setFileIcon". "setFileIcon" updates the contents of the "
  • " element for the file, but the "fail" callback was giving "setFileIcon" an element generated by the template, so the resulting HTML contained a "
  • " element nested in another "
  • " element. However, generating the HTML is better done through a template, so the template now receives the icon to show in order to be used by a successful upload and a failed one, and "setFileIcon" was changed to "updateFileItem". Note that the mimeTypeUrl does no longer need to be escaped, as Handlebars templates escape the needed characters automatically. Signed-off-by: Daniel Calviño Sánchez --- apps/files_sharing/js/files_drop.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/apps/files_sharing/js/files_drop.js b/apps/files_sharing/js/files_drop.js index b3956948ee..edd7cc9082 100644 --- a/apps/files_sharing/js/files_drop.js +++ b/apps/files_sharing/js/files_drop.js @@ -14,7 +14,7 @@ '{{#if isUploading}}' + ' {{name}}' + '{{else}}' + - ' {{name}}' + + ' {{name}}' + '{{/if}}' + '
    • '; var Drop = { @@ -72,8 +72,8 @@ return true; }, - setFileIcon: function (fileName,fileIcon) { - $('#public-upload ul li[data-name="' + fileName + '"]').html(fileIcon); + updateFileItem: function (fileName, fileItem) { + $('#public-upload ul li[data-name="' + fileName + '"]').replaceWith(fileItem); $('[data-toggle="tooltip"]').tooltip(); }, @@ -98,8 +98,8 @@ done: function(e, data) { // Created var mimeTypeUrl = OC.MimeType.getIconUrl(data.files[0].type); - var fileIcon = ' ' + fileName; - Drop.setFileIcon(fileName,fileIcon); + var fileItem = output({isUploading: false, iconSrc: mimeTypeUrl, name: fileName}); + Drop.updateFileItem(fileName, fileItem); }, fail: function(e, data) { OC.Notification.showTemporary(OC.L10N.translate( @@ -107,8 +107,9 @@ 'Could not upload "{filename}"', {filename: fileName} )); - var fileIcon = output({isUploading: false, name: fileName}); - Drop.setFileIcon(fileName,fileIcon); + var errorIconSrc = OC.imagePath('core', 'actions/error.svg'); + var fileItem = output({isUploading: false, iconSrc: errorIconSrc, name: fileName}); + Drop.updateFileItem(fileName, fileItem); }, progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); From 313b824dd73648e3f86c1547a811c857bebb5a6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Fri, 18 Aug 2017 15:14:32 +0200 Subject: [PATCH 3/4] Replace fileName variable with data.files[0].name MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit There is no need to store the file name, as the "data" parameter given to all the callbacks provides a "files" attribute with all the files that the callback refers to; moreover, it will always be a single file due to the use of "singleFileUploads" in the jQuery File Upload plugin. This also fixes the loading icon not disappearing when several files were uploaded at once. "singleFileUploads" causes the "add" callback to be called once for each file to be uploaded, so "fileName" was overwritten with the name of each new file in the upload set; when "fileName" was later used in the "done" callback to find the file in the list whose loading icon replace with the MIME type icon "fileName" always had the name of the last file, and thus its icon was the only one replaced. Signed-off-by: Daniel Calviño Sánchez --- apps/files_sharing/js/files_drop.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/apps/files_sharing/js/files_drop.js b/apps/files_sharing/js/files_drop.js index edd7cc9082..67c1bfb3b4 100644 --- a/apps/files_sharing/js/files_drop.js +++ b/apps/files_sharing/js/files_drop.js @@ -64,7 +64,7 @@ $('#drop-upload-done-indicator').addClass('hidden'); $('#drop-upload-progress-indicator').removeClass('hidden'); _.each(data['files'], function(file) { - $('#public-upload ul').append(output({isUploading: true, name: escapeHTML(file.name)})); + $('#public-upload ul').append(output({isUploading: true, name: file.name})); $('[data-toggle="tooltip"]').tooltip(); data.submit(); }); @@ -83,14 +83,12 @@ e.preventDefault(); }); var output = this.template(); - var fileName = undefined; $('#public-upload').fileupload({ type: 'PUT', dropZone: $('#public-upload'), sequentialUploads: true, add: function(e, data) { Drop.addFileToUpload(e, data); - fileName = escapeHTML(data.files[0].name); //we return true to keep trying to upload next file even //if addFileToUpload did not like the privious one return true; @@ -98,18 +96,18 @@ done: function(e, data) { // Created var mimeTypeUrl = OC.MimeType.getIconUrl(data.files[0].type); - var fileItem = output({isUploading: false, iconSrc: mimeTypeUrl, name: fileName}); - Drop.updateFileItem(fileName, fileItem); + var fileItem = output({isUploading: false, iconSrc: mimeTypeUrl, name: data.files[0].name}); + Drop.updateFileItem(data.files[0].name, fileItem); }, fail: function(e, data) { OC.Notification.showTemporary(OC.L10N.translate( 'files_sharing', 'Could not upload "{filename}"', - {filename: fileName} + {filename: data.files[0].name} )); var errorIconSrc = OC.imagePath('core', 'actions/error.svg'); - var fileItem = output({isUploading: false, iconSrc: errorIconSrc, name: fileName}); - Drop.updateFileItem(fileName, fileItem); + var fileItem = output({isUploading: false, iconSrc: errorIconSrc, name: data.files[0].name}); + Drop.updateFileItem(data.files[0].name, fileItem); }, progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); From 4d003c812de88c922ff9835d910e5a01b7bb0d28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Fri, 18 Aug 2017 15:18:20 +0200 Subject: [PATCH 4/4] Do not iterate over the files MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit As "singleFileUpload" is used the "add" callback (which in turn calls "addFileToUpload") will always be called with a single file. Therefore there is no need to iterate over the files (and it is not done in the other callbacks either, so this aligns the code with the rest of the callbacks). Signed-off-by: Daniel Calviño Sánchez --- apps/files_sharing/js/files_drop.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/apps/files_sharing/js/files_drop.js b/apps/files_sharing/js/files_drop.js index 67c1bfb3b4..8d1273f187 100644 --- a/apps/files_sharing/js/files_drop.js +++ b/apps/files_sharing/js/files_drop.js @@ -63,11 +63,10 @@ $('#drop-upload-done-indicator').addClass('hidden'); $('#drop-upload-progress-indicator').removeClass('hidden'); - _.each(data['files'], function(file) { - $('#public-upload ul').append(output({isUploading: true, name: file.name})); - $('[data-toggle="tooltip"]').tooltip(); - data.submit(); - }); + + $('#public-upload ul').append(output({isUploading: true, name: data.files[0].name})); + $('[data-toggle="tooltip"]').tooltip(); + data.submit(); return true; },