Skip to content

Instantly share code, notes, and snippets.

@resistancecanyon
Last active April 15, 2024 04:07
Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save resistancecanyon/e1dd2d43519810cf75150a8caf4c5fec to your computer and use it in GitHub Desktop.
Save resistancecanyon/e1dd2d43519810cf75150a8caf4c5fec 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);
})
}
@bilal42011
Copy link

Well written!

@Siddharth77
Copy link

Awesome! and well written to handle async request.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment