WIP: Implement uploads

2023-09-18 17:56:33 +02:00
parent ce97017ac4
commit d6687c3ca4
51 changed files with 1123 additions and 168 deletions
@@ -0,0 +1,63 @@
+import { Controller } from '@hotwired/stimulus'
+import { useFetch } from '../mixins/use_fetch'
+import Dropzone from 'dropzone'
+import 'dropzone/dist/dropzone.css'
+Dropzone.autoDiscover = false
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+
+    static targets = [
+        'dropzone',
+    ]
+
+    static values = {
+        endpointUpload: String,
+        endpointDelete: String,
+        maxFiles: Number,
+        maxFilesize: Number,
+        acceptedFiles: String,
+        chunking: Boolean,
+        params: Object,
+    }
+
+    connect () {
+        useFetch(this)
+
+        const dropzone = new Dropzone(this.dropzoneTarget, {
+            url: this.endpointUploadValue,
+            withCredentials: true,
+            maxFiles: this.maxFilesValue,
+            maxFilesize: this.maxFilesizeValue,
+            acceptedFiles: this.acceptedFilesValue,
+            chunking: this.chunkingValue,
+            chunkSize: 10000000,
+            parallelUploads: 3,
+            retryChunks: true,
+            disablePreviews: false,
+            createImageThumbnails: true,
+            autoProcessQueue: true,
+            addRemoveLinks: true,
+        })
+
+        dropzone.on('sending', (file, xhr, formData) => {
+            if (this.hasParamsValue) {
+                let keys = Object.keys(this.paramsValue)
+                keys.forEach(key => {
+                    formData.append(key, this.paramsValue[key])
+                })
+            }
+            formData.append('uuid', file.upload.uuid)
+            formData.append('originalFilename', file.name)
+            window.dispatchEvent(new CustomEvent('dropzone:uploading'))
+        })
+
+        dropzone.on('queuecomplete', () => {
+            window.dispatchEvent(new CustomEvent('dropzone:complete'))
+        })
+
+        dropzone.on('removedfile', (file) => {
+            fetch(`${this.endpointDeleteValue}?uuid=${file.upload.uuid}`, { method: 'delete', credentials: 'include' })
+        })
+    }
+}