Ensure page media thumb is properly size on drop

themes/grav/app/forms/fields/files.js

@@ -144,6 +144,7 @@ export default class FilesField {
         this.dropzone = new Dropzone(container, this.options);
         this.dropzone.on('complete', this.onDropzoneComplete.bind(this));
         this.dropzone.on('success', this.onDropzoneSuccess.bind(this));
+        this.dropzone.on('addedfile', this.onDropzoneAddedFile.bind(this));
         this.dropzone.on('removedfile', this.onDropzoneRemovedFile.bind(this));
         this.dropzone.on('sending', this.onDropzoneSending.bind(this));
         this.dropzone.on('error', this.onDropzoneError.bind(this));
@@ -260,6 +261,10 @@ export default class FilesField {
         return decodeURIComponent(escape(window.atob(str)));
     }
 
+    onDropzoneAddedFile(file, ...extra) {
+      return this.dropzone.options.addedfile(file);
+    }
+
     onDropzoneRemovedFile(file, ...extra) {
         if (!file.accepted || file.rejected) { return; }
         let url = file.removeUrl || this.urls.delete || this.options.url;

themes/grav/app/pages/page/media.js

@@ -91,13 +91,7 @@ export default class PageMedia extends FilesField {
                 this.dropzone.options.thumbnail.call(this.dropzone, mock, data.url);
             });
 
-            const status = JSON.parse(Cookies.get('grav-admin-pagemedia') || '{}');
-
-            if (status.width) {
-              const input = this.container.closest('.pagemedia-field').find('.media-resizer');
-              updateMediaSizes(input, status.width, false);
-            }
-
+            this.updateThumbsSize();
             this.container.find('.dz-preview').prop('draggable', 'true');
         });
     }
@@ -121,16 +115,16 @@ export default class PageMedia extends FilesField {
         }
 
         // accepted
-        const status = JSON.parse(Cookies.get('grav-admin-pagemedia') || '{}');
-
-        if (status.width) {
-          const input = this.container.closest('.pagemedia-field').find('.media-resizer');
-          updateMediaSizes(input, status.width, false);
-        }
-
+        this.updateThumbsSize();
         $('.dz-preview').prop('draggable', 'true');
     }
 
+    onDropzoneAddedFile(file, ...extra) {
+      super.onDropzoneAddedFile(file, extra);
+
+      this.updateThumbsSize();
+    }
+
     onDropzoneRemovedFile(file, ...extra) {
         super.onDropzoneRemovedFile(file, ...extra);
         if (this.sortable) {
@@ -138,6 +132,15 @@ export default class PageMedia extends FilesField {
         }
     }
 
+    updateThumbsSize() {
+      const status = JSON.parse(Cookies.get('grav-admin-pagemedia') || '{}');
+
+      if (status.width) {
+        const input = this.container.closest('.pagemedia-field').find('.media-resizer');
+        updateMediaSizes(input, status.width, false);
+      }
+    }
+
     attachDragDrop() {
         this.container.delegate('[data-dz-insert]', 'click', (e) => {
             let target = $(e.currentTarget).parent('.dz-preview').find('.dz-filename');