WIP: Extend and improve profile editing

assets/controllers/upload_collection_controller.js

@@ -1,15 +1,12 @@
 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 targets = ['dropzone', 'errors', 'previewTemplate']
 
     static values = {
         endpointUpload: String,
@@ -19,6 +16,7 @@ export default class extends Controller {
         acceptedFiles: String,
         chunking: Boolean,
         params: Object,
+        language: Object,
     }
 
     connect () {
@@ -30,14 +28,26 @@ export default class extends Controller {
             maxFiles: this.maxFilesValue,
             maxFilesize: this.maxFilesizeValue,
             acceptedFiles: this.acceptedFilesValue,
-            chunking: this.chunkingValue,
+            chunking: true,
             chunkSize: 10000000,
             parallelUploads: 3,
             retryChunks: true,
             disablePreviews: false,
+            previewTemplate: this.previewTemplateTarget.innerHTML,
             createImageThumbnails: true,
             autoProcessQueue: true,
-            addRemoveLinks: true,
+            addRemoveLinks: false,
+            dictFileTooBig: this.languageValue.fileTooBig,
+            dictInvalidFileType: this.languageValue.invalidFileType,
+            dictMaxFilesExceeded: this.languageValue.maxFilesExceeded,
+        })
+
+        dropzone.on('addedfile', file => {
+            this.errorsTarget.classList.add('hidden')
+        })
+
+        dropzone.on('removedfile', (file) => {
+            fetch(`${this.endpointDeleteValue}?uuid=${file.upload.uuid}`, { method: 'delete', credentials: 'include' })
         })
 
         dropzone.on('sending', (file, xhr, formData) => {
@@ -56,8 +66,10 @@ export default class extends Controller {
             window.dispatchEvent(new CustomEvent('dropzone:complete'))
         })
 
-        dropzone.on('removedfile', (file) => {
-            fetch(`${this.endpointDeleteValue}?uuid=${file.upload.uuid}`, { method: 'delete', credentials: 'include' })
+        dropzone.on('error', (file, errorMessage) => {
+            this.errorsTarget.innerText = errorMessage
+            this.errorsTarget.classList.remove('hidden')
+            dropzone.removeFile(file)
         })
     }
 }