card/merchant/assets/plugins/fileuploads/js/fileupload.js

/*!
 * =============================================================
 * dropify v0.2.2 - Override your input files with style.
 * https://github.com/JeremyFagis/dropify
 *
 * (c) 2017 - Jeremy FAGIS <jeremy@fagis.fr> (http://fagis.fr)
 * =============================================================
 */

;(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
      define(['jquery'], factory);
    } else if (typeof exports === 'object') {
      module.exports = factory(require('jquery'));
    } else {
      root.Dropify = factory(root.jQuery);
    }
  }(this, function($) {
  var pluginName = "dropify";
  
  /**
   * Dropify plugin
   *
   * @param {Object} element
   * @param {Array} options
   */
  function Dropify(element, options) {
      if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
          return;
      }
  
      var defaults = {
          defaultFile: '',
          maxFileSize: 0,
          minWidth: 0,
          maxWidth: 0,
          minHeight: 0,
          maxHeight: 0,
          showRemove: true,
          showLoader: true,
          showErrors: true,
          errorTimeout: 3000,
          errorsPosition: 'overlay',
          imgFileExtensions: ['png', 'jpg', 'jpeg', 'gif', 'bmp'],
          maxFileSizePreview: "5M",
          allowedFormats: ['portrait', 'square', 'landscape'],
          allowedFileExtensions: ['*'],
          messages: {
              'default': 'Drag and drop a file here or click',
              'replace': 'Drag and drop or click to replace',
              'remove':  'Remove',
              'error':   'Ooops, something wrong happended.'
          },
          error: {
              'fileSize': 'The file size is too big ({{ value }} max).',
              'minWidth': 'The image width is too small ({{ value }}}px min).',
              'maxWidth': 'The image width is too big ({{ value }}}px max).',
              'minHeight': 'The image height is too small ({{ value }}}px min).',
              'maxHeight': 'The image height is too big ({{ value }}px max).',
              'imageFormat': 'The image format is not allowed ({{ value }} only).',
              'fileExtension': 'The file is not allowed ({{ value }} only).'
          },
          tpl: {
              wrap:            '<div class="dropify-wrapper"></div>',
              loader:          '<div class="dropify-loader"></div>',
              message:         '<div class="dropify-message"><span class="file-icon" /> <p>{{ default }}</p></div>',
              preview:         '<div class="dropify-preview"><span class="dropify-render"></span><div class="dropify-infos"><div class="dropify-infos-inner"><p class="dropify-infos-message">{{ replace }}</p></div></div></div>',
              filename:        '<p class="dropify-filename"><span class="dropify-filename-inner"></span></p>',
              clearButton:     '<button type="button" class="dropify-clear">{{ remove }}</button>',
              errorLine:       '<p class="dropify-error">{{ error }}</p>',
              errorsContainer: '<div class="dropify-errors-container"><ul></ul></div>'
          }
      };
  
      this.element            = element;
      this.input              = $(this.element);
      this.wrapper            = null;
      this.preview            = null;
      this.filenameWrapper    = null;
      this.settings           = $.extend(true, defaults, options, this.input.data());
      this.errorsEvent        = $.Event('dropify.errors');
      this.isDisabled         = false;
      this.isInit             = false;
      this.file               = {
          object: null,
          name: null,
          size: null,
          width: null,
          height: null,
          type: null
      };
  
      if (!Array.isArray(this.settings.allowedFormats)) {
          this.settings.allowedFormats = this.settings.allowedFormats.split(' ');
      }
  
      if (!Array.isArray(this.settings.allowedFileExtensions)) {
          this.settings.allowedFileExtensions = this.settings.allowedFileExtensions.split(' ');
      }
  
      this.onChange     = this.onChange.bind(this);
      this.clearElement = this.clearElement.bind(this);
      this.onFileReady  = this.onFileReady.bind(this);
  
      this.translateMessages();
      this.createElements();
      this.setContainerSize();
  
      this.errorsEvent.errors = [];
  
      this.input.on('change', this.onChange);
  }
  
  /**
   * On change event
   */
  Dropify.prototype.onChange = function()
  {
      this.resetPreview();
      this.readFile(this.element);
  };
  
  /**
   * Create dom elements
   */
  Dropify.prototype.createElements = function()
  {
      this.isInit = true;
      this.input.wrap($(this.settings.tpl.wrap));
      this.wrapper = this.input.parent();
  
      var messageWrapper = $(this.settings.tpl.message).insertBefore(this.input);
      $(this.settings.tpl.errorLine).appendTo(messageWrapper);
  
      if (this.isTouchDevice() === true) {
          this.wrapper.addClass('touch-fallback');
      }
  
      if (this.input.attr('disabled')) {
          this.isDisabled = true;
          this.wrapper.addClass('disabled');
      }
  
      if (this.settings.showLoader === true) {
          this.loader = $(this.settings.tpl.loader);
          this.loader.insertBefore(this.input);
      }
  
      this.preview = $(this.settings.tpl.preview);
      this.preview.insertAfter(this.input);
  
      if (this.isDisabled === false && this.settings.showRemove === true) {
          this.clearButton = $(this.settings.tpl.clearButton);
          this.clearButton.insertAfter(this.input);
          this.clearButton.on('click', this.clearElement);
      }
  
      this.filenameWrapper = $(this.settings.tpl.filename);
      this.filenameWrapper.prependTo(this.preview.find('.dropify-infos-inner'));
  
      if (this.settings.showErrors === true) {
          this.errorsContainer = $(this.settings.tpl.errorsContainer);
  
          if (this.settings.errorsPosition === 'outside') {
              this.errorsContainer.insertAfter(this.wrapper);
          } else {
              this.errorsContainer.insertBefore(this.input);
          }
      }
  
      var defaultFile = this.settings.defaultFile || '';
  
      if (defaultFile.trim() !== '') {
          this.file.name = this.cleanFilename(defaultFile);
          this.setPreview(this.isImage(), defaultFile);
      }
  };
  
  /**
   * Read the file using FileReader
   *
   * @param  {Object} input
   */
  Dropify.prototype.readFile = function(input)
  {
      if (input.files && input.files[0]) {
          var reader         = new FileReader();
          var image          = new Image();
          var file           = input.files[0];
          var srcBase64      = null;
          var _this          = this;
          var eventFileReady = $.Event("dropify.fileReady");
  
          this.clearErrors();
          this.showLoader();
          this.setFileInformations(file);
          this.errorsEvent.errors = [];
          this.checkFileSize();
          this.isFileExtensionAllowed();
  
          if (this.isImage() && this.file.size < this.sizeToByte(this.settings.maxFileSizePreview)) {
              this.input.on('dropify.fileReady', this.onFileReady);
              reader.readAsDataURL(file);
              reader.onload = function(_file) {
                  srcBase64 = _file.target.result;
                  image.src = _file.target.result;
                  image.onload = function() {
                      _this.setFileDimensions(this.width, this.height);
                      _this.validateImage();
                      _this.input.trigger(eventFileReady, [true, srcBase64]);
                  };
  
              }.bind(this);
          } else {
              this.onFileReady(false);
          }
      }
  };
  
  /**
   * On file ready to show
   *
   * @param  {Event} event
   * @param  {Bool} previewable
   * @param  {String} src
   */
  Dropify.prototype.onFileReady = function(event, previewable, src)
  {
      this.input.off('dropify.fileReady', this.onFileReady);
  
      if (this.errorsEvent.errors.length === 0) {
          this.setPreview(previewable, src);
      } else {
          this.input.trigger(this.errorsEvent, [this]);
          for (var i = this.errorsEvent.errors.length - 1; i >= 0; i--) {
              var errorNamespace = this.errorsEvent.errors[i].namespace;
              var errorKey = errorNamespace.split('.').pop();
              this.showError(errorKey);
          }
  
          if (typeof this.errorsContainer !== "undefined") {
              this.errorsContainer.addClass('visible');
  
              var errorsContainer = this.errorsContainer;
              setTimeout(function(){ errorsContainer.removeClass('visible'); }, this.settings.errorTimeout);
          }
  
          this.wrapper.addClass('has-error');
          this.resetPreview();
          this.clearElement();
      }
  };
  
  /**
   * Set file informations
   *
   * @param {File} file
   */
  Dropify.prototype.setFileInformations = function(file)
  {
      this.file.object = file;
      this.file.name   = file.name;
      this.file.size   = file.size;
      this.file.type   = file.type;
      this.file.width  = null;
      this.file.height = null;
  };
  
  /**
   * Set file dimensions
   *
   * @param {Int} width
   * @param {Int} height
   */
  Dropify.prototype.setFileDimensions = function(width, height)
  {
      this.file.width  = width;
      this.file.height = height;
  };
  
  /**
   * Set the preview and animate it
   *
   * @param {String} src
   */
  Dropify.prototype.setPreview = function(previewable, src)
  {
      this.wrapper.removeClass('has-error').addClass('has-preview');
      this.filenameWrapper.children('.dropify-filename-inner').html(this.file.name);
      var render = this.preview.children('.dropify-render');
  
      this.hideLoader();
  
      if (previewable === true) {
          var imgTag = $('<img />').attr('src', src);
  
          if (this.settings.height) {
              imgTag.css("max-height", this.settings.height);
          }
  
          imgTag.appendTo(render);
      } else {
          $('<i />').attr('class', 'dropify-font-file').appendTo(render);
          $('<span class="dropify-extension" />').html(this.getFileType()).appendTo(render);
      }
      this.preview.fadeIn();
  };
  
  /**
   * Reset the preview
   */
  Dropify.prototype.resetPreview = function()
  {
      this.wrapper.removeClass('has-preview');
      var render = this.preview.children('.dropify-render');
      render.find('.dropify-extension').remove();
      render.find('i').remove();
      render.find('img').remove();
      this.preview.hide();
      this.hideLoader();
  };
  
  /**
   * Clean the src and get the filename
   *
   * @param  {String} src
   *
   * @return {String} filename
   */
  Dropify.prototype.cleanFilename = function(src)
  {
      var filename = src.split('\\').pop();
      if (filename == src) {
          filename = src.split('/').pop();
      }
  
      return src !== "" ? filename : '';
  };
  
  /**
   * Clear the element, events are available
   */
  Dropify.prototype.clearElement = function()
  {
      if (this.errorsEvent.errors.length === 0) {
          var eventBefore = $.Event("dropify.beforeClear");
          this.input.trigger(eventBefore, [this]);
  
          if (eventBefore.result !== false) {
              this.resetFile();
              this.input.val('');
              this.resetPreview();
  
              this.input.trigger($.Event("dropify.afterClear"), [this]);
          }
      } else {
          this.resetFile();
          this.input.val('');
          this.resetPreview();
      }
  };
  
  /**
   * Reset file informations
   */
  Dropify.prototype.resetFile = function()
  {
      this.file.object = null;
      this.file.name   = null;
      this.file.size   = null;
      this.file.type   = null;
      this.file.width  = null;
      this.file.height = null;
  };
  
  /**
   * Set the container height
   */
  Dropify.prototype.setContainerSize = function()
  {
      if (this.settings.height) {
          this.wrapper.height(this.settings.height);
      }
  };
  
  /**
   * Test if it's touch screen
   *
   * @return {Boolean}
   */
  Dropify.prototype.isTouchDevice = function()
  {
      return (('ontouchstart' in window) ||
              (navigator.MaxTouchPoints > 0) ||
              (navigator.msMaxTouchPoints > 0));
  };
  
  /**
   * Get the file type.
   *
   * @return {String}
   */
  Dropify.prototype.getFileType = function()
  {
      return this.file.name.split('.').pop().toLowerCase();
  };
  
  /**
   * Test if the file is an image
   *
   * @return {Boolean}
   */
  Dropify.prototype.isImage = function()
  {
      if (this.settings.imgFileExtensions.indexOf(this.getFileType()) != "-1") {
          return true;
      }
  
      return false;
  };
  
  /**
  * Test if the file extension is allowed
  *
  * @return {Boolean}
  */
  Dropify.prototype.isFileExtensionAllowed = function () {
  
      if (this.settings.allowedFileExtensions.indexOf('*') != "-1" || 
          this.settings.allowedFileExtensions.indexOf(this.getFileType()) != "-1") {
          return true;
      }
      this.pushError("fileExtension");
  
      return false;
  };
  
  /**
   * Translate messages if needed.
   */
  Dropify.prototype.translateMessages = function()
  {
      for (var name in this.settings.tpl) {
          for (var key in this.settings.messages) {
              this.settings.tpl[name] = this.settings.tpl[name].replace('{{ ' + key + ' }}', this.settings.messages[key]);
          }
      }
  };
  
  /**
   * Check the limit filesize.
   */
  Dropify.prototype.checkFileSize = function()
  {
      if (this.sizeToByte(this.settings.maxFileSize) !== 0 && this.file.size > this.sizeToByte(this.settings.maxFileSize)) {
          this.pushError("fileSize");
      }
  };
  
  /**
   * Convert filesize to byte.
   *
   * @return {Int} value
   */
  Dropify.prototype.sizeToByte = function(size)
  {
      var value = 0;
  
      if (size !== 0) {
          var unit  = size.slice(-1).toUpperCase(),
              kb    = 1024,
              mb    = kb * 1024,
              gb    = mb * 1024;
  
          if (unit === 'K') {
              value = parseFloat(size) * kb;
          } else if (unit === 'M') {
              value = parseFloat(size) * mb;
          } else if (unit === 'G') {
              value = parseFloat(size) * gb;
          }
      }
  
      return value;
  };
  
  /**
   * Validate image dimensions and format
   */
  Dropify.prototype.validateImage = function()
  {
      if (this.settings.minWidth !== 0 && this.settings.minWidth >= this.file.width) {
          this.pushError("minWidth");
      }
  
      if (this.settings.maxWidth !== 0 && this.settings.maxWidth <= this.file.width) {
          this.pushError("maxWidth");
      }
  
      if (this.settings.minHeight !== 0 && this.settings.minHeight >= this.file.height) {
          this.pushError("minHeight");
      }
  
      if (this.settings.maxHeight !== 0 && this.settings.maxHeight <= this.file.height) {
          this.pushError("maxHeight");
      }
  
      if (this.settings.allowedFormats.indexOf(this.getImageFormat()) == "-1") {
          this.pushError("imageFormat");
      }
  };
  
  /**
   * Get image format.
   *
   * @return {String}
   */
  Dropify.prototype.getImageFormat = function()
  {
      if (this.file.width == this.file.height) {
          return "square";
      }
  
      if (this.file.width < this.file.height) {
          return "portrait";
      }
  
      if (this.file.width > this.file.height) {
          return "landscape";
      }
  };
  
  /**
  * Push error
  *
  * @param {String} errorKey
  */
  Dropify.prototype.pushError = function(errorKey) {
      var e = $.Event("dropify.error." + errorKey);
      this.errorsEvent.errors.push(e);
      this.input.trigger(e, [this]);
  };
  
  /**
   * Clear errors
   */
  Dropify.prototype.clearErrors = function()
  {
      if (typeof this.errorsContainer !== "undefined") {
          this.errorsContainer.children('ul').html('');
      }
  };
  
  /**
   * Show error in DOM
   *
   * @param  {String} errorKey
   */
  Dropify.prototype.showError = function(errorKey)
  {
      if (typeof this.errorsContainer !== "undefined") {
          this.errorsContainer.children('ul').append('<li>' + this.getError(errorKey) + '</li>');
      }
  };
  
  /**
   * Get error message
   *
   * @return  {String} message
   */
  Dropify.prototype.getError = function(errorKey)
  {
      var error = this.settings.error[errorKey],
          value = '';
  
      if (errorKey === 'fileSize') {
          value = this.settings.maxFileSize;
      } else if (errorKey === 'minWidth') {
          value = this.settings.minWidth;
      } else if (errorKey === 'maxWidth') {
          value = this.settings.maxWidth;
      } else if (errorKey === 'minHeight') {
          value = this.settings.minHeight;
      } else if (errorKey === 'maxHeight') {
          value = this.settings.maxHeight;
      } else if (errorKey === 'imageFormat') {
          value = this.settings.allowedFormats.join(', ');
      } else if (errorKey === 'fileExtension') {
          value = this.settings.allowedFileExtensions.join(', ');
      }
  
      if (value !== '') {
          return error.replace('{{ value }}', value);
      }
  
      return error;
  };
  
  /**
   * Show the loader
   */
  Dropify.prototype.showLoader = function()
  {
      if (typeof this.loader !== "undefined") {
          this.loader.show();
      }
  };
  
  /**
   * Hide the loader
   */
  Dropify.prototype.hideLoader = function()
  {
      if (typeof this.loader !== "undefined") {
          this.loader.hide();
      }
  };
  
  /**
   * Destroy dropify
   */
  Dropify.prototype.destroy = function()
  {
      this.input.siblings().remove();
      this.input.unwrap();
      this.isInit = false;
  };
  
  /**
   * Init dropify
   */
  Dropify.prototype.init = function()
  {
      this.createElements();
  };
  
  /**
   * Test if element is init
   */
  Dropify.prototype.isDropified = function()
  {
      return this.isInit;
  };
  
  $.fn[pluginName] = function(options) {
      this.each(function() {
          if (!$.data(this, pluginName)) {
              $.data(this, pluginName, new Dropify(this, options));
          }
      });
  
      return this;
  };
  
  
  return Dropify;
  }));