Implement edit option hook.

blueimp · Aug 3, 2019 · c21d2c0 · c21d2c0
1 parent f9982ec
commit c21d2c0
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -254,6 +254,12 @@ <h3 class="title"></h3>
                   <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
               </td>
               <td>
+                  {% if (!o.options.autoUpload && o.options.edit && o.options.loadImageFileTypes.test(file.type)) { %}
+                    <button class="btn btn-success edit" data-index="{%=i%}" disabled>
+                        <i class="glyphicon glyphicon-edit"></i>
+                        <span>Edit</span>
+                    </button>
+                  {% } %}
                   {% if (!i && !o.options.autoUpload) { %}
                       <button class="btn btn-primary start" disabled>
                           <i class="glyphicon glyphicon-upload"></i>

diff --git a/js/jquery.fileupload-ui.js b/js/jquery.fileupload-ui.js
@@ -121,7 +121,7 @@
             that._renderPreviews(data);
           })
           .done(function() {
-            data.context.find('.start').prop('disabled', false);
+            data.context.find('.edit,.start').prop('disabled', false);
             if (
               that._trigger('added', e, data) !== false &&
               (options.autoUpload || data.autoUpload) &&
@@ -498,7 +498,9 @@
 
     _renderPreviews: function(data) {
       data.context.find('.preview').each(function(index, elm) {
-        $(elm).append(data.files[index].preview);
+        $(elm)
+          .empty()
+          .append(data.files[index].preview);
       });
     },
 
@@ -513,6 +515,41 @@
         .end();
     },
 
+    _editHandler: function(e) {
+      e.preventDefault();
+      if (!this.options.edit) return;
+      var that = this,
+        button = $(e.currentTarget),
+        template = button.closest('.template-upload'),
+        data = template.data('data'),
+        index = button.data().index;
+      this.options.edit(data.files[index]).then(function(file) {
+        if (!file) return;
+        data.files[index] = file;
+        data.context.addClass('processing');
+        template.find('.edit,.start').prop('disabled', true);
+        $(that.element)
+          .fileupload('process', data)
+          .always(function() {
+            template
+              .find('.size')
+              .text(that._formatFileSize(data.files[index].size));
+            data.context.removeClass('processing');
+            that._renderPreviews(data);
+          })
+          .done(function() {
+            template.find('.edit,.start').prop('disabled', false);
+          })
+          .fail(function() {
+            template.find('.edit').prop('disabled', false);
+            var error = data.files[index].error;
+            if (error) {
+              template.find('.error').text(error);
+            }
+          });
+      });
+    },
+
     _startHandler: function(e) {
       e.preventDefault();
       var button = $(e.currentTarget),
@@ -632,6 +669,7 @@
     _initEventHandlers: function() {
       this._super();
       this._on(this.options.filesContainer, {
+        'click .edit': this._editHandler,
         'click .start': this._startHandler,
         'click .cancel': this._cancelHandler,
         'click .delete': this._deleteHandler