import {Component} from './component';
-import {Clipboard} from '../services/clipboard';
+import {Clipboard} from '../services/clipboard.ts';
import {
elem, getLoading, onSelect, removeLoading,
-} from '../services/dom';
+} from '../services/dom.ts';
export class Dropzone extends Component {
this.isActive = true;
this.url = this.$opts.url;
+ this.method = (this.$opts.method || 'post').toUpperCase();
this.successMessage = this.$opts.successMessage;
this.errorMessage = this.$opts.errorMessage;
this.uploadLimitMb = Number(this.$opts.uploadLimit);
this.uploadLimitMessage = this.$opts.uploadLimitMessage;
this.zoneText = this.$opts.zoneText;
this.fileAcceptTypes = this.$opts.fileAccept;
+ this.allowMultiple = this.$opts.allowMultiple === 'true';
this.setupListeners();
}
}
manualSelectHandler() {
- const input = elem('input', {type: 'file', style: 'left: -400px; visibility: hidden; position: fixed;', accept: this.fileAcceptTypes});
+ const input = elem('input', {
+ type: 'file',
+ style: 'left: -400px; visibility: hidden; position: fixed;',
+ accept: this.fileAcceptTypes,
+ multiple: this.allowMultiple ? '' : null,
+ });
this.container.append(input);
input.click();
input.addEventListener('change', () => {
startXhrForUpload(upload) {
const formData = new FormData();
formData.append('file', upload.file, upload.file.name);
+ if (this.method !== 'POST') {
+ formData.append('_method', this.method);
+ }
const component = this;
const req = window.$http.createXMLHttpRequest('POST', this.url, {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
upload.markSuccess(component.successMessage);
} else if (this.readyState === XMLHttpRequest.DONE && this.status >= 400) {
- const content = this.responseText;
- const data = content.startsWith('{') ? JSON.parse(content) : {message: content};
- const message = data?.message || data?.error || content;
- upload.markError(message);
+ upload.markError(window.$http.formatErrorResponseText(this.responseText));
}
},
});