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

   1 const DropZone = require("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    let container = this.$el;
  14    let _this = this;
  15    this._dz = new DropZone(container, {
  16         addRemoveLinks: true,
  17         dictRemoveFile: trans('components.image_upload_remove'),
  18         url: function() {
  19             return _this.uploadUrl;
  20         },
  21         init: function () {
  22             let dz = this;
  23
  24             dz.on('sending', function (file, xhr, data) {
  25                 let token = window.document.querySelector('meta[name=token]').getAttribute('content');
  26                 data.append('_token', token);
  27                 let uploadedTo = typeof _this.uploadedTo === 'undefined' ? 0 : _this.uploadedTo;
  28                 data.append('uploaded_to', uploadedTo);
  29             });
  30
  31             dz.on('success', function (file, data) {
  32                 _this.$emit('success', {file, data});
  33                 $(file.previewElement).fadeOut(400, function () {
  34                     dz.removeFile(file);
  35                 });
  36             });
  37
  38             dz.on('error', function (file, errorMessage, xhr) {
  39                 _this.$emit('error', {file, errorMessage, xhr});
  40
  41                 function setMessage(message) {
  42                     $(file.previewElement).find('[data-dz-errormessage]').text(message);
  43                 }
  44
  45                 if (xhr && xhr.status === 413) setMessage(trans('errors.server_upload_limit'));
  46                 else if (errorMessage.file) setMessage(errorMessage.file);
  47
  48             });
  49         }
  50    });
  51 }
  52
  53 function data() {
  54     return {};
  55 }
  56
  57 const methods = {
  58     onClose: function () {
  59         this._dz.removeAllFiles(true);
  60     }
  61 };
  62
  63 module.exports = {
  64     template,
  65     props,
  66     mounted,
  67     data,
  68     methods
  69 };