Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save razvanioan/cae610b32e14d7001180795751888255 to your computer and use it in GitHub Desktop.
Save razvanioan/cae610b32e14d7001180795751888255 to your computer and use it in GitHub Desktop.
Reading Multiple Image Base64 data using Es6 Async/Await in a html:type:file input
// html
// <input type="file" onchange="imagesSelected" multiple accept=".gif,.jpg,.jpeg,.png" />
async function imagesSelected(event) {
let files = [...event.target.files];
let images = await Promise.all(files.map(f=>{return readAsDataURL(f)}));
//all images' base64encoded data will be available as array in images
}
function readAsDataURL(file) {
return new Promise((resolve, reject)=>{
let fileReader = new FileReader();
fileReader.onload = function(){
return resolve({data:fileReader.result, name:file.name, size: file.size, type: file.type});
}
fileReader.readAsDataURL(file);
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment