feat: properly destroy objects on disconnect from dom

assets/controllers/upload_collection_controller.js

@@ -22,7 +22,7 @@ export default class extends Controller {
     connect () {
         useFetch(this)
 
-        const dropzone = new Dropzone(this.dropzoneTarget, {
+        this.dropzone = new Dropzone(this.dropzoneTarget, {
             url: this.endpointUploadValue,
             withCredentials: true,
             maxFiles: this.maxFilesValue,
@@ -42,15 +42,15 @@ export default class extends Controller {
             dictMaxFilesExceeded: this.languageValue.maxFilesExceeded,
         })
 
-        dropzone.on('addedfile', file => {
+        this.dropzone.on('addedfile', file => {
             this.errorsTarget.classList.add('hidden')
         })
 
-        dropzone.on('removedfile', (file) => {
+        this.dropzone.on('removedfile', (file) => {
             fetch(`${this.endpointDeleteValue}?uuid=${file.upload.uuid}`, { method: 'delete', credentials: 'include' })
         })
 
-        dropzone.on('sending', (file, xhr, formData) => {
+        this.dropzone.on('sending', (file, xhr, formData) => {
             if (this.hasParamsValue) {
                 let keys = Object.keys(this.paramsValue)
                 keys.forEach(key => {
@@ -62,14 +62,18 @@ export default class extends Controller {
             window.dispatchEvent(new CustomEvent('dropzone:uploading'))
         })
 
-        dropzone.on('queuecomplete', () => {
+        this.dropzone.on('queuecomplete', () => {
             window.dispatchEvent(new CustomEvent('dropzone:complete'))
         })
 
-        dropzone.on('error', (file, errorMessage) => {
+        this.dropzone.on('error', (file, errorMessage) => {
             this.errorsTarget.innerText = errorMessage
             this.errorsTarget.classList.remove('hidden')
             dropzone.removeFile(file)
         })
     }
+
+    disconnect() {
+        this.dropzone.destroy()
+    }
 }