42 lines
1.4 KiB
JavaScript
42 lines
1.4 KiB
JavaScript
// 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');
|
|
}
|
|
} |