I'm trying to pass the path from the function for get the binary file base64 String, as like below.
var file = 'dir/file.pdf';
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
But as it returning me undefined
i need similar like this
data:application/pdf;base64,JVBERi0xLjUKJdDUxdgKNSAws2...
How this can be done?
With fileReader you can convert your file from path like this :
var file = new File("/pdf/test.pdf","r");
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
The solution of Lèo is good, except that it is necessary to use the good arguments for the constructor's file. Example :
var file = new File(["foo"], "/pdf/test.pdf", {type: 'application/pdf'});
Here the documentation of the Api: File mdn
Related
I'm reading xlsx file in javascript using following code:
this.parseExcel = function (file, id) {
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
var workbook = XLSX.read(data, {
type: 'binary'
});
var template_row_object = XLSX.utils.sheet_to_csv(workbook.Sheets['Template']);};
reader.onerror = function (ex) {
console.log(ex);
};
reader.readAsBinaryString(file);
};
};
code is working fine for xlsx file but I want to use the same code for reading xlsm format.
Using readAsBinaryString is discouraged (it was once removed but brought back for backward compatibility). in fact the hole FileReader is legacy now with the new promise based blob reading methods.
this.parseExcel = async function (file, id) {
const uint8 = new Uint8Array(await file.arrayBuffer())
const workbook = XLSX.read(uint8, { type: 'array' })
const template_row_object = XLSX.utils.sheet_to_csv(workbook.Sheets.Template)
}
It may not answer your question but I guess xlsm is different format that XLSX do not support.
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)
So I am trying to convert a file from tag. This is how my javascript code looks like:
var file = document.getElementById("file").files[0];
if (file) {
var filereader = new FileReader();
filereader.readAsDataURL(file);
filereader.onload = function (evt) {
var base64 = evt.target.result;
}
}
That returns undefined.
two little helper and an example.
const blobToDataUrl = blob => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(blob);
});
const blobToBase64 = blob => blobToDataUrl(blob).then(text => text.slice(text.indexOf(",")));
for(let file of document.getElementById("file").files) {
blobToBase64(file).then(base64 => console.log(file, base64));
}
But why the Promises?
Because your next question will be: How do I get the base64 string out of onload? and the short answer is You don't. A longer answer would be: It's like asking how to get something from the future into the now. You can't.
Promises are placeholder/wrapper for values that will eventually be available; but not yet. And they are the foundation of async functions.
So let's skip messing with callbacks and get right to the point where you write
for(let file of document.getElementById("file").files) {
const base64 = await blobToBase64(file);
console.log(file, base64);
}
but for that you will have to brush up on async and await.
I think you have missed the return statement in the code.
Replace your function with the following lines:
var file = document.getElementById("file").files[0];
if (file) {
var filereader = new FileReader();
filereader.readAsDataURL(file);
filereader.onload = function (evt) {
var base64 = evt.target.result;
return base64
}
}
Trying to convert Binary File in Base64 Encoded string using FileReader.
Nothing gets executed inside once the reader.onload = function () is called.
I need to call docUpdate(paramObj) method inside reader.onload().
function getBase64(file, paramObj) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
console.log(reader.result);
(paramObj['documentInfo']).binaryStr = reader.result;
docUpdate(paramObj);
alert("Hello");
};
reader.onerror = function(error) {
console.log('Error: ', error);
};
}
There is no console.log and Alert is also not executed.
What am i doing wrong here?
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);
};
}