yaffs.net Git - yaffs-website/blob - web/modules/contrib/dropzonejs/js/dropzone.integration.js

   1 /**
   2  * @file
   3  * dropzone.integration.js
   4  *
   5  * Defines the behaviors needed for dropzonejs integration.
   6  */
   7
   8 (function ($, Drupal, drupalSettings) {
   9   'use strict';
  10
  11   Drupal.dropzonejsInstances = [];
  12
  13   /* global Dropzone */
  14   Drupal.behaviors.dropzonejsIntegraion = {
  15     attach: function (context) {
  16       Dropzone.autoDiscover = false;
  17
  18       // @todo Init functionality should support multiple drop zones on page.
  19       var selector = $('.dropzone-enable');
  20       selector.addClass('dropzone');
  21       var input = selector.siblings('input');
  22
  23       // Initiate dropzonejs.
  24       var config = {
  25         url: input.attr('data-upload-path'),
  26         addRemoveLinks: false
  27       };
  28       var instanceConfig = drupalSettings.dropzonejs.instances[selector.attr('id')];
  29
  30       // If DropzoneJS instance is already registered on Element. There is no
  31       // need to register it again.
  32       if (selector.once('register-dropzonejs').length !== selector.length) {
  33         return;
  34       }
  35
  36       // If instance exists for configuration, but it's detached from element
  37       // then destroy detached instance and create new instance.
  38       if (instanceConfig.instance !== void 0) {
  39         instanceConfig.instance.destroy();
  40       }
  41
  42       // Initialize DropzoneJS instance for element.
  43       var dropzoneInstance = new Dropzone('#' + selector.attr('id'), $.extend({}, instanceConfig, config));
  44
  45       // Other modules might need instances.
  46       drupalSettings['dropzonejs']['instances'][selector.attr('id')]['instance'] = dropzoneInstance;
  47
  48       dropzoneInstance.on('addedfile', function (file) {
  49         file._removeIcon = Dropzone.createElement("<div class='dropzonejs-remove-icon' title='Remove'></div>");
  50         file.previewElement.appendChild(file._removeIcon);
  51         file._removeIcon.addEventListener('click', function () {
  52           dropzoneInstance.removeFile(file);
  53         });
  54       });
  55
  56       // React on add file. Add only accepted files.
  57       dropzoneInstance.on('success', function (file, response) {
  58         var uploadedFilesElement = selector.siblings(':hidden');
  59         var currentValue = uploadedFilesElement.attr('value') || '';
  60
  61         // The file is transliterated on upload. The element has to reflect
  62         // the real filename.
  63         file.processedName = response.result;
  64
  65         uploadedFilesElement.attr('value', currentValue + response.result + ';');
  66       });
  67
  68       // React on file removing.
  69       dropzoneInstance.on('removedfile', function (file) {
  70         var uploadedFilesElement = selector.siblings(':hidden');
  71         var currentValue = uploadedFilesElement.attr('value');
  72
  73         // Remove the file from the element.
  74         if (currentValue.length) {
  75           var fileNames = currentValue.split(';');
  76           for (var i in fileNames) {
  77             if (fileNames[i] === file.processedName) {
  78               fileNames.splice(i, 1);
  79               break;
  80             }
  81           }
  82
  83           var newValue = fileNames.join(';');
  84           uploadedFilesElement.attr('value', newValue);
  85         }
  86       });
  87
  88       // React on maxfilesexceeded. Remove all rejected files.
  89       dropzoneInstance.on('maxfilesexceeded', function () {
  90         var rejectedFiles = dropzoneInstance.getRejectedFiles();
  91         for (var i = 0; i < rejectedFiles.length; i++) {
  92           dropzoneInstance.removeFile(rejectedFiles[i]);
  93         }
  94       });
  95     }
  96   };
  97
  98 }(jQuery, Drupal, drupalSettings));