2018-11-09 16:17:35 -05:00
|
|
|
import DropZone from "dropzone";
|
2019-07-06 10:08:26 -04:00
|
|
|
import { fadeOut } from "../../services/animations";
|
2017-08-09 16:33:00 -04:00
|
|
|
|
|
|
|
const template = `
|
2019-08-26 07:47:04 -04:00
|
|
|
<div class="dropzone-container text-center">
|
|
|
|
<button type="button" class="dz-message">{{placeholder}}</button>
|
2017-08-09 16:33:00 -04:00
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
|
|
|
|
const props = ['placeholder', 'uploadUrl', 'uploadedTo'];
|
|
|
|
|
|
|
|
function mounted() {
|
2018-12-22 10:45:13 -05:00
|
|
|
const container = this.$el;
|
|
|
|
const _this = this;
|
2018-03-18 14:08:37 -04:00
|
|
|
this._dz = new DropZone(container, {
|
2018-11-17 13:52:08 -05:00
|
|
|
addRemoveLinks: true,
|
|
|
|
dictRemoveFile: trans('components.image_upload_remove'),
|
2018-12-22 10:45:13 -05:00
|
|
|
timeout: Number(window.uploadTimeout) || 60000,
|
2019-03-08 16:06:37 -05:00
|
|
|
maxFilesize: Number(window.uploadLimit) || 256,
|
2017-08-09 16:33:00 -04:00
|
|
|
url: function() {
|
|
|
|
return _this.uploadUrl;
|
|
|
|
},
|
|
|
|
init: function () {
|
2018-12-22 10:45:13 -05:00
|
|
|
const dz = this;
|
2017-08-09 16:33:00 -04:00
|
|
|
|
|
|
|
dz.on('sending', function (file, xhr, data) {
|
2018-12-22 10:45:13 -05:00
|
|
|
const token = window.document.querySelector('meta[name=token]').getAttribute('content');
|
2017-08-09 16:33:00 -04:00
|
|
|
data.append('_token', token);
|
2018-12-22 10:45:13 -05:00
|
|
|
const uploadedTo = typeof _this.uploadedTo === 'undefined' ? 0 : _this.uploadedTo;
|
2017-08-09 16:33:00 -04:00
|
|
|
data.append('uploaded_to', uploadedTo);
|
2018-11-17 13:52:08 -05:00
|
|
|
|
|
|
|
xhr.ontimeout = function (e) {
|
2018-12-22 10:45:13 -05:00
|
|
|
dz.emit('complete', file);
|
|
|
|
dz.emit('error', file, trans('errors.file_upload_timeout'));
|
2018-11-17 13:52:08 -05:00
|
|
|
}
|
2017-08-09 16:33:00 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
dz.on('success', function (file, data) {
|
|
|
|
_this.$emit('success', {file, data});
|
2019-07-06 10:08:26 -04:00
|
|
|
fadeOut(file.previewElement, 800, () => {
|
2017-08-09 16:33:00 -04:00
|
|
|
dz.removeFile(file);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
dz.on('error', function (file, errorMessage, xhr) {
|
|
|
|
_this.$emit('error', {file, errorMessage, xhr});
|
2018-03-24 10:54:50 -04:00
|
|
|
|
2017-08-09 16:33:00 -04:00
|
|
|
function setMessage(message) {
|
2019-07-06 10:08:26 -04:00
|
|
|
const messsageEl = file.previewElement.querySelector('[data-dz-errormessage]');
|
|
|
|
messsageEl.textContent = message;
|
2017-08-09 16:33:00 -04:00
|
|
|
}
|
|
|
|
|
2018-12-22 10:45:13 -05:00
|
|
|
if (xhr && xhr.status === 413) {
|
|
|
|
setMessage(trans('errors.server_upload_limit'))
|
|
|
|
} else if (errorMessage.file) {
|
|
|
|
setMessage(errorMessage.file);
|
|
|
|
}
|
2018-03-24 10:54:50 -04:00
|
|
|
|
2017-08-09 16:33:00 -04:00
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function data() {
|
2018-03-18 14:08:37 -04:00
|
|
|
return {};
|
2017-08-09 16:33:00 -04:00
|
|
|
}
|
|
|
|
|
2018-03-18 14:08:37 -04:00
|
|
|
const methods = {
|
|
|
|
onClose: function () {
|
|
|
|
this._dz.removeAllFiles(true);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2018-11-09 16:17:35 -05:00
|
|
|
export default {
|
2017-08-09 16:33:00 -04:00
|
|
|
template,
|
|
|
|
props,
|
|
|
|
mounted,
|
|
|
|
data,
|
2018-03-18 14:08:37 -04:00
|
|
|
methods
|
2018-03-18 09:14:11 -04:00
|
|
|
};
|