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?
Related
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
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);
};
}
I'm trying to write a service which reads the image file from an HTML input element. I want this service to return the HTML img object with the updated attribute from the read image file (the base64 string). My service is now this:
.service('ReadLocalImageService', [function () {
this.openLocalImage = function (file) {
var img = document.createElement("img");
var fileReader = new FileReader();
fileReader.onload = function (e) {
img.src = e.target.result;
};
fileReader.readAsDataURL(file);
return img.src;
};
}]);
The img.src in this case is returned empty, like this:
If I put a console.log(img.src) inside the fileReader.onload, it prints out what I want. It seems like the function openLocalImage is returning the img.src before e.target.result is assigned to it.
I couldn't manage to work this around nor find the correct topic about this problem. Could anyone help me solve this or explain me why it doesn't work?
Its because img was not loaded yet. Here is a solution
.service('ReadLocalImageService', [function () {
this.openLocalImage = function (file, callback) {
var img = document.createElement("img");
var fileReader = new FileReader();
fileReader.onload = function (e) {
img.src = e.target.result;
callback(img.src);
};
fileReader.readAsDataURL(file);
};
}]);
We will pass a callback function and receive img.src as its param. To use it
ReadLocalImageService.openLocalImage(myImage, function(imgSrc) {
// use imgSrc
});
I'm trying to read a text file of over 150,000 lines of text. I want to be able to read the text file and pass it as a parameter for processFileContent.
I tried it this way, but it doesn't work. Also, is there a better way to do this for such big data?
function readFile(file) {
var reader = new FileReader();
reader.onload = function (evt) {
var data = evt.target.result;
};
reader.readAsText(file);
return data;
}
document.getElementById('file').addEventListener('change', readFile, false);
var data = readFile();
function processFileContent(data) {
var list = data.split('\n');
...
FileReader.onload event returns results asynchronously. You can use a callback or Promise to return result of FileReader to processFileContent. Also file at readFile would be event object, not .files property of event.target.
function readFile(event) {
var file = event.target.files[0];
if (file) {
new Promise(function(resolve, reject) {
var reader = new FileReader();
reader.onload = function (evt) {
resolve(evt.target.result);
};
reader.readAsText(file);
reader.onerror = reject;
})
.then(processFileContent)
.catch(function(err) {
console.log(err)
});
}
}
document.getElementById('file')
.addEventListener('change', readFile, false);
function processFileContent(data) {
var list = data.split('\n');
...
One of your problems is with scoping. You declared data as a local variable in the onload event handler, and tried returning it from the outer function, in which it was undefined. To fix this, you need to move the variable declaration out of the event handler.
You also are expecting a file as an argument to your event handler it seems, however events pass Event objects to their event handlers. To get the file, you need to get event.target.files[0]. This should fix it.
function readFile(event) {
var file = event.target.files[0]; // getting the file Blob
var reader = new FileReader();
var data; // moved declaration
reader.onload = function (evt) {
data = evt.target.result;
};
reader.readAsText(file);
return data;
}
function blobToString(blob) {
var reader = new FileReader();
var d = "";
reader.onloadend = function() {
d.callback(reader.result);
console.log(reader.result);
};
reader.readAsText(blob);
return d;
};
The above code does not work, but I guess my intentions are clear, I want to convert some binary data(WebKitBlobBuilder) to a string. Also the "console.log(reader.result);" doesn't display anything.
Check out http://blog.ericzhang.com/state-of-binary-in-the-browser/ and his binary.js project.
it should not be reader.onloadend but rather reader.onloaded
or try
reader.onload = function (e) {
e.target.result -> this is the data.
}