Menu
on IE 10, everytime I drag the file to the upload filed, it still opening the file. how to prevent this? I'm confused. Please help. Is the cause due to the drag and drop is "in the file upload field" instead of creating another div tag drop area? Is there anyway to make it work on the upload field?
<div id="dnd-upload-box">
<img id="image" src="https://upload.dev/img/elements/drag_drop.jpg" width="100%" height="100%"/>
<?php
echo $this->Form->input('files', array(
'id' => 'file-input-0',
'class' => 'file-input',
'type' => 'file',
'multiple' => 'multiple',
'name' => 'fileselect[]',
'onChange' => 'getFiles(this);'
));
?>
</div>
<script type="text/javascript">
// call initialization file
$(document).ready(function() {
Init();
});
// getElementById
function $id(id) {
return document.getElementById(id);
}
// initialize
function Init() {
var filed = $id("file-input-0");
filed.addEventListener("dragenter", FileDragHover, false);
filed.addEventListener("dragover", FileDragHover, false);
filed.addEventListener("dragleave", FileDragHover, false);
//filed.addEventListener("drop", FileSelectHandler, false);
}
function FileSelectHandler(e) {
// cancel event and hover styling
console.log("selecthandler");
FileDragHover(e);
getFiles(e);
}
// file drag hover
function FileDragHover(e) {
console.log("draghover");
e.stopPropagation();
e.preventDefault();
e.target.className = (e.type == "dragover" ? "hover" : "");
}
</script>
398
The following HTML file is a complete, minimal working example for IE. (Sorry for the missing <html>/<body>/etc. boilerplate, but you don't need that for testing.)
As mentioned MSDN documentation, you have to prevent the default operations on the dragover event. Only then the drop event will fire, containing the file in the event parameter.
<input id="testfilefield" type="file" style="background-color: #777; width:300px; height: 100px;">
<script>
window.addEventListener('load', function() {
var el = document.getElementById('testfilefield');
// Block the "dragover" event
el.addEventListener('dragover', function(e) {
e.stopPropagation();
e.preventDefault();
}, false);
// Handle the "drop" event
el.addEventListener('drop', function(e) {
var firstFile = e.dataTransfer.files[0];
console.log(firstFile);
alert('Drop!');
}, false);
}, false);
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
