import DropZone from "dropzone"; import { fadeOut } from "../../services/animations"; const template = `
{{placeholder}}
`; const props = ['placeholder', 'uploadUrl', 'uploadedTo']; function mounted() { const container = this.$el; const _this = this; this._dz = new DropZone(container, { addRemoveLinks: true, dictRemoveFile: trans('components.image_upload_remove'), timeout: Number(window.uploadTimeout) || 60000, maxFilesize: Number(window.uploadLimit) || 256, url: function() { return _this.uploadUrl; }, init: function () { const dz = this; dz.on('sending', function (file, xhr, data) { const token = window.document.querySelector('meta[name=token]').getAttribute('content'); data.append('_token', token); const uploadedTo = typeof _this.uploadedTo === 'undefined' ? 0 : _this.uploadedTo; data.append('uploaded_to', uploadedTo); xhr.ontimeout = function (e) { dz.emit('complete', file); dz.emit('error', file, trans('errors.file_upload_timeout')); } }); dz.on('success', function (file, data) { _this.$emit('success', {file, data}); fadeOut(file.previewElement, 800, () => { dz.removeFile(file); }); }); dz.on('error', function (file, errorMessage, xhr) { _this.$emit('error', {file, errorMessage, xhr}); function setMessage(message) { const messsageEl = file.previewElement.querySelector('[data-dz-errormessage]'); messsageEl.textContent = message; } if (xhr && xhr.status === 413) { setMessage(trans('errors.server_upload_limit')) } else if (errorMessage.file) { setMessage(errorMessage.file); } }); } }); } function data() { return {}; } const methods = { onClose: function () { this._dz.removeAllFiles(true); } }; export default { template, props, mounted, data, methods };