view/js/dropzone-factory.js

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