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