X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/61d2ea6ac794fc0dd970503a19252c3dae48c377..refs/pull/4794/head:/resources/js/components/dropzone.js diff --git a/resources/js/components/dropzone.js b/resources/js/components/dropzone.js index 56c576f29..1cac09b4a 100644 --- a/resources/js/components/dropzone.js +++ b/resources/js/components/dropzone.js @@ -12,17 +12,29 @@ export class Dropzone extends Component { this.dropTarget = this.$refs.dropTarget; this.selectButtons = this.$manyRefs.selectButton || []; + 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(); } + /** + * Public method to allow external disabling/enabling of this drag+drop dropzone. + * @param {Boolean} active + */ + toggleActive(active) { + this.isActive = active; + } + setupListeners() { onSelect(this.selectButtons, this.manualSelectHandler.bind(this)); this.setupDropTargetHandlers(); @@ -40,7 +52,7 @@ export class Dropzone extends Component { event.preventDefault(); depth += 1; - if (depth === 1) { + if (depth === 1 && this.isActive) { this.showOverlay(); } }); @@ -59,6 +71,11 @@ export class Dropzone extends Component { this.dropTarget.addEventListener('drop', event => { event.preventDefault(); reset(); + + if (!this.isActive) { + return; + } + const clipboard = new Clipboard(event.dataTransfer); const files = clipboard.getFiles(); for (const file of files) { @@ -68,7 +85,12 @@ export class Dropzone extends Component { } 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', () => { @@ -146,6 +168,9 @@ export class Dropzone extends Component { 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, { @@ -158,7 +183,7 @@ export class Dropzone extends Component { } 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 || content; + const message = data?.message || data?.error || content; upload.markError(message); } },