CODEWITHSUNDEEP
javascripthtmlfile-upload
lnickel
lnickel

Reputation: 351

Detect if file upload was from drag or regular input click

I'm currently trying create a drag and drop file uploader with the standard option to just use the regular input. I'm not sure what to be targeting to write if the user clicked the upload or dropped a file in.

My first thought was to check if the FileList is empty but both ways produce a FileList. Second thought was just write two functions one for the input and one for the drop but that seems like I would be repeating. Last thought was writing an if statement in the read_file function. However, I'm not sure what to target exactly.

Any ideas would be greatly appreciated!! thanks!!

https://jsfiddle.net/nick1572/b4xzt8oh/3/

   var uploader = document.querySelector('.uploader');
   var output = document.getElementById('output');
   var file = document.getElementById('file'); 

   file.addEventListener('change', function(event) {
     read_file(event);
   });

   function read_file(event) {
     file = event.target;
     var reader = new FileReader();
     reader.onload = function() {
       var data_url = reader.result;
       output.src = data_url;
     };
     // This will read when the image is dropped.
     //reader.readAsDataURL(event.dataTransfer.files[0]); 
       reader.readAsDataURL(file.files[0]); 

     /*

     Something like this

     if () {
       reader.readAsDataURL(file.files[0]);
     } else if() {
       reader.readAsDataURL(event.dataTransfer.files[0]);
     }
     */


   };

   uploader.addEventListener('dragover', function(e) {
       console.log('drag over');
       e.preventDefault();
   });

   uploader.addEventListener('dragenter', function(e) {
       console.log('drag enter');
       e.preventDefault();
   });

   uploader.addEventListener('dragleave', function() {
       console.log('drag leave');
   });


   uploader.addEventListener('drop', function(event) {
       console.log('drop');
       event.preventDefault();
       read_file(event);
   });

Upvotes: 0

Views: 363

Answers (1)

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20924

Check the type property of the event object to see which event has been used. 

function read_file(event) {

  file = event.target;
  var reader = new FileReader();

  reader.onload = function() {
    var data_url = reader.result;
    output.src = data_url;
  };

  if (event.type === 'change') {
    reader.readAsDataURL(file.files[0]);
  } else if(event.type === 'drop') {
    reader.readAsDataURL(event.dataTransfer.files[0]);
  }

};

Upvotes: 1

Related Questions