How to get string base64 in a variable?

How to get string base64 in a variable? - javascript

This is my code:
but not get the string base64 in my variable.
I need the string base64 in this variable var base64.
I have seen other issues but none of them meets what I need
<input type:file multiple id="files">
<script>
function listarchivos(){
var base64; //in this variable i need the base64
var selectedFile = document.getElementById("files").files;
var fileToLoad = selectedFile[0];
getBase64(fileToLoad).then(
data => alert(data)
);
}
//This is my function for get base64, but not return the string base64
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
return Promise.resolve(reader.result)
});
}
</script>
the function that I have already complies with obtaining the base64 string of the file that is given as a parameter, what I can not do is get access to that string to assign it to a variable and use it.
I just need you to tell me how I can get access to that base64 chain, I just need it in a variable that can be handled as desired.
I have already tried the following options
var base64 = getBase64(fileToLoad).then(
data => alert(data)
); //this not works
getBase64(fileToLoad).then(
data => base64 = data
); //This not works
getBase64(fileToLoad).then(
data => return{data}
);//this not works

Since Promise makes the function asynchronous, the following code would start running getBase64() and continuously executing console.log(base64) which is not defined yet.
function listarchivos() {
base64; //in this variable i need the base64
var selectedFile = document.getElementById("files").files;
var fileToLoad = selectedFile[0];
getBase64(fileToLoad).then(
data => {
base64 = data;
}
);
console.log(base64) // undefined
}
So you should await for getBase64() be done or use a callback like the followings.
await example 1
async function listarchivos() {
var base64; //in this variable i need the base64
var selectedFile = document.getElementById("files").files;
var fileToLoad = selectedFile[0];
await getBase64(fileToLoad).then(
data => {
alert(data);
base64 = data;
}
);
console.log(base64)
}
//This is my function for get base64, but not return the string base64
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
return Promise.resolve(reader.result)
});
}
$('#files').on('change', listarchivos)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" multiple id="files">
await example 2
async function listarchivos() {
var base64; //in this variable i need the base64
var selectedFile = document.getElementById("files").files;
var fileToLoad = selectedFile[0];
base64 = await getBase64(fileToLoad).then(
data => {
return data;
}
);
console.log(base64)
}
//This is my function for get base64, but not return the string base64
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
return Promise.resolve(reader.result)
});
}
$('#files').on('change', listarchivos)
function DoSomething() {
console.log(base64)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" multiple id="files">
callback
var base64;
function listarchivos() {
var selectedFile = document.getElementById("files").files;
var fileToLoad = selectedFile[0];
getBase64(fileToLoad).then(
data => {
base64 = data;
DoSomething()
}
);
}
//This is my function for get base64, but not return the string base64
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
return Promise.resolve(reader.result)
});
}
$('#files').on('change', listarchivos)
function DoSomething() {
console.log(base64)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" multiple id="files">

Related

Getting Base64 string from video file in Javascript [duplicate]

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&colon;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).

How would I convert an image to base64 in reactJS

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 don't need to console log from promise i need the data to store

// get the file in Base64
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
var storeInTheGlobalVariable = '';
var ImageBase64 = getBase64(bottomBannerImage).then(function(data){
storeInTheGlobalVariable = data; // not woking -> undefine
console.log(data) // working fine
});
I don't want to console log. I want the promise resolve data. How I will get It outside of this then() method

How to get byte array from a file in reactJS

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);

Get string Base64 from input type:file?

How to get string Base64 from an input file .pdf.
i have this function but i dont return the string base64.
the files extencion accept are .pdf
I NEED THE STRING BASE64 IN AN VARIABLE
My code:
<input type="file" id="files" name="files" multiple>
Js code
var base64 = getBase64(document.getElementById('files').files[0])
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);
return(reader.result); //THIS NO RETURN NOTHING. WHY?
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}

I tested it, it works, you have to add it on the change event, you are calling the getbase64 before anything is there:
https://jsfiddle.net/ibowankenobi/fcgL3dn8/
document.getElementsByTagName("input")[0].addEventListener("change",getBase64,false);
var _file;
function getBase64() {
var file = this.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);
_file = reader.result;
//don't do the below. It is pointless. Either assign the result to a variable within scope or call a callback
//return(reader.result); //THIS NO RETURN NOTHING. WHY?
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}

Develop Reference

JavaScript is the programming language of the Web.

How to get string base64 in a variable? - javascript

Related

Getting Base64 string from video file in Javascript [duplicate]

How would I convert an image to base64 in reactJS

I don't need to console log from promise i need the data to store

How to get byte array from a file in reactJS

Get string Base64 from input type:file?

Categories

Resources