Merge pull request #1518 from firoxer/develop

Display media manager upload errors more clearly

modules/cms/lang/en/lang.php

@@ -265,6 +265,7 @@ return [
         'multiple_selected' => 'Multiple items selected.',
         'uploading_file_num' => 'Uploading :number file(s)...',
         'uploading_complete' => 'Upload complete',
+        'uploading_error' => 'Upload failed',
         'order_by' => 'Order by',
         'folder' => 'Folder',
         'no_files_found' => 'No files found by your request.',

modules/cms/widgets/mediamanager/assets/js/mediamanager-browser-min.js

@@ -286,7 +286,8 @@ this.dropzone.on('addedfile',this.proxy(this.uploadFileAdded))
 this.dropzone.on('totaluploadprogress',this.proxy(this.uploadUpdateTotalProgress))
 this.dropzone.on('queuecomplete',this.proxy(this.uploadQueueComplete))
 this.dropzone.on('sending',this.proxy(this.uploadSending))
-this.dropzone.on('error',this.proxy(this.uploadError))}
+this.dropzone.on('error',this.proxy(this.uploadError))
+this.dropzone.on('success',this.proxy(this.uploadSuccess))}
 MediaManager.prototype.destroyUploader=function(){if(!this.dropzone)
 return
 this.dropzone.destroy()
@@ -305,16 +306,17 @@ fileNumberLabel.innerHTML=messageTemplate.replace(':number',fileNumber).replace(
 MediaManager.prototype.setUploadProgress=function(value){var progresBar=this.$el.get(0).querySelector('[data-control="upload-progress-bar"]')
 progresBar.setAttribute('style','width: '+value+'%')
 progresBar.setAttribute('class','progress-bar')}
-MediaManager.prototype.uploadQueueComplete=function(){var fileNumberLabel=this.$el.get(0).querySelector('[data-label="file-number-and-progress"]'),completeTemplate=fileNumberLabel.getAttribute('data-complete-template'),progresBar=this.$el.get(0).querySelector('[data-control="upload-progress-bar"]')
-fileNumberLabel.innerHTML=completeTemplate;progresBar.setAttribute('class','progress-bar progress-bar-success')
-this.$el.find('[data-command="cancel-uploading"]').addClass('hide')
+MediaManager.prototype.uploadQueueComplete=function(){this.$el.find('[data-command="cancel-uploading"]').addClass('hide')
 this.$el.find('[data-command="close-uploader"]').removeClass('hide')
 this.refresh()}
 MediaManager.prototype.uploadSending=function(file,xhr,formData){formData.append('path',this.$el.find('[data-type="current-folder"]').val())
 formData.append('X_OCTOBER_FILEUPLOAD',this.options.uniqueId)}
 MediaManager.prototype.uploadCancelAll=function(){this.dropzone.removeAllFiles(true)
 this.hideUploadUi()}
-MediaManager.prototype.uploadError=function(file,message){$.oc.alert('Error uploading file')}
+MediaManager.prototype.updateUploadBar=function(templateName,classNames){var fileNumberLabel=this.$el.get(0).querySelector('[data-label="file-number-and-progress"]'),successTemplate=fileNumberLabel.getAttribute('data-'+templateName+'-template'),progresBar=this.$el.get(0).querySelector('[data-control="upload-progress-bar"]')
+fileNumberLabel.innerHTML=successTemplate;progresBar.setAttribute('class',classNames)}
+MediaManager.prototype.uploadSuccess=function(){this.updateUploadBar('success','progress-bar progress-bar-success');}
+MediaManager.prototype.uploadError=function(file,message){this.updateUploadBar('error','progress-bar-error');$.oc.alert('Error uploading file')}
 MediaManager.prototype.cropSelectedImage=function(callback){var selectedItems=this.getSelectedItems(true)
 if(selectedItems.length!=1){alert(this.options.selectSingleImage)
 return}

modules/cms/widgets/mediamanager/assets/js/mediamanager.js

@@ -730,6 +730,7 @@
         this.dropzone.on('queuecomplete', this.proxy(this.uploadQueueComplete))
         this.dropzone.on('sending', this.proxy(this.uploadSending))
         this.dropzone.on('error', this.proxy(this.uploadError))
+        this.dropzone.on('success', this.proxy(this.uploadSuccess))
     }
 
     MediaManager.prototype.destroyUploader = function() {
@@ -781,13 +782,6 @@
     }
 
     MediaManager.prototype.uploadQueueComplete = function() {
-        var fileNumberLabel = this.$el.get(0).querySelector('[data-label="file-number-and-progress"]'),
-            completeTemplate = fileNumberLabel.getAttribute('data-complete-template'),
-            progresBar = this.$el.get(0).querySelector('[data-control="upload-progress-bar"]')
-
-        fileNumberLabel.innerHTML = completeTemplate;
-        progresBar.setAttribute('class', 'progress-bar progress-bar-success')
-
         this.$el.find('[data-command="cancel-uploading"]').addClass('hide')
         this.$el.find('[data-command="close-uploader"]').removeClass('hide')
 
@@ -804,7 +798,22 @@
         this.hideUploadUi()
     }
 
+    MediaManager.prototype.updateUploadBar = function(templateName, classNames) {
+        var fileNumberLabel = this.$el.get(0).querySelector('[data-label="file-number-and-progress"]'),
+            successTemplate = fileNumberLabel.getAttribute('data-' + templateName + '-template'),
+            progresBar = this.$el.get(0).querySelector('[data-control="upload-progress-bar"]')
+
+        fileNumberLabel.innerHTML = successTemplate;
+        progresBar.setAttribute('class', classNames)
+    }
+
+    MediaManager.prototype.uploadSuccess = function() {
+      this.updateUploadBar('success', 'progress-bar progress-bar-success');
+    }
+
     MediaManager.prototype.uploadError = function(file, message) {
+      this.updateUploadBar('error', 'progress-bar-error');
+
         $.oc.alert('Error uploading file')
     }
 

modules/cms/widgets/mediamanager/partials/_upload-progress.htm

@@ -4,7 +4,8 @@
             <h5 
                 data-label="file-number-and-progress"
                 data-message-template="<?= e(trans('cms::lang.media.uploading_file_num')) ?> <span>:percents</span>"
-                data-complete-template="<?= e(trans('cms::lang.media.uploading_complete')) ?>"
+                data-success-template="<?= e(trans('cms::lang.media.uploading_complete')) ?>"
+                data-error-template="<?= e(trans('cms::lang.media.uploading_error')) ?>"
             ></h5>
 
             <div class="progress-controls">