HTML5 drag&drop ignore drop and opens file

Question

I am trying to open a text file via drag&drop and simple open file button. I managed to get my button working, but have some problems with the drag-drop. As i am droping the file on my dropdown area the file gets opened and is read by the browser not my js-code.

#fileInput {
	display: none;
    }

    #dropBox {
	margin: 15px;
	width: 300px;
	height: 300px;
	border: 5px dashed gray;
	border-radius: 8px;
	background: lightyellow;
	background-size: 100%;
	background-repeat: no-repeat;
	text-align: center;
    }

    #dropBox div {
	margin: 100px 70px;
	color: orange;
	font-size: 25px;
	font-family: Verdana, Arial, sans-serif;
    }

<!DOCTYPE html>
    <html>
    <head>

    <link rel="stylesheet" type="text/css" href="css/file.css" />

    <script>

    <!-- File processing-->
    function procesFiles(files) {
	
	var file = files[0];
	var reader = new FileReader();
	
	reader.onload = function(e) {
		var output = document.getElementById("fileOutput");
		output.textContent = e.target.result;
	};
	

	reader.readAsText(file);
    }
	

    <!-- File input-->
    function showFileInput() {
	var fileInput = document.getElementById("fileInput");
	fileInput.click();
    }

    <!-- Drop box -->
    var dropBox;

    window.onload = function() {
	dropBox = document.getElementById("dropBox");
	dropBox.ondragenter = ignoreDrag;
	dropBox.ondragover = ignoreDrag;
	dropBox.ondrop = drop;
    }

    function ignoreDrag(e) {
	e.stopPropagation();
	e.preventDefault();
    }

    function drop(e) {
	e.stopPropagation();
	e.preventDefault();
	
	var data = e.dataTransfer.files;
	var files = data.files;
	
	procesFiles(files);
	
    }
    </script>
    
    </head>
    <body>
  
     <div id="dropBox">
  	<div>Drop your file here...</div>
    </div>
  
    <input id="fileInput" type="file" onchange="procesFiles(this.files)"/>
  	<button onclick="showFileInput()">Get new file!</button>
  
    <div id="fileOutput" style="width:500px; height:300px;">
    </div>

  
    </body>
    </html>

My html:

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="css/file.css" />

<script>

<!-- File processing-->
function procesFiles(files) {

var file = files[0];
var reader = new FileReader();

reader.onload = function(e) {
    var output = document.getElementById("fileOutput");
    output.textContent = e.target.result;
};


reader.readAsText(file);
}


<!-- File input-->
function showFileInput() {
var fileInput = document.getElementById("fileInput");
fileInput.click();
}

<!-- Drop box -->
var dropBox;

window.onload = function() {
dropBox = document.getElementById("dropBox");
dropBox.ondragenter = ignoreDrag;
dropBox.ondragover = ignoreDrag;
dropBox.ondrop = drop;
}

function ignoreDrag(e) {
e.stopPropagation;
e.preventDefault;
}

function drop(e) {
e.stopPropagation;
e.preventDefault;

var data = e.dataTransfer.files;
var files = data.files;

procesFiles(files);

}
</script>

</head>
<body>

 <div id="dropBox">
<div>Drop your file here...</div>
</div>

<input id="fileInput" type="file" onchange="procesFiles(this.files)"/>
<button onclick="showFileInput()">Get new file!</button>

<div id="fileOutput" style="width:500px; height:300px;">
</div>


</body>
</html>

And also my css file:

#fileInput {
display: none;
}

#dropBox {
margin: 15px;
width: 300px;
height: 300px;
border: 5px dashed gray;
border-radius: 8px;
background: lightyellow;
background-size: 100%;
background-repeat: no-repeat;
text-align: center;
}

#dropBox div {
margin: 100px 70px;
color: orange;
font-size: 25px;
font-family: Verdana, Arial, sans-serif;
}

Do you have any idea, what could be wrong?

--Edit-- I have one more questin - how can block the from openig the droping file?

Marius · Accepted Answer · 2015-02-05 10:06:41Z

1

e.stopPropagation;   
e.preventDefault;

These are supposed to be functions:

e.stopPropagation();
e.preventDefault();

answered Feb 5, 2015 at 10:06

Marius

4,0065 gold badges42 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kamil.rak Over a year ago

Thanks a lot, I have not noticed this typo :)

Marius Over a year ago

No problem, happens to everyone all the time :)

Collectives™ on Stack Overflow

HTML5 drag&drop ignore drop and opens file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related