I recently followed this tutorial http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/ and I can't get it to work. In IE it is complaining that Error: Unable to get property 'addEventListener' of undefined or null reference and I don't have any idea why. I tried this in chrome and get no error, however, the drag and drop does not work. Here is my html file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../Styles/dndimg.css"/>
<link rel="stylesheet" type="text/css" href="../Styles/jquery-ui-1.8.1.custom.css"/>
<script src="http://www.google.com/jsapi?key=ABQIAAAADYbHHQrNWPElNtE4hn2g1hQhn5tTlmnhbGVHENfXgw8ik0kvARSWpfuAdtdt1KqinQpUokxB7SpcsQ"
type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="../Scripts/dndimg.js"></script>
</head>
<body>
<div id="dropbox"><span id="droplabel">Drop file here...</span>
<div id="progressbar"></div>
</div>
<br/>
<img id="preview" src="" alt="[ preview will display here ]"/>
</body>
</html>
And the js file:
$(document).ready(function () {
var dropbox = document.getElementById("dropbox")
// init event handlers
$("#dropbox").get(0).addEventListener("dragenter", dragEnter, false)
$("#dropbox").get(0).addEventListener("dragexit", dragExit, false)
$("#dropbox").get(0).addEventListener("dragover", dragOver, false)
$("#dropbox").get(0).addEventListener("drop", dropAction, false);
// init the widgets
$("#progressbar").progressbar();
});
function dragEnter(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function dragExit(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function dragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function drop(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files;
var count = files.length;
// Only call the handler if 1 or more files was dropped.
if (count > 0)
handleFiles(files);
}
function handleFiles(files) {
var file = files[0];
document.getElementById("droplabel").innerHTML = "Processing " + file.name;
var reader = new FileReader();
// init the reader event handlers
reader.onprogress = handleReaderProgress;
reader.onload = handleReaderLoadEnd;
// begin the read operation
reader.readAsDataURL(file);
}
function handleReaderProgress(evt) {
if (evt.lengthComputable) {
var loaded = (evt.loaded / evt.total);
$("#progressbar").progressbar({ value: loaded * 100 });
}
}
function handleReaderLoadEnd(evt) {
$("#progressbar").progressbar({ value: 100 });
var img = document.getElementById("preview");
img.src = evt.target.result;
}
Its probably something simple I'm missing here, thanks in advance for any answers
<!DOCTYPE html>for html5<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">