BookStack Code Mirror - bookstack/blob - resources/js/vues/components/dropzone.js

   1 import DropZone from "dropzone";
   2 import { fadeOut } from "../../services/animations";
   3
   4 const template = `
   5     <div class="dropzone-container text-center">
   6         <button type="button" class="dz-message">{{placeholder}}</button>
   7     </div>
   8 `;
   9
  10 const props = ['placeholder', 'uploadUrl', 'uploadedTo'];
  11
  12 function mounted() {
  13    const container = this.$el;
  14    const _this = this;
  15    this._dz = new DropZone(container, {
  16         addRemoveLinks: true,
  17         dictRemoveFile: trans('components.image_upload_remove'),
  18         timeout: Number(window.uploadTimeout) || 60000,
  19         maxFilesize: Number(window.uploadLimit) || 256,
  20         url: function() {
  21             return _this.uploadUrl;
  22         },
  23         init: function () {
  24             const dz = this;
  25
  26             dz.on('sending', function (file, xhr, data) {
  27                 const token = window.document.querySelector('meta[name=token]').getAttribute('content');
  28                 data.append('_token', token);
  29                 const uploadedTo = typeof _this.uploadedTo === 'undefined' ? 0 : _this.uploadedTo;
  30                 data.append('uploaded_to', uploadedTo);
  31
  32                 xhr.ontimeout = function (e) {
  33                     dz.emit('complete', file);
  34                     dz.emit('error', file, trans('errors.file_upload_timeout'));
  35                 }
  36             });
  37
  38             dz.on('success', function (file, data) {
  39                 _this.$emit('success', {file, data});
  40                 fadeOut(file.previewElement, 800, () => {
  41                     dz.removeFile(file);
  42                 });
  43             });
  44
  45             dz.on('error', function (file, errorMessage, xhr) {
  46                 _this.$emit('error', {file, errorMessage, xhr});
  47
  48                 function setMessage(message) {
  49                     const messsageEl = file.previewElement.querySelector('[data-dz-errormessage]');
  50                     messsageEl.textContent = message;
  51                 }
  52
  53                 if (xhr && xhr.status === 413) {
  54                     setMessage(trans('errors.server_upload_limit'))
  55                 } else if (errorMessage.file) {
  56                     setMessage(errorMessage.file);
  57                 }
  58
  59             });
  60         }
  61    });
  62 }
  63
  64 function data() {
  65     return {};
  66 }
  67
  68 const methods = {
  69     onClose: function () {
  70         this._dz.removeAllFiles(true);
  71     }
  72 };
  73
  74 export default {
  75     template,
  76     props,
  77     mounted,
  78     data,
  79     methods
  80 };