view/js/dropzone-factory.js

   1 Dropzone.autoDiscover = false;
   2 var DzFactory = function (max_imagesize) {
   3         this.createDropzone = function(dropSelector, textareaElementId) {
   4                 return new Dropzone(dropSelector, {
   5                         paramName: 'userfile', // The name that will be used to transfer the file
   6                         maxFilesize: max_imagesize, // MB
   7                         url: '/media/photo/upload?album=',
   8                         acceptedFiles: 'image/*',
   9                         clickable: true,
  10                         dictDefaultMessage: dzStrings.dictDefaultMessage,
  11                         dictFallbackMessage: dzStrings.dictFallbackMessage,
  12                         dictFallbackText: dzStrings.dictFallbackText,
  13                         dictFileTooBig: dzStrings.dictFileTooBig,
  14                         dictInvalidFileType: dzStrings.dictInvalidFileType,
  15                         dictResponseError: dzStrings.dictResponseError,
  16                         dictCancelUpload: dzStrings.dictCancelUpload,
  17                         dictUploadCanceled: dzStrings.dictUploadCanceled,
  18                         dictCancelUploadConfirmation: dzStrings.dictCancelUploadConfirmation,
  19                         dictRemoveFile: dzStrings.dictRemoveFile,
  20                         dictMaxFilesExceeded: dzStrings.dictMaxFilesExceeded,
  21                         accept: function(file, done) {
  22                                 done();
  23                         },
  24                         init: function() {
  25                                 this.on('success', function(file, serverResponse) {
  26                                         const targetTextarea = document.getElementById(textareaElementId);
  27                                         if (targetTextarea.setRangeText) {
  28                                                 //if setRangeText function is supported by current browser
  29                                                 targetTextarea.setRangeText(serverResponse);
  30                                         } else {
  31                                                 targetTextarea.focus();
  32                                                 document.execCommand('insertText', false /*no UI*/, serverResponse);
  33                                         }
  34                                 });
  35                                 this.on('complete', function(file) {
  36                                         const dz = this;
  37                                         // Remove just uploaded file from dropzone, makes interface more clear.
  38                                         // Image can be seen in posting-preview
  39                                         // We need preview to get optical feedback about upload-progress.
  40                                         // you see success, when the bb-code link for image is inserted
  41                                         setTimeout(function(){
  42                                                 dz.removeFile(file);
  43                                         },5000);
  44                                 });
  45                         },
  46                         paste: function(event){
  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         };
  57
  58         this.copyPaste = function(event, dz) {
  59                 const items = (event.clipboardData || event.originalEvent.clipboardData).items;
  60                 items.forEach((item) => {
  61                         if (item.kind === 'file') {
  62                                 // adds the file to your dropzone instance
  63                                 dz.addFile(item.getAsFile());
  64                         }
  65                 })
  66         };
  67
  68         this.setupDropzone = function(dropSelector, textareaElementId) {
  69                 const self = this;
  70                 var dropzone = this.createDropzone(dropSelector, textareaElementId);
  71                 $(dropSelector).on('paste', function(event) {
  72                         self.copyPaste(event, dropzone);
  73                 })
  74         };
  75 }
  76