This is a snippet for the code that I want to do Blob to Base64 string:
This commented part works and that when the URL generated by this is set to img src it displays the image:
var blob = items[i].getAsFile();
//var URLObj = window.URL || window.webkitURL;
//var source = URLObj.createObjectURL(blob);
//console.log("image source=" + source);
var reader = new FileReader();
reader.onload = function(event){
console.log(event.target.result)
}; // data url!
var source = reader.readAsBinaryString(blob);
The problem is with the the lower code, the source variable generated is null
Update:
Is there an easier way to do this with JQuery to be able to create Base64 String from Blob file as in the code above?
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var base64data = reader.result;
console.log(base64data);
}
Form the docs readAsDataURL encodes to base64
As an awaitable function:
function blobToBase64(blob) {
return new Promise((resolve, _) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.readAsDataURL(blob);
});
}
Note: The blob's result cannot be directly decoded as Base64 without first removing the Data-URL declaration preceding the Base64-encoded data. To retrieve only the Base64 encoded string, first remove data:/;base64, from the result.
this worked for me:
var blobToBase64 = function(blob, callback) {
var reader = new FileReader();
reader.onload = function() {
var dataUrl = reader.result;
var base64 = dataUrl.split(',')[1];
callback(base64);
};
reader.readAsDataURL(blob);
};
There is a pure JavaScript way that is not depended on any stacks:
const blobToBase64 = blob => {
const reader = new FileReader();
reader.readAsDataURL(blob);
return new Promise(resolve => {
reader.onloadend = () => {
resolve(reader.result);
};
});
};
For using this helper function you should set a callback, example:
blobToBase64(blobData).then(res => {
// do what you wanna do
console.log(res); // res is base64 now
});
I write this helper function for my problem on React Native project, I wanted to download an image and then store it as a cached image:
fetch(imageAddressAsStringValue)
.then(res => res.blob())
.then(blobToBase64)
.then(finalResult => {
storeOnMyLocalDatabase(finalResult);
});
var audioURL = window.URL.createObjectURL(blob);
audio.src = audioURL;
var reader = new window.FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function () {
base64data = reader.result;
console.log(base64data);
}
function bufferToBinaryString(arrayBuffer){
return String.fromCharCode(...new Uint8Array(arrayBuffer));
}
(async () => console.log(btoa(bufferToBinaryString(await new Response(blob).arrayBuffer()))))();
or
function bufferToBinaryString(arrayBuffer){
return String.fromCharCode(...new Uint8Array(arrayBuffer));
}
new Response(blob).arrayBuffer().then(arr_buf => console.log(btoa(bufferToBinaryString(arr_buf)))))
see Response's constructor, you can turn [blob, buffer source form data, readable stream, etc.] into Response, which can then be turned into [json, text, array buffer, blob] with async method/callbacks.
edit: as #Ralph mentioned, turning everything into utf-8 string causes problems (unfortunately Response API doesn't provide a way converting to binary string), so array buffer is use as intermediate instead, which requires two more steps (converting it to byte array THEN to binary string), if you insist on using native btoa method.
So the problem is that you want to upload a base 64 image and you have a blob url. Now the answer that will work on all html 5 browsers is:
Do:
var fileInput = document.getElementById('myFileInputTag');
var preview = document.getElementById('myImgTag');
fileInput.addEventListener('change', function (e) {
var url = URL.createObjectURL(e.target.files[0]);
preview.setAttribute('src', url);
});
function Upload()
{
// preview can be image object or image element
var myCanvas = document.getElementById('MyCanvas');
var ctx = myCanvas.getContext('2d');
ctx.drawImage(preview, 0,0);
var base64Str = myCanvas.toDataURL();
$.ajax({
url: '/PathToServer',
method: 'POST',
data: {
imageString: base64Str
},
success: function(data) { if(data && data.Success) {}},
error: function(a,b,c){alert(c);}
});
}
async function blobToBase64(blob) {
return new Promise((resolve, _) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.readAsDataURL(blob);
});
}
let blob = null; // <= your blob object goes here
blobToBase64(blob)
.then(base64String => console.log(base64String));
See also:
https://gist.github.com/moosetraveller/723987931308c9ec63725c14cdcbc3e7
you can fix problem by:
var canvas = $('#canvas');
var b64Text = canvas.toDataURL();
b64Text = b64Text.replace('data:image/png;base64,','');
var base64Data = b64Text;
I hope this help you
async TypeScript variation:
async function blobToBase64Async(blob: Blob): Promise<string> {
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.onerror = (e) => reject(fileReader.error);
fileReader.onloadend = (e) => {
const dataUrl = fileReader.result as string;
// remove "data:mime/type;base64," prefix from data url
const base64 = dataUrl.substring(dataUrl.indexOf(',') + 1);
resolve(base64);
};
fileReader.readAsDataURL(blob);
});
}
Sample usage:
async function fetchToBase64Async(url: string, init?: RequestInit): Promise<string> {
try {
const response = await fetch(url, init);
if (!response.ok) {
const responseText = await response.text();
throw new Error("server status: " + response.status + "\n" + "server response:" + "\n" + responseText);
}
const blob = await response.blob();
const base64 = await blobToBase64Async(blob);
return base64;
} catch (e) {
throw new Error("failed to fetch: " + url + "\n" + "caused by: " + e);
}
}
async function demoUsage() {
const base64 = await fetchToBase64Async("https://httpstat.us/200", {
method: "POST",
headers: {
"Accept": "*/*",
"Authorization": "Bearer ...",
}
});
console.log(base64);
}
Notes:
I don't understand why some answers use the load instead of the loadend event
I don't understand why some answers call readAsDataURL before setting the event handler
Another way is to use a simple wrapper around FileReader returning Observable (snippet is in TypeScript):
function toBase64(blob: Blob): Observable<string> {
const reader = new FileReader();
reader.readAsDataURL(blob);
return fromEvent(reader, 'load')
.pipe(map(() => (reader.result as string).split(',')[1]));
}
Usage:
toBase64(blob).subscribe(base64 => console.log(base64));
The answer from #Arun Killu is a good snippet if you know what is going on, but nobody has explained what was the error on the original code. For people using async and Promise calls this is error is soo obvious but for people learning or without experience it's not so clear.
Here a simple explanation.
The Bad code
var blob = items[i].getAsFile();
var reader = new FileReader();
reader.onload = function(event){
console.log(event.target.result)
}; // data url!
var source = reader.readAsBinaryString(blob);
Above code is trying to capture a binary string on source variable, however, FileReader.readAsBinaryString() returns undefined. This is because the result will be available whenever the event onload will be triggered. As we can see, he was trying to console.log the event.target.result value, which is a wrong approach.
The Good code
Here is a step by step implementation:
// 1. Create a FileReader instance
const reader = new FileReader()
// 2. Add a handler for the 'onload' event
reader.onload = (e) => {
// 5. Get the result when the 'onload' event is triggered.
const base64data = reader.result
console.log({base64data})
}
// 3. Add a handler for the 'onerror' event
reader.onerror = () => {
console.log('error')
}
// 4. Call 'readAsDataURL' method
reader.readAsDataURL(imageBlob)
As you can see the last step is 5 and it is because it is an asynchronous call.
Here is a working example:
const url = 'https://i.stack.imgur.com/RRuCp.png'
const fetchImage = async url => {
const response = await fetch(url, {mode: 'no-cors',})
const blob = await response.blob()
return blob
}
const loadImage = async () => {
const imageBlob = await fetchImage(url)
const reader = new FileReader()
reader.onload = () => {
const base64data = reader.result
console.log({base64data})
}
reader.onerror = () => {
console.log('error')
}
reader.readAsDataURL(imageBlob)
}
loadImage()
Teo, what means asynchronous?
Well young Padawan, asynchronous means that we don't know when the result will be ready, it can be different in each system and depends on how heavy or complex is the process and also it can find some errors that will not produce any result at all.
So if a process is asynchronous is a good practice to encapsulate it using an async method and returning a Promise like this:
const blobToBase64 = async blob => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result)
reader.error = (err) => reject(err)
reader.readAsDataURL(blob)
})
}
Ah okay Teo, but what is a Promise?
Good question my young fella. A Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value. In other words, will tell us if the result is ready and will give us its value, otherwise will return an error.
Above code shows a function blobToBase64 that will return a Promise This means that this function will return reader.result when it ready.
How can we integrate it into our code?
Super easy, just replace all the FileReader with the function blobToBase64 defined above and call it like this imageBase64 = await blobToBase64(imageBlob)
Check this snippet:
const url = 'https://i.stack.imgur.com/RRuCp.png'
const fetchImage = async url => {
const response = await fetch(url, {
mode: 'no-cors',
})
const blob = await response.blob()
return blob
}
const blobToBase64 = async blob => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result)
reader.error = (err) => reject(err)
reader.readAsDataURL(blob)
})
}
const loadImage = async() => {
const imageBlob = await fetchImage(url)
const imageBase64 = await blobToBase64(imageBlob)
console.log({imageBase64})
}
loadImage()
Typescript version :
const blob2Base64 = (blob:Blob):Promise<string> => {
return new Promise<string> ((resolve,reject)=> {
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = () => resolve(reader.result.toString());
reader.onerror = error => reject(error);
})
}
usage:
blob2Base64(blob).then(res=>console.log(res))
Maybe I'm missing something but
let encoded = btoa(await myblob.text());
... is all you need to do to encode a Blob's data to base64. See Blob.text() and btoa().
Or if you want the whole thing as a promise:
let encode = myblob.text().then(btoa);
PS: To decode back to a Blob: new Blob([atob(encoded)])
I wanted something where I have access to base64 value to store into a list and for me adding event listener worked. You just need the FileReader which will read the image blob and return the base64 in the result.
createImageFromBlob(image: Blob) {
const reader = new FileReader();
const supportedImages = []; // you can also refer to some global variable
reader.addEventListener(
'load',
() => {
// reader.result will have the required base64 image
const base64data = reader.result;
supportedImages.push(base64data); // this can be a reference to global variable and store the value into that global list so as to use it in the other part
},
false
);
// The readAsDataURL method is used to read the contents of the specified Blob or File.
if (image) {
reader.readAsDataURL(image);
}
}
Final part is the readAsDataURL which is very important is being used to read the content of the specified Blob
If your "blob" is an actual Blob Object and not a blob url, the conversion is pretty simple:
const reader = new FileReader()
reader.readAsDataURL(blob)
reader.onload = () => resolve(reader.result)
example of Blob Object:
console.log(blob)
output:
Blob {lastModified: 1658039931443, lastModifiedDate: Sun Jul 17 2022 08:38:51 GMT+0200 (Central European Summer Time), name: '1.jpg', size: 35493, type: 'image/jpeg'}
lastModified: 1658039931443
lastModifiedDate: Sun Jul 17 2022 08:38:51 GMT+0200 (Central European Summer Time) {}
name: "1.jpg"
size: 35493
type: "image/jpeg"
[[Prototype]]: Blob
In my case, the blob was produced by Compressorjs (should you need image compression).
I've been trying to find a way to Base64 encode binary data with JavaScript for the past few hours and it turns out that btoa() only works with strings so I came up with the following code, where blob is the file I need to encode:
function base64Encode(blob) {
var reader = new FileReader();
reader.readAsDataURL(blob)
reader.onloadend = function() {
console.log(reader.result);
};
};
Problem is, base64Encode(blob) always returns undefined, does anybody know a fix?
You are not returning anything from your function, you could use promises and async/await. As an example see the below code, it might help you.
const convertBlobToBase64 = async (blob) => {
return await blobToBase64(blob);
}
const blobToBase64 = blob => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
caller:
console.log(await convertBlobToBase64(someFileData));
I have this function where I call a function and have a local file as the parameter to convert it to base64.
export const fileToBase64 = (filename, filepath) => {
return new Promise(resolve => {
var file = new File([filename], filepath);
var reader = new FileReader();
// Read file content on file loaded event
reader.onload = function(event) {
resolve(event.target.result);
};
// Convert data to base64
reader.readAsDataURL(file);
});
}
Importing the function
fileToBase64("shield.png", "./form").then(result => {
console.log(result);
console.log("here");
});
gives me an output as
data:application/octet-stream;base64,c2hpZWxkLnBuZw==
here
I want base64 information, but noticing the file the application/octet-stream is wrong? I entered an image so shouldn't it be
data:image/pgn;base64,c2hpZWxkLnBuZw==
https://medium.com/#simmibadhan/converting-file-to-base64-on-javascript-client-side-b2dfdfed75f6
try this I think this should helpfull
let buff = new Buffer(result, 'base64');
let text = buff.toString('ascii');
console.log(text)
I've got a form for uploading Avatar image and I have to send the image file in the format of binary string; so far I've tried ReadAsBinaryString from FileReader but it's not working:(
here's my code:
<form onSubmit={this.onFormSubmit}>
<div className="row justify-content-center mb-2">
<input type="file" id="avatar" accept="image/png, image/jpeg"
onChange={this.uploadedImage} />
<button type="submit" className="btn btn-sm btn-info">Send</button>
</div>
</form>
and that is how I'm trying to use ReadAsBinaryString in uploadedImage function:
uploadedImage(e) {
let reader = new FileReader();
let file = e.target.files[0];
console.log(file); //I can see the file's info
reader.onload= () => {
var array = new Uint32Array(file);
console.log("_+_array:",array); // the array is empty!
var binaryString = String.fromCharCode.apply(null,array) ;
console.log("__binaryString:",binaryString);
this.setState({
file: binaryString
},()=>{
console.log(this.state.file);//ergo file is set to an empty image
});
}
reader.readAsArrayBuffer(file)
}
so to sum it up, I get a file but I can't convert it to byte array; Is there anything wrong with this code or this approach is completely wrong?
This approach worked for me:
function readFileDataAsBase64(e) {
const file = e.target.files[0];
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (event) => {
resolve(event.target.result);
};
reader.onerror = (err) => {
reject(err);
};
reader.readAsDataURL(file);
});
}
You can call reader.readAsBinaryString() if you wish to use binary string. More here: https://developer.mozilla.org/en-US/docs/Web/API/FileReader
You are trying to read the file data using the file variable which contains the file info not the file contents. Try sth like the following:
FileReader documentation
uploadedImage(e) {
let reader = new FileReader();
let file = e.target.files[0];
console.log(file); //I can see the file's info
reader.onload= () => {
var array = new Uint32Array(reader.result); // read the actual file contents
console.log("_+_array:",array); // the array is empty!
var binaryString = String.fromCharCode.apply(null,array) ;
console.log("__binaryString:",binaryString);
this.setState({
file: binaryString
},()=>{
console.log(this.state.file);//ergo file is set to an empty image
});
}
reader.readAsArrayBuffer(file)
}
Just to add to tomericco's answer, here is one with few more lines to get the actual final byte array :
const test_function = async () => {
... ... ...
const get_file_array = (file) => {
return new Promise((acc, err) => {
const reader = new FileReader();
reader.onload = (event) => { acc(event.target.result) };
reader.onerror = (err) => { err(err) };
reader.readAsArrayBuffer(file);
});
}
const temp = await get_file_array(files[0])
console.log('here we finally ve the file as a ArrayBuffer : ',temp);
const fileb = new Uint8Array(fileb)
... ... ...
}
where file is directly the File object u want to read , this has to be done in a async function...
const file = e.target.files[0];
// we need to get the raw bytes
const buffer = await file.arrayBuffer();
// each entry of array should contain 8 bits
const bytes = new Uint8Array(buffer);
I have a list of files I need to save and in addition to the name I need to send the readAsDataURL to the server as well.
The problem is I am not sure how to do it with the async nature of readAsDataURL. Because to save the DATAURL to the array I need to look up the name of the file which is in the files list. and I cannot pass the file to the async method of readAsDataURL. How do you write this properly to work? The end result is I want a list of files sent to the server in one JSZip file.
function saveFileList(files)
{
for (var i = 0, file; file = files[i]; i++) {
var fr = new FileReader();
fr.onload = function(e){
if (e.target.readyState == FileReader.DONE) {
var tt = e.target.result.split(",")[1];
//update the record in the list with the result
}
};
var pp = fr.readAsDataURL(file);
}
If you have FileList and you need to get array of base64 string, you need do this
export async function fileListToBase64(fileList) {
// create function which return resolved promise
// with data:base64 string
function getBase64(file) {
const reader = new FileReader()
return new Promise(resolve => {
reader.onload = ev => {
resolve(ev.target.result)
}
reader.readAsDataURL(file)
})
}
// here will be array of promisified functions
const promises = []
// loop through fileList with for loop
for (let i = 0; i < fileList.length; i++) {
promises.push(getBase64(fileList[i]))
}
// array with base64 strings
return await Promise.all(promises)
}
use it like this
const arrayOfBase64 = await fileListToBase64(yourFileList)
You need another function around it, so you can pass the file in. Try this:
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
if(reader.readyState == FileReader.DONE)
alert(theFile.name); // The file that was passed in.
}
};
})(file);
reader.readAsDataURL(file);
An alternative to Russell G's answer:
var reader = new FileReader();
reader.onload = function(event){
payload = event.target.result;
var filename = file.name, filetype = file.type;//etc
//trigger a custom event or execute a callback here to send your data to server.
};
reader.onerror = function(event){
//handle any error in here.
};
reader.readAsDataURL(file);