How I can get base64 string of image from FileReader - javascript

I am using below 2 methods but I am unable to get back base64 string from it.
function convertFileToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
});
}
function previewProductImages(files){
let preveiwImagesTemplate = [];
for(let i=0; i<files.length; i++ ){
const uploadedImageBase64 = convertFileToBase64(files[i]);
/// WANT BASE64 HERE So I can pass that to another method
}
}
Replacement or better approches are welcome.

You should first assign a handler to the onload property - and then call the readAsDataURL() method, not the opposite.
function readFile(file)
{
return new Promise((resolve) =>
{
if (file.size)
{
const reader = new FileReader();
reader.onload = (e) =>
{
resolve({
binary: file,
b64: e.target.result,
});
};
reader.readAsDataURL(file);
}
});
}

Related

Unexpected code execution using async/await

I am attempting to convert an array of localhost URLs to base64 strings.
let uploadedBase64Images = [];
for (let i = 0; i < urls.length; i++) {
let img = await fetch(urls[i]);
let imgBlob = await img.blob();
let reader = new FileReader();
let base64;
reader.readAsDataURL(imgBlob);
reader.onloadend = () => {
console.log(reader.result)
base64 = reader.result;
console.log(base64)
uploadedBase64Images.push(base64)
};
}
console.log(uploadedBase64Images)
One thing I noticed is that the console.log(uploadedBase64Images) always prints before console.log(base64). This code block is wrapped in an async function as well. I've tried many other ways but at the end of the day, uploadedBase64Images is always empty.
When I move uploadedBase64Images.push(base64) outside of reader.onloadend, i.e.:
reader.onloadend = () => {
console.log(reader.result)
base64 = reader.result;
console.log(base64)
};
uploadedBase64Images.push(base64)
uploadedBase64Images is [undefined], which leads me to believe that the Promise isn't being resolved?
I appreciate any help on this, thanks in advance!
From what i see, the problem is the reader.onloadend, it is in its own zone which is not following the async behaviour.
So, by wrapping the reader function to Promise to wait for its response before doing anything may solve your problem
// wrapping reader in Promise
const convertImageToBase64 = async(imgBlob) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(imgBlob);
reader.onloadend = () => {
resolve(reader.result);
};
reader.onerror = reject
})
}
const uploadedBase64Images = [];
for (let i = 0; i < urls.length; i++) {
const img = await fetch(urls[i]);
const imgBlob = await img.blob();
const base64 = await convertImageToBase64(imgBlob)
uploadedBase64Images.push(base64)
}
console.log(uploadedBase64Images)

Map function returns an empty array

I was trying to convert a blob to base64, and I found my way around, but while waiting the result from the function displayBase64String the map function in submitOffre returns an empty string even though console.log prints some data.
I'll appreciate any solution
here is my code.
submitOffre = (saleData) => {
debugger ;
var result = base64Service.displayBase64String(saleData);
console.log("========", result);
const rs = result.map(value => value.file); // Doesn't work.
console.log(rs); // rs is empty
}
class Base64Service {
blobToBase64 = (blob, callback) => {
var reader = new FileReader();
var data = '';
reader.onload = function () {
var dataUrl = reader.result;
var base64 = dataUrl.split(',')[1];
callback(base64);
};
reader.readAsDataURL(blob);
}
displayBase64String(formProps) {
const result = [];
const outbut = Object.entries(formProps.imageToUpload).map(([key, value]) => {
this.blobToBase64(value, (data) => {
result.push({ "file": `data:${value.type};base64,${data}` })
})
});
return result;
};
}
export default new Base64Service();
Something like that might help:
I've modified your code a bit, just to show you the basic pattern.
If you're doing more than 1 image at a time, you will need to use Promise.all, to keep track of more than 1 promise at once.
submitOffre = async (saleData) => { // SEE THE async KEYWORD
debugger ;
var result = await blobToBase64(saleData); // SEE THE await KEYWORD
console.log("========", result);
const rs = result.map(value => value.file); // Doesn't work.
console.log(rs); // rs is empty
}
I'll treat as if you were converting only 1 image.
blobToBase64 = (blob, callback) => new Promise((resolve,reject) => {
var reader = new FileReader();
var data = '';
reader.onload = function () {
var dataUrl = reader.result;
var base64 = dataUrl.split(',')[1];
callback(base64);
resolve(base64); // NOTE THE resolve() FUNCTION TO RETURN SOME VALUE TO THE await
};
reader.readAsDataURL(blob);
});

