Problems to attach file in input with drag & drop

Question

I have this code to drag and drop images in a file type input.

With this code I get a preview of the image in the label. It works perfectly using the button, but it does not work if I drag and drop.

The problem is that when I drag and drop the file, if I get the preview but the file is not attached in the input and I can not upload the image to the server.

Any ideas to solve the problem?

I edit my question and I answer myself in case one of you serves:

this.$fileInput.files = e.dataTransfer.files;
this.$fileInput.dispatchEvent(new Event('change'));

(function() {
  function FileUploader(selector) {
    if (undefined !== selector) {
      this.init(selector);
    }
  }

  FileUploader.prototype.init = function(selector) {
    if (undefined !== this.$el) {
      this.unsuscribe();
    }

    this.$el = document.querySelector(selector);
    this.$fileInput = this.$el.querySelector('input');
    this.$img = this.$el.querySelector('img');

    this.suscribe();
  };

// comienza Drag - drop

  FileUploader.prototype.suscribe = function() {
    this.$fileInput.addEventListener('change', _handleInputChange.bind(this));
    this.$img.addEventListener('load', _handleImageLoaded.bind(this));
    this.$el.addEventListener('dragenter', _handleDragEnter.bind(this));
    this.$el.addEventListener('dragleave', _handleDragLeave.bind(this));
    this.$el.addEventListener('drop', _handleDrop.bind(this));
  };

  FileUploader.prototype.unsuscribe = function() {
    this.$fileInput.removeEventListener(
      'change',
      _handleInputChange.bind(this)
    );
    this.$img.removeEventListener('load', _handleImageLoaded.bind(this));
    this.$el.removeEventListener('dragenter', _handleDragEnter.bind(this));
    this.$el.removeEventListener('dragleave', _handleDragLeave.bind(this));
    this.$el.removeEventListener('drop', _handleDrop.bind(this));
  };

  function _handleDragEnter(e) {
    e.preventDefault();

    if (!this.$el.classList.contains('dragging')) {
      this.$el.classList.add('dragging');
    }
  }

  function _handleDragLeave(e) {
    e.preventDefault();

    if (this.$el.classList.contains('dragging')) {
      this.$el.classList.remove('dragging');
    }
  }

  function _handleDrop(e) {
    e.preventDefault();
    this.$el.classList.remove('dragging');

    this.$img.files = e.dataTransfer.files;
    _handleInputChange.call(this);
  }

  function _handleImageLoaded() {
    if (!this.$img.classList.contains('loaded')) {
      this.$img.classList.add('loaded');
    }
  }

  function _handleInputChange(e) {
    var file = (undefined !== e)
    ? e.target.files[0]
    : this.$img.files[0];

    var pattern = /image-*/;
    var reader = new FileReader();

    if (!file.type.match(pattern)) {
      alert('invalid format');
      return;
    }

    if (this.$el.classList.contains('loaded')) {
      this.$el.classList.remove('loaded');
    }

    reader.onload = _handleReaderLoaded.bind(this);
    reader.readAsDataURL(file);
  }

  function _handleReaderLoaded(e) {
    var reader = e.target;
    this.$img.src = reader.result;
    this.$el.classList.add('loaded');
  }

  window.FileUploader = FileUploader;
})();

fileuploader.css

/* File Uploader Styles  */
 
.uploader input {
    display: none; 
}
 
.uploader {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.02);
    display: flex;
    height: 300px;
    justify-content: center;
    outline: 3px dashed #ccc;
    outline-offset: 5px;
    position: relative;
    width: 300px; 
}
 
.uploader img,
.uploader .icon {
    pointer-events: none; 
}
 
.uploader, 
.uploader .icon {
    transition: all 100ms ease-in; 
}
 
.uploader .icon {
    color: rgba(0, 0, 0, 0.2);
    font-size: 5em;
}
 
.uploader.dragging {
    outline-color: orangered; 
}
 
.uploader.dragging .icon {
    color: orangered; 
}
 
.uploader.loaded .icon {
    color: rgba(255, 255, 255, 0.5); 
}
 
.uploader img {
    left: 50%;
    opacity: 0;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 50%;
    transition: all 300ms ease-in;
    transform: translate(-50%,-50%);
    z-index: -1; 
}
 
.uploader img.loaded {
    opacity: 1; 
}

<script src="https://www.institutoimago.net/js/FileUploader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group"> 
  <label for="inputfile" class="uploader" ondragover="return false">
   <span class="icon fa fa-picture-o"></span>
   <img src="" class="">
   <input type="file" id="inputfile" name="inputfile" accept="image/*">
  </label>     
 </div>
  
<script type="text/javascript">
      new FileUploader('.uploader');
</script>

Problems to attach file in input with drag & drop

0 Answers0