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