One of my first larger projects so please bear with me. I have a script which will help me resize an image and turn it into base64. This is how it begins:

var createImage = function (src) {
    var deferred = $.Deferred();
    var img = new Image();

    img.onload = function() {
        deferred.resolve(img);
    };
    img.src = src;
    return deferred.promise();
};

And my question is to get the image source from the upload form to the script?

I've tried to stitch together (with help from other sources) a function with the Filereader API:

var createImageURL = function () {
    var fileinput = document.getElementById('fileinput');
    file = fileinput.files[0];
    var reader = new FileReader();
    reader.readAsArrayBuffer(file);

    reader.onload = function (event) {
      var blob = new Blob([event.target.result]); 
      window.URL = window.URL || window.webkitURL;

      var blobURL = window.URL.createObjectURL(blob);

    }
    return blobURL;
};

However this returns a GET error in the console.

One of my first larger projects so please bear with me. I have a script which will help me resize an image and turn it into base64. This is how it begins:

var createImage = function (src) {
    var deferred = $.Deferred();
    var img = new Image();

    img.onload = function() {
        deferred.resolve(img);
    };
    img.src = src;
    return deferred.promise();
};

And my question is to get the image source from the upload form to the script?

I've tried to stitch together (with help from other sources) a function with the Filereader API:

var createImageURL = function () {
    var fileinput = document.getElementById('fileinput');
    file = fileinput.files[0];
    var reader = new FileReader();
    reader.readAsArrayBuffer(file);

    reader.onload = function (event) {
      var blob = new Blob([event.target.result]); 
      window.URL = window.URL || window.webkitURL;

      var blobURL = window.URL.createObjectURL(blob);

    }
    return blobURL;
};

However this returns a GET error in the console.

• javascript
• html
• filereader

• readAsArrayBuffer is asynchrnous/non-blocking, var blobURL is in a different scope to your return, return blobURL will happen before file read finishes. – Paul S. Commented Aug 31, 2013 at 13:06

1 Answer 1

Rather than going via Blob, convert your <input>'s File to an ObjectURL directly, saving yourself a lot of trouble by keeping your code synchronous and requiring fewer lines of code.

function inputToURL(inputElement) {
    var file = inputElement.files[0];
    return window.URL.createObjectURL(file);
}

var url = inputToURL(document.getElementById('fileinput'));
createImage(url);

This works because a File is a Blob per spec (as pointed out by Ray Nicholus)

It's not advised (as File inherits from Blob already) and highly unusual to want to convert between them, but not impossible. I'm including this so you can see how to structure FileReader code if you need it in future, not as a solution to your problem. To convert <input type="file" />'s first file to Blob, you would do

function fileToBlob(inputElement, callback) {
    var fileReader = new FileReader();
    fileReader.onload = function () {
        callback(new Blob([this.result]));
    }
    fileReader.readAsArrayBuffer(inputElement.files[0]);
}

Where callback takes a Blob as it's first parameter. Remember that since the readAsArrayBuffer caused us to use a callback, we had to write this so it would work in an asynchronus environment.