Javascript – and going insane

Hi everyone!

I am working on a programming problem and it quite frankly is really acting weird.

Background: the problem is an HTML image file uploader using HTML5, CSS3 and Javascript (no JQuery – yet).  The routine is supposed to accept multiple files (drag-n-drop) and then upload both the original file as well as a resized version of the same file.  The routine is utilizing the Canvas object to resize the image, FileReader to read the files and XMLHttpRequest to send the files up to the server.

Problem number 1: I have a method called “sendfile(file)” that is called for every image dragged onto the HTML DIV.  I have a console.log statement at the beginning of the method to record the height/width of the image file.  About 50% of the time, the height/width are returning 0 and the other 50% of the time is returns correct information.  This is with the exact same file as input.

Problem number 2: sendfile(file) is not actually sending the original file but is sending a segment of the original file (dimensions of 300×150).  There is nowhere in the code where this 300×150 dimension is called out.

Problem number 3: sendfile(file) is also resizing a copy of the original file from above and this resulting file is coming out as invalid (not a valid JPEG file).

Here is the javascript portion of the source file that contains everything I am trying to do:

function readfiles(files) {
console.log(“readfiles called – number of files: ” + files.length);
var formData = new FormData();
pstat.innerHTML = “<p>Uploading files…</p>”;
for (var i = 0; i < files.length; i++) {
if (tests.formdata) {
//formData.append(‘file’+i, files[i]);
console.log(“Adding file: ” + files[i].name + ” | ” + files[i].size);

// now post a new XHR request
/* if (tests.formdata) {
console.log(“Upload started”);
var xhr = new XMLHttpRequest();‘POST’, ‘up1.php’);
xhr.onload = function() {
progress.value = progress.innerHTML = 100;
pstat.innerHTML = “Upload Completed”;

if (tests.progress) {
xhr.upload.onprogress = function (event) {
if (event.lengthComputable) {
var complete = (event.loaded / * 100 | 0);
progress.value = progress.innerHTML = complete;


Yeah, I know, the formatting is kinda ugly – you can thank WordPress for that.  Anyhow, if any of you can see anything out of place that should be different, I would appreciate your input.


A day in the life of an IT professional