Storing the image from an HTML input file form loc

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

No way. But if you could that would raise serious security issues.

If you try to get value of your file input e.g.:

document.getElementById('image').value

the value would be "C:\fakepath\somefile.txt"

Answer 2

If you want to get the file name, or even display the image, you can do that using the File API (on browsers that support it). The path is not available for security reasons.

Answer 3

No. Since storing a file or accessing a file on the local OS would violate the permissions of the browser. So your scripts cannot access the content unless it has been uploaded to the server. Also different browsers handle the path of the file that has been selected in different ways. So you encounter a number of problems there.

That said, there are some ways to get around this that I will not discuss. Simply put, the image should be uploaded to the server in some fashion and then your scripts can reference the path or the image itself from the path that it was uploaded to.

Answer 4

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.