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.

Do you mean a standard file upload? Or by "locally" do you mean on the client? Isn't the chosen image already there? — jtheman, Dec 01 '12 at 01:12
The image is on the client and if possible I could just link to the file, however for the sake of the form is there a simpler way than having a text box the user would type the full image path into? Thats why I was going for a file upload input, or trying to anyway. — Shuma, Dec 01 '12 at 01:18
Have you looked at this: http://stackoverflow.com/questions/5903323/cant-get-value-of-input-type-file Browsers treat the value differently, so my guess is your strategy won't work... — jtheman, Dec 01 '12 at 01:19

score 11 · Answer 1 · edited May 23 '17 at 11:46

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.

score 2 · Answer 2 · answered Dec 01 '12 at 01:25

2

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"

answered Dec 01 '12 at 01:25

ntadic

21
1

score 1 · Accepted Answer · answered Dec 01 '12 at 01:23

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.

score 0 · Answer 4 · answered Dec 01 '12 at 02:09

0

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.

answered Dec 01 '12 at 02:09

bfavaretto

69,385
15
102
145

Storing the image from an HTML input file form locally

4 Answers4

Linked