make public storage and direct upload optional

app/javascript/elements/file_dropzone.js

@@ -9,28 +9,36 @@ export default actionable(targetable(class extends HTMLElement {
   ]
 
   connectedCallback () {
-    import('@rails/activestorage')
+    if (this.dataset.isDirectUpload === 'true') {
+      import('@rails/activestorage')
+    }
 
     this.addEventListener('drop', this.onDrop)
 
     this.addEventListener('dragover', (e) => e.preventDefault())
+
+    document.addEventListener('turbo:submit-end', this.toggleLoading)
+  }
+
+  disconnectedCallback () {
+    document.removeEventListener('turbo:submit-end', this.toggleLoading)
   }
 
   onDrop (e) {
     e.preventDefault()
 
+    this.input.files = e.dataTransfer.files
+
     this.uploadFiles(e.dataTransfer.files)
   }
 
   onSelectFiles (e) {
     e.preventDefault()
 
-    this.uploadFiles(this.input.files).then(() => {
-      this.input.value = ''
-    })
+    this.uploadFiles(this.input.files)
   }
 
-  toggleLoading () {
+  toggleLoading = () => {
     this.loading.classList.toggle('hidden')
     this.icon.classList.toggle('hidden')
     this.classList.toggle('opacity-50')
@@ -39,50 +47,56 @@ export default actionable(targetable(class extends HTMLElement {
   async uploadFiles (files) {
     this.toggleLoading()
 
-    const { DirectUpload } = await import('@rails/activestorage')
+    if (this.dataset.isDirectUpload === 'true') {
+      const { DirectUpload } = await import('@rails/activestorage')
 
-    await Promise.all(
-      Array.from(files).map(async (file) => {
-        const upload = new DirectUpload(
-          file,
-          '/direct_uploads',
-          this.input
-        )
+      await Promise.all(
+        Array.from(files).map(async (file) => {
+          const upload = new DirectUpload(
+            file,
+            '/direct_uploads',
+            this.input
+          )
 
-        return new Promise((resolve, reject) => {
-          upload.create((error, blob) => {
-            if (error) {
-              console.error(error)
+          return new Promise((resolve, reject) => {
+            upload.create((error, blob) => {
+              if (error) {
+                console.error(error)
 
-              return reject(error)
-            } else {
-              return resolve(blob)
-            }
+                return reject(error)
+              } else {
+                return resolve(blob)
+              }
+            })
+          }).catch((error) => {
+            console.error(error)
           })
-        }).catch((error) => {
-          console.error(error)
         })
+      ).then((blobs) => {
+        if (this.dataset.submitOnUpload) {
+          this.querySelectorAll('[name="blob_signed_ids[]"]').forEach((e) => e.remove())
+        }
+
+        blobs.forEach((blob) => {
+          const input = document.createElement('input')
+
+          input.type = 'hidden'
+          input.name = 'blob_signed_ids[]'
+          input.value = blob.signed_id
+
+          this.append(input)
+        })
+
+        if (this.dataset.submitOnUpload) {
+          this.closest('form').querySelector('button[type="submit"]').click()
+        }
+      }).finally(() => {
+        this.toggleLoading()
       })
-    ).then((blobs) => {
-      if (this.dataset.submitOnUpload) {
-        this.querySelectorAll('[name="blob_signed_ids[]"]').forEach((e) => e.remove())
-      }
-
-      blobs.forEach((blob) => {
-        const input = document.createElement('input')
-
-        input.type = 'hidden'
-        input.name = 'blob_signed_ids[]'
-        input.value = blob.signed_id
-
-        this.append(input)
-      })
-
+    } else {
       if (this.dataset.submitOnUpload) {
         this.closest('form').querySelector('button[type="submit"]').click()
       }
-    }).finally(() => {
-      this.toggleLoading()
-    })
+    }
   }
 }))