Better handling of unset in uploaded files (fixes #1427)

CHANGELOG.md

@@ -2,7 +2,9 @@
 ## 11/12/2018
 
 1. [](#improved)
-    * v.1.8.14 fixes merged in    
+    * v.1.8.14 fixes merged in
+1. [](#bugfix)
+    * Better handling of unset in uploaded files [#1427](https://github.com/getgrav/grav-plugin-admin/issues/1427)
 
 # v1.9.0-beta.5
 ## 11/05/2018

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

@@ -133,6 +133,8 @@ export default class FilesField {
             const URL = Object.keys(value).filter((key) => value[key].name === filename).shift();
             target.attr('href', `${config.base_url_simple}/${URL}`);
         });
+
+        $(this.dropzone.element).find('[data-dz-unset]').hide();
     }
 
     initDropzone() {
@@ -156,12 +158,15 @@ export default class FilesField {
             dropzone.files.push(mock);
             dropzone.options.addedfile.call(dropzone, mock);
             if (mock.type.match(/^image\//)) {
+                console.log('mock');
                 dropzone.options.thumbnail.call(dropzone, mock, data.path);
                 dropzone.createThumbnailFromUrl(mock, data.path);
             }
 
             file.remove();
         });
+
+        $(dropzone.element).find('[data-dz-unset]').hide();
     }
 
     getURI() {
@@ -192,6 +197,9 @@ export default class FilesField {
             input.val(value + ' ');
         }
 
+        console.log(file.previewElement);
+        $(file.previewElement).find('[data-dz-unset]').css('display', null);
+
         return this.handleError({
             file,
             data: response,

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

@@ -1,15 +1,33 @@
 import $ from 'jquery';
 
 $(document).on('click', '.dz-unset', function() {
+    const dropzone = $(this).closest('[data-grav-file-settings]')[0].dropzone;
     $(this).closest('.dz-image-preview').remove();
     const file_upload = $('.files-upload');
     const unset_image = $(this).closest('.dz-image-preview').find('[data-dz-name]').text().trim();
     const images = JSON.parse(file_upload.find('input[data-grav-field="hidden"]').val()) || {};
     let image_array = {};
+
     $.each(images, function(ind, obj) {
         if (!ind.endsWith(unset_image)) {
             image_array[ind] = obj;
         }
     });
+
+    const file = dropzone.files.filter((file) => file.name === unset_image).shift();
+
+    if (dropzone.options.maxFiles === 1) {
+        dropzone.removeFile(file);
+    } else {
+        const index = dropzone.files.indexOf(file);
+        if (index !== -1) {
+            dropzone.files.splice(index, 1);
+        }
+
+        if (!dropzone.files.length) {
+            $(dropzone.previewsContainer).removeClass('dz-started');
+        }
+    }
+
     file_upload.find('input[data-grav-field="hidden"]').val(JSON.stringify(image_array));
 });