Storing the image from an HTML input file form locally

Question

I was wondering if it is possible to store the image from

<input type="file" id="image">

locally. Would I have to store the image, or could I simply store the image location?

For context, it's from a form that takes name, address etc from input forms, creates an object, stores it in an array and displays the array.

Answer 1

Contrary to the other answers here, if you're using a modern browser you can get and store quite a bit about the contents of a file <input> using elm.files, FileReader and window.localStorage. You can even tell the browser to save it again (default download behaviour).

It should be noted that doing this does not mean you can set the .value on the <input> node.

Here is an example of what you can do, assuming a file has been chosen.

// From <input> node
var elm = document.getElementById('image'),
    img = elm.files[0],
    fileName = img.name, // not path
    fileSize = img.size; // bytes

// By Parsing File
var reader = new FileReader(),
    binary, base64;
reader.addEventListener('loadend', function () {
    binary = reader.result; // binary data (stored as string), unsafe for most actions
    base64 = btoa(binary); // base64 data, safer but takes up more memory
}, false);
reader.readAsBinaryString(img);

From here you can save in localStorage, create dataURIs etc. For example, Say from fileName we know the image is a .jpg, then you could display it by setting an <img>'s src to "data:image/jpeg;base64," + base64.

Note that any modification of this data will not have any effect on the original file chosen.