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

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