-import DropZoneLib from "dropzone";
-import {fadeOut} from "../services/animations";
+import DropZoneLib from 'dropzone';
+import {fadeOut} from '../services/animations';
+import {Component} from './component';
+
+export class Dropzone extends Component {
-/**
- * Dropzone
- * @extends {Component}
- */
-class Dropzone {
setup() {
this.container = this.$el;
this.url = this.$opts.url;
this.successMessage = this.$opts.successMessage;
this.removeMessage = this.$opts.removeMessage;
+ this.uploadLimit = Number(this.$opts.uploadLimit);
this.uploadLimitMessage = this.$opts.uploadLimitMessage;
this.timeoutMessage = this.$opts.timeoutMessage;
- const _this = this;
+ const component = this;
this.dz = new DropZoneLib(this.container, {
addRemoveLinks: true,
dictRemoveFile: this.removeMessage,
timeout: Number(window.uploadTimeout) || 60000,
- maxFilesize: Number(window.uploadLimit) || 256,
+ maxFilesize: this.uploadLimit,
url: this.url,
withCredentials: true,
init() {
this.dz = this;
- this.dz.on('sending', _this.onSending.bind(_this));
- this.dz.on('success', _this.onSuccess.bind(_this));
- this.dz.on('error', _this.onError.bind(_this));
- }
+ this.dz.on('sending', component.onSending.bind(component));
+ this.dz.on('success', component.onSuccess.bind(component));
+ this.dz.on('error', component.onError.bind(component));
+ },
});
}
onSending(file, xhr, data) {
-
const token = window.document.querySelector('meta[name=token]').getAttribute('content');
data.append('_token', token);
- xhr.ontimeout = (e) => {
+ xhr.ontimeout = () => {
this.dz.emit('complete', file);
this.dz.emit('error', file, this.timeoutMessage);
- }
+ };
}
onSuccess(file, data) {
- this.container.dispatchEvent(new Event('dropzone'))
this.$emit('success', {file, data});
if (this.successMessage) {
onError(file, errorMessage, xhr) {
this.$emit('error', {file, errorMessage, xhr});
- const setMessage = (message) => {
+ const setMessage = message => {
const messsageEl = file.previewElement.querySelector('[data-dz-errormessage]');
messsageEl.textContent = message;
- }
+ };
if (xhr && xhr.status === 413) {
setMessage(this.uploadLimitMessage);
removeAll() {
this.dz.removeAllFiles(true);
}
-}
-export default Dropzone;
\ No newline at end of file
+}