view/js/dropzone-factory.js

   1 var DzFactory = function () {
   2         this.createDropzone = function(dropSelector, textareaSelector, maxImagesize) {
   3                 return new Dropzone( dropSelector, {
   4                         paramName: 'userfile', // The name that will be used to transfer the file
   5                         maxFilesize: maxImagesize, // MB
   6                         url: '/media/photo/upload?response=url&album=',
   7                         accept: function(file, done) {
   8                                 done();
   9                         },
  10                         init: function() {
  11                                 this.on('success', function(file, serverResponse) {
  12                                         const targetTextarea = document.getElementById(textareaSelector);
  13                                         const bbcodeString = $(serverResponse).find('div#content').text();
  14                                         if (targetTextarea.setRangeText) {
  15                                                 //if setRangeText function is supported by current browser
  16                                                 targetTextarea.setRangeText(' ' + $.trim(bbcodeString) + ' ');
  17                                         } else {
  18                                                 targetTextarea.focus();
  19                                                 document.execCommand('insertText', false /*no UI*/, '\n' + $.trim(bbcodeString) + '\n');
  20                                         }
  21                                 });
  22                                 this.on('complete', function(file) {
  23                                         var dz = this;
  24                                         // Remove just uploaded file from dropzone, makes interface more clear.
  25                                         // Image can be seen in posting-preview
  26                                         // We need preview to get optical feedback about upload-progress.
  27                                         // you see success, when the bb-code link for image is inserted
  28                                         setTimeout(function(){
  29                                                 dz.removeFile(file);
  30                                         },5000);
  31                                 });
  32                         },
  33                         paste: function(event){
  34                                 const items = (event.clipboardData || event.originalEvent.clipboardData).items;
  35                                 items.forEach((item) => {
  36                                         if (item.kind === 'file') {
  37                                                 // adds the file to your dropzone instance
  38                                                 dz.addFile(item.getAsFile());
  39                                         }
  40                                 })
  41                         },
  42                 });
  43         };
  44
  45         this.copyPaste = function(event, dz) {
  46                 const items = (event.clipboardData || event.originalEvent.clipboardData).items;
  47                 items.forEach((item) => {
  48                         if (item.kind === 'file') {
  49                                 // adds the file to your dropzone instance
  50                                 dz.addFile(item.getAsFile());
  51                         }
  52                 })
  53         };
  54
  55         this.setupDropzone = function(dropSelector, textareaSelector, maxImagesize) {
  56                 var dropzone = this.createDropzone(dropSelector, textareaSelector, maxImagesize);
  57                 $(dropSelector).on('paste', function(event) {
  58                         dzFactory.copyPaste(event, dropzone);
  59                 })
  60         };
  61 }
  62