CODEWITHSUNDEEP
javascriptjqueryinputfile-upload
Swen
Swen

Reputation: 787

jQuery change event for <input type="file"> by dropping a file on the label doesn't work

I'm working on a drag & drop file uploader that can be triggered by clicking the label, or dropping a file on the label.

The input field has a jQuery on change event that triggers when a file is selected. But it only works when a file is selected through the explorer menu, but not on the drag and drop event. Why?

$(document).ready(function() {	
  $('label').on('drag dragstart dragend dragover dragenter dragleave drop', function(event) {
    event.preventDefault();
    event.stopPropagation();
  })
  .on('dragover dragenter', function() {
    $(this).addClass('is-dragover');
  })
  .on('dragleave dragend drop', function() {
    $(this).removeClass('is-dragover');
  })
  .on('drop', function(event) {			
    // Set file on drop
    $('input[type=file]').prop('files', event.originalEvent.dataTransfer.files);      
  });

  // Check if change event works
    $('input[type=file]').on('change', function(event) {    
    $('#result span').text(event.target.files[0].name);      
  });

});
input {
  display: block;
  margin-bottom: 10px;
}

label {
  padding: 20px;
  
  display: inline-block;
  
  border: 2px dashed grey;
}

label:hover {
 background: lightgray;
 cursor: pointer;
}

label.is-dragover {
  background: grey;
}

#result {
  margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="file" id="file-field" name="file-field">
<label for="file-field">Click to select (works)<br>Drop file (doesn't work)</label>

<div id="result">
File on change event: <span></span>
</div>

Upvotes: 1

Views: 3685

Answers (1)

Ele
Ele

Reputation: 33726

You can trigger the change event: $('input[type=file]').trigger('change');

$(document).ready(function() {	
   $('label').on('drag dragstart dragend dragover dragenter dragleave drop', function(event) {
			event.preventDefault();
			event.stopPropagation();
		})
		.on('dragover dragenter', function() {
			$(this).addClass('is-dragover');
		})
		.on('dragleave dragend drop', function() {
			$(this).removeClass('is-dragover');
		})
		.on('drop', function(event) {
			
      // No idea if this is the right way to do things
			$('input[type=file]').prop('files', event.originalEvent.dataTransfer.files);
           $('input[type=file]').trigger('change');
		});
    
    $('input[type=file]').on('change', function(event) {
    
      $('#result span').text(event.target.files[0].name);
      
    });
    
});
input {
  display: block;
  margin-bottom: 10px;
}

label {
  padding: 20px;
  
  display: inline-block;
  
  border: 2px dashed grey;
}

label:hover {
 background: lightgray;
 cursor: pointer;
}

label.is-dragover {
  background: grey;
}

#result {
  margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="file" id="file-field" name="file-field">
<label for="file-field">Click to select (works)<br>Drop file (doesn't work)</label>

<div id="result">
File on change event: <span></span>
</div>

Upvotes: 5

Related Questions