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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With