Add: Remove a file

classes/FirstLetterStrategy.php

@@ -20,6 +20,13 @@ class FirstLetterStrategy {
         return pathinfo($filename, PATHINFO_FILENAME).'-'.$width.'.'.pathinfo($filename, PATHINFO_EXTENSION);
     }
 
+    public function versionRegex($filename) {
+        $ext = preg_quote(pathinfo($filename, PATHINFO_EXTENSION), '/');
+        $name = preg_quote(pathinfo($filename, PATHINFO_FILENAME), '/');
+
+        return "/^{$name}-[0-9]+\.{$ext}$/";
+    }
+
     public function croppedPath() {
         return 'cropped';
     }

classes/UploadStorage.php

@@ -30,7 +30,39 @@ class UploadStorage {
             'crop' => $this->data['crop']
         ]);
 
-        return $fileName;
+        return $sourcePath.'/'.$fileName;
+    }
+
+    public function getFileData($filename) {
+        $realname = preg_replace('/^source/', 'cropped', $filename);
+
+        return [
+            'url' => $this->storage()->url($realname),
+            'type' => $this->storage()->mimeType($filename),
+            'size' => $this->storage()->size($filename),
+            'name' => pathinfo($filename, PATHINFO_BASENAME)
+        ];
+    }
+
+    public function removeFile($filename) {
+        $sourcePath = $this->getStrategy()->sourcePath($filename).'/'.$filename;
+        $croppedPath = $this->getStrategy()->croppedPath().'/'.$filename;
+
+        if (!Storage::disk($this->disk)->exists($sourcePath)) {
+            return;
+        }
+
+        if (Storage::disk($this->disk)->exists($croppedPath)) {
+            Storage::disk($this->disk)->delete($croppedPath);
+        }
+
+        collect(Storage::disk($this->disk)->files($this->getStrategy()->publicPath($filename)))->filter(function($file) use ($filename) {
+            return preg_match($this->getStrategy()->versionRegex($filename), pathinfo($file, PATHINFO_BASENAME));
+        })->each(function($file) {
+            Storage::disk($this->disk)->delete($file);
+        });
+
+        Storage::disk($this->disk)->delete($sourcePath);
     }
 
     private function storage() {

formwidgets/Responsiveimage.php

@@ -118,8 +118,11 @@ class Responsiveimage extends FormWidgetBase
      */
     protected function prepareVars()
     {
-        $this->vars['aspectRatio'] = $this->aspectRatio;
+        $this->vars['aspectRatio'] = $this->aspectRatio ?: 'null';
-        $this->vars['minWidth'] = $this->minWidth;
+        $this->vars['minWidth'] = $this->minWidth ?: '0';
+        $this->vars['name'] = $this->formField->getName();
+        $this->vars['value'] = str_replace('"', "'", json_encode($this->getLoadValue()));
+        $this->vars['model'] = $this->model;
     }
 
     /**
@@ -134,6 +137,15 @@ class Responsiveimage extends FormWidgetBase
         return $record;
     }
 
+    public function getLoadValue() {
+        $value = parent::getLoadValue();
+        if (!$value) {
+            return null;
+        }
+
+        return app(UploadStorage::class)->getFileData($value['file']);
+    }
+
     /**
      * Returns the escaped and translated prompt text to display according to the type.
      * @return string
@@ -186,46 +198,6 @@ class Responsiveimage extends FormWidgetBase
         return $cssDimensions;
     }
 
-    /**
-     * Returns the specified accepted file types, or the default
-     * based on the mode. Image mode will return:
-     * - jpg,jpeg,bmp,png,gif,svg
-     * @return string
-     */
-    public function getAcceptedFileTypes($includeDot = false)
-    {
-        $types = $this->fileTypes;
-
-        if ($types === false) {
-            $isImage = starts_with($this->getDisplayMode(), 'image');
-            $types = implode(',', FileDefinitions::get($isImage ? 'imageExtensions' : 'defaultExtensions'));
-        }
-
-        if (!$types || $types == '*') {
-            return null;
-        }
-
-        if (!is_array($types)) {
-            $types = explode(',', $types);
-        }
-
-        $types = array_map(function ($value) use ($includeDot) {
-            $value = trim($value);
-
-            if (substr($value, 0, 1) == '.') {
-                $value = substr($value, 1);
-            }
-
-            if ($includeDot) {
-                $value = '.'.$value;
-            }
-
-            return $value;
-        }, $types);
-
-        return implode(',', $types);
-    }
-
     /**
      * Removes a file attachment.
      */
@@ -281,7 +253,7 @@ class Responsiveimage extends FormWidgetBase
      */
     public function getSaveValue($value)
     {
-        return FormField::NO_SAVE_DATA;
+        return $value ? json_decode($value) : null;
     }
 
     /**
@@ -300,9 +272,16 @@ class Responsiveimage extends FormWidgetBase
             throw new ApplicationException('File is not valid');
         }
 
-        app(UploadStorage::class)->storeFileFromUpload($uploadedFile, $data);
+        $filename = app(UploadStorage::class)->storeFileFromUpload($uploadedFile, $data);
 
-        return Response::make('', 200);
+        return Response::json([
+            'file' => $filename,
+            'data' => array_only($data, ['title', 'description'])
+        ], 200);
+    }
+
+    public function onDelete() {
+        app(UploadStorage::class)->removeFile(Input::get('fileName'));
     }
 
     /**

formwidgets/responsiveimage/assets/css/main.css

@@ -169,6 +169,17 @@
             position: relative;
             background: white;
             border: 1px solid rgba(0,0,0,0.2);
+            [data-dz-remove] {
+                position: absolute;
+                right: 0;
+                top: 0;
+                width: 2rem;
+                height: 2rem;
+                color: #333;
+                fill: currentColor;
+                margin-top: 0.5rem;
+                margin-right: 0.5rem;
+            }
             div.details {
                 padding: 1rem;
                 flex: 1 0 0;
@@ -184,9 +195,9 @@
                 }
             }
             img {
-                width: 15rem;
+                width: 15rem !important;
-                height: 10rem;
+                height: 10rem !important;
-                object-fit: cover;
+                object-fit: cover !important;
             }
             div.cdz-progress {
                 position: absolute;

formwidgets/responsiveimage/assets/src/App.vue

@@ -9,10 +9,12 @@
             <span class="upload-button-icon oc-icon-upload"></span>
         </a>
 
-        <vue-dropzone @vdropzone-sending="onSend" @vdropzone-thumbnail="onAdd" v-if="loaded" ref="dropzone" :id="id" :options="dropzoneOptions"></vue-dropzone>
+        <vue-dropzone @vdropzone-mounted="onMount" @vdropzone-removed-file="onRemove" @vdropzone-success="onUploadSuccess" @vdropzone-sending="onSend" @vdropzone-thumbnail="onAdd" v-if="loaded" ref="dropzone" :id="id" :options="dropzoneOptions"></vue-dropzone>
 
         <div class="preview-container" ref="previewsContainer"></div>
 
+        <input type="hidden" :name="name" :value="asString">
+
         <!-- Existing file -->
         <!-- 
         <div class="upload-files-container">
@@ -85,19 +87,20 @@ export default {
                     header: {}
                 }
             },
-            generalSettings: {
+            loaded: false,
-                sidebarVisible: true
+            content: []
-            },
-            loaded: false
         };
     },
 
     components: { vueDropzone },
     props: {
         cropOptions: {},
-        mode: {
+        name: {
             required: true
         },
+        value: {
+            default: function() { return null; }
+        },
         formid: {},
         handlers: {}
     },
@@ -121,6 +124,9 @@ export default {
                 },
                 previewTemplate: `
                     <div class="cdz-preview">
+                        <a href="#" data-dz-remove>
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>
+                        </a>
                         <img data-dz-thumbnail />
                         <div class="details">
                             <div><span data-dz-name></span></div>
@@ -132,7 +138,14 @@ export default {
         }
     },
     methods: {
+        onUploadSuccess(file, response) {
+            this.content = response;
+        },
         onAdd(file) {
+            if(file.manuallyAdded === true) {
+                return;
+            }
+
             if (file.width < this.cropOptions.minWidth) {
                 console.log('zu klein');
                 $.oc.flashMsg({
@@ -150,7 +163,6 @@ export default {
             this.showPopup(file).then((ret) => {
                 this.extraData[file.name] = ret;
                 this.$refs.dropzone.processQueue();
-                console.log('AAA');
             }).catch((err) => {
                 this.$refs.dropzone.removeFile(file);
                 this.addVisible = true;
@@ -158,10 +170,28 @@ export default {
         },
         onSend(file, xhr, formData) {
             formData.append('extraData', JSON.stringify(this.extraData[file.name]));
+        },
+        onMount() {
+            if (this.value === null) { return; }
+            this.addVisible = false;
+            var file = { size: this.value.size, name: this.value.name, type: this.value.type };
+            this.$refs.dropzone.manuallyAddFile(file, this.value.url);
+        },
+        onRemove(file, error, xhr) {
+            var _cls = this;
+
+            $(this.$el).request(this.handlers.onDelete, {
+                data: { fileName: file.name },
+                success: function(data) {
+                    _cls.addVisible = true;
+                    _cls.content = '';
+                }
+            });
         }
     },
     mounted() {
         this.loaded = true;
+        this.content = this.value;
         var self = this;
     }
 };

formwidgets/responsiveimage/partials/_responsiveimage.htm

@@ -5,14 +5,15 @@
 <?php else: ?>
     <div data-responsiveimage>
         <div>
-            <app formid="<?php echo $this->getId(); ?>" name="<?= $this->getFieldName() ?>" :handlers="{
+            <app formid="<?php echo $this->getId(); ?>" name="<?= $name ?>" :handlers="{
-                onUpload: '<?= $this->getEventHandler('onUpload') ?>'
+                onUpload: '<?= $this->getEventHandler('onUpload') ?>',
+                onDelete: '<?= $this->getEventHandler('onDelete') ?>'
                 }"
                 :crop-options="{
-                    aspectRatio: <?= $this->aspectRatio ?: 'null' ?>,
+                    aspectRatio: <?= $aspectRatio ?>,
-                    minWidth: <?= $this->minWidth ?: '0' ?>,
+                    minWidth: <?= $minWidth ?>,
                 }"
-                mode="<?= $this->displayMode ?>"
+                :value="<?= $value; ?>"
             ></app>
         </div>
     </div>