Import features Upload field to Attach

resources/js/controllers/attach_controller.js

@@ -1,5 +1,5 @@
-import { Controller } from '@hotwired/stimulus';
 import ApplicationController from "./application_controller";
+import Sortable from 'sortablejs';
 
 export default class extends ApplicationController {
     static values = {
@@ -11,6 +11,18 @@ export default class extends ApplicationController {
             type: Array,
             default: [],
         },
+        group: {
+            type: String,
+            default: null,
+        },
+        storage: {
+            type: String,
+            default: 'public',
+        },
+        path: {
+            type: String,
+            default: null,
+        },
         count: {
             type: Number,
             default: 3,
@@ -33,18 +45,41 @@ export default class extends ApplicationController {
         },
     };
 
-    static targets = ['files', 'preview', 'container'];
+    static targets = ['files', 'preview', 'container', 'template'];
 
     connect() {
         this.attachmentValue.forEach((id) => this.renderPreview(id));
         this.togglePlaceholderShow();
+
+        new Sortable(this.element.querySelector('.sortable-dropzone'), {
+            animation: 150,
+            onEnd: () => {
+                this.reorderElements();
+                this.toast('save?');
+            },
+        });
+    }
+
+
+    preventDefaults (event) {
+        event.preventDefault()
+        event.stopPropagation()
+    }
+
+    dropFiles(event) {
+        this.filesTarget.files = event.dataTransfer.files;
+
+        this.filesTarget.dispatchEvent(
+            new Event('change', { bubbles: true })
+        );
     }
 
-    change(event) {
+    selectFiles(event) {
         [...event.target.files].forEach((file) => {
             let sizeMB = file.size / 1000 / 1000; //MB (Not MiB)
 
             if (sizeMB > this.sizeValue) {
+                this.toast(this.errorSizeValue.replace(':name', file.name));
                 alert(this.errorSizeValue.replace(':name', file.name));
                 return;
             }
@@ -60,6 +95,9 @@ export default class extends ApplicationController {
     upload(file) {
         let data = new FormData();
         data.append('file', file);
+        data.append('storage', this.storageValue);
+        data.append('group', this.groupValue);
+        data.append('path', this.pathValue);
 
         this.loadingValue = this.loadingValue + 1;
         this.element.ariaBusy = 'true';
@@ -93,6 +131,8 @@ export default class extends ApplicationController {
                 this.loadingValue = this.loadingValue - 1;
                 this.togglePlaceholderShow();
                 console.error('Error:', error);
+
+                this.toast(this.errorTypeValue);
                 alert(this.errorTypeValue);
             });
     }
@@ -114,26 +154,44 @@ export default class extends ApplicationController {
     }
 
     /**
-     *
      * @param attachment
      * @param replace
      */
     renderPreview(attachment, replace = null) {
-        const pip = document.createElement('div');
-        pip.id = `attachment-${attachment.id}`;
-        pip.classList.add('pip', 'col', 'position-relative');
+        let preview =  this.templateTarget.content.querySelector('*').cloneNode(true);
 
-        pip.innerHTML = `
-          <input type="hidden" name="${this.nameValue}" value="${attachment.id}">
-          <img class="attach-image rounded border user-select-none" src="${attachment.url}"/>
-          <button class="btn-close border shadow position-absolute end-0 top-0" type="button" data-action="click->attach#remove" data-index="${attachment.id}"></button>
-      `;
+        preview.querySelectorAll('*').forEach(element => {
+            preview.innerHTML = preview.innerHTML
+                .replace(/{id}/gi, attachment.id)
+                .replace(/{url}/gi, attachment.url)
+                .replace(/{name}/gi, this.nameValue);
+        });
 
         if (replace !== null) {
             this.element.querySelector(`#attachment-${replace}`).outerHTML = pip.outerHTML;
             return;
         }
 
-        this.containerTarget.insertAdjacentElement('beforebegin', pip);
+        this.containerTarget.insertAdjacentElement('beforebegin', preview);
+    }
+
+    reorderElements(){
+        const items = {};
+        let elements = this.element.querySelectorAll(`:scope .pip`);
+
+        elements.forEach((preview, index) => {
+            const id = preview.querySelector('input').value;
+            items[id] = index;
+        });
+
+        fetch(this.prefix('/systems/files'), {
+            method: 'POST',
+            body: JSON.stringify({
+                files: items,
+            }),
+            headers: {
+                'X-CSRF-Token': document.head.querySelector('meta[name="csrf_token"]').content,
+            },
+        }).then();
     }
 }

resources/sass/plugins/plugin.scss

@@ -354,7 +354,7 @@
 
     .attach-image {
         object-fit: cover;
-        height: 12em;
+        aspect-ratio: 1/1;
         width: 100%;
         border: 1px solid #000;
         position: relative;
@@ -386,7 +386,9 @@
     }
 
     .attach-image-placeholder {
-        height: 12em;
+        aspect-ratio: 1/1;
+        width: 100%;
+        height: 100%;
         display: flex;
         cursor: pointer;
         align-content: center;

resources/views/fields/attach.blade.php

@@ -6,15 +6,21 @@ class="attach"
          data-attach-count-value="{{ $maxCount }}"
          data-attach-loading-value="0"
          data-attach-attachment-value='@json($value ?? [])'
+         data-action="
+             drop->attach#dropFiles:prevent
+             dragenter->attach#preventDefaults
+             dragover->attach#preventDefaults
+             dragleave->attach#preventDefaults
+         "
     >
-        <div data-target="attach.preview" class="row row-cols-5 gy-3">
-            <div class="col" data-attach-target="container">
-                <label for="{{$id}}" class="border rounded bg-light attach-image-placeholder pointer-event">
+        <div data-target="attach.preview" class="row row-cols-lg-6 gy-3 sortable-dropzone">
+            <div class="col order-last" data-attach-target="container">
+                <label for="{{$id}}" class="border rounded bg-light attach-image-placeholder pointer-event h-100">
                     <input class="form-control d-none"
                            type="file"
                            multiple
                            data-attach-target="files"
-                           data-action="change->attach#change"
+                           data-action="change->attach#selectFiles"
                         {{ $attributes }}
                     >
 
@@ -31,5 +37,15 @@ class="attach"
                 </label>
             </div>
         </div>
+
+
+        <template data-target="attach.template">
+            <div class="pip col position-relative">
+                <input type="hidden" name="{name}" value="{id}">
+                <img class="attach-image rounded border user-select-none" src="{url}"/>
+                <button class="btn-close rounded-circle bg-white border shadow position-absolute end-0 top-0" type="button" data-action="click->attach#remove" data-index="{id}"></button>
+            </div>
+        </template>
+
     </div>
 @endcomponent