HTML5 APIs - HTML5 Advertising - page 130

// Image for loading
img.addEventListener("load", function () {
clearCanvas();
context.drawImage(img, 0, 0, 300, 250);
}, false);
// To enable drag and drop
canvas.addEventListener("dragover", function (evt) {
evt.preventDefault();
}, false);
canvas.addEventListener("drop", function (event) {
var files = event.dataTransfer.files;
if (files.length > 0) {
var file = files[0];
if (typeof FileReader !== "undefined") {
var reader = new FileReader();
reader.onload = function (event) {
console.log(event.type);
};
reader.onprogress = function (event) {
console.log(event.type);
var percentLoaded = Math.round((event.loaded / event.total) * 100);
progress.textContent = "Loader: " + percentLoaded + '%';
console.log(percentLoaded)
};
reader.onloadend = function (event) {
console.log(event.type);
if (!file.type.match('image.*')) {
alert("Not an image!!");
} else {
img.src = event.target.result;
}
beginCanvasDrawing();
};
reader.onerror = function (event) {
console.log(event.type);
};
reader.readAsDataURL(file);
}
}
event.stopPropagation();
event.preventDefault();
}, false);