-import DropZone from "dropzone";
-import { fadeOut } from "../../services/animations";
-
-const template = `
- <div class="dropzone-container text-center">
- <button type="button" class="dz-message">{{placeholder}}</button>
- </div>
-`;
-
-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
-};
projects / bookstack / commitdiff