Vue event bus, uploading files handles from file service.

assets/controllers/filedropzone_controller.js

@@ -0,0 +1,42 @@
+// filedropzone_controller.js
+
+import { Controller } from '@hotwired/stimulus';
+import axios from 'axios';
+
+export default class extends Controller {
+    connect() {
+        this.element.addEventListener('dropzone:connect', this._onConnect);
+        this.element.addEventListener('dropzone:change', this._onChange);
+        this.element.addEventListener('dropzone:clear', this._onClear);
+    }
+
+    disconnect() {
+        // You should always remove listeners when the controller is disconnected to avoid side-effects
+        this.element.removeEventListener('dropzone:connect', this._onConnect);
+        this.element.removeEventListener('dropzone:change', this._onChange);
+        this.element.removeEventListener('dropzone:clear', this._onClear);
+    }
+
+    _onConnect(event) {
+        // The dropzone was just created
+        console.info('onconnect');
+    }
+
+    _onChange(event) {
+        // The dropzone just changed
+        console.info('onchange');
+        axios.post(document.URL, new FormData(event.target.closest('form')), {
+            headers: {
+                'Content-Type': 'multipart/form-data'
+            }
+        }).then(() => {
+            event.target.querySelector('.dropzone-preview-button').click();
+            window.EventBus.$emit('fileUploaded');
+        })
+    }
+
+    _onClear(event) {
+        // The dropzone has just been cleared
+        console.info('onclear');
+    }
+}