VueJS - Assigning value to this.property within callback

How can I force
this.json = reader.result;
to assign value to this.json properly in given scope?
Because the value is there, but it is not assigned.
<div id="app" >
<label class="text-reader"><input type="file" v-on:change="getFile($event)"></label>
{{ json }} // it's being set to "test" from getFile function.
</div>
Here's VueJS Code
new Vue
({
el: '#app',
data: {
json: {}
},
methods:
{
getFile: function(ev)
{
this.json = "test";
var file = ev.target.files[0];
var reader = new FileReader();
reader.onload = function(e)
{
this.json = reader.result;
console.log(this.json); // displays content properly
}
reader.readAsText(file);
}
}
});
What I've been trying so far is just adding some kind of handler
getFile: function(ev)
{
var file = ev.target.files[0];
var reader = new FileReader();
reader.onload = function(e)
{
this.callBackHandler(reader.result);
}
reader.readAsText(file);
},
callBackHandler: function(val)
{
console.log(val);
this.json = val;
}
It yells:
TypeError: this.callBackHandler is not a function
Also using callBackHandler as a param.
<label class="text-reader"><input type="file" v-on:change="getFile($event, callBackHandler())"></label>
getFile: function(ev, handler)
{
var file = ev.target.files[0];
var reader = new FileReader();
reader.onload = function(handler)
{
handler(reader.result);
}
reader.readAsText(file);
},
callBackHandler: function(val)
{
console.log(val);
this.json = val;
}
The getFile function should look like this:
getFile: function(ev, handler) {
var file = ev.target.files[0];
var reader = new FileReader();
reader.onload = (e => {
this.callBackHandler(reader.result);
})
}
or
getFile: function(ev, handler) {
var file = ev.target.files[0];
var reader = new FileReader();
var self = this;
reader.onload = function(e){
self.callBackHandler(reader.result);
}
}
or
getFile: function(ev, handler) {
var file = ev.target.files[0];
var reader = new FileReader();
reader.onload = function(e){
this.callBackHandler(reader.result);
}.bind(this)
}
Solution:
v-on:change="getFile($event)"
(...)
reader.onload = (x =>
{
this.callBackHandler(reader.result);
});

Get value after reader onload

var image is not defined in alert :( please help , thank you so much!
handleBeforeUpload (file, event) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (function () {
var f = reader.result;
});
var image = f;
alert(image)
var photo = {uri: image}
Your f variable is in scope of onload function callback. Define it outside of that function, where you define your reader variable, so it will be available in scope of handleBeforeUpload function
handleBeforeUpload (file, event) {
var reader = new FileReader();
var photo = null;
reader.readAsDataURL(file);
reader.onload = (function () {
f = reader.result;
photo = { uri: f }
});
}

how to make the code wait inside the following async/await function?

I want to resize an image before uploading it to the server (with Firebase):
api.uploadPhoto = async (file = {}, field = {}) => {
const canvas = document.getElementById('canvas')
const img = document.createElement('img')
const reader = new FileReader()
let fileToUpload
reader.onload = function (e) {
img.src = e.target.result
pica.resize(img, canvas).then(result => {
fileToUpload = pica.toBlob(result, 'image/jpeg', 90))
})
}
reader.readAsDataURL(file)
// run the code below only when reader.onload has finished
return await imageUpload.toFirebase(fileToUpload, field)
}
The problem is that imageUpload.toFirebase is running before reader.onload. How to fix this?
move the upload in to the callback ...
api.uploadPhoto = async (file = {}, field = {}, callback) => {
const canvas = document.getElementById('canvas');
const img = document.createElement('img');
const reader = new FileReader();
let fileToUpload;
reader.onload = function (e) {
img.src = e.target.result;
pica.resize(img, canvas).then(result => {
fileToUpload = pica.toBlob(result, 'image/jpeg', 90));
});
reader.readAsDataURL(file);
callback(await imageUpload.toFirebase(fileToUpload, field));
}
};

Categories