We Keep Coding

HTML 5 Filereader Not returning Base64 URL Onloadend

I am using the following script for reading image data as base64 url.
function getBase64(incomingfile) {
var reader = new FileReader;
reader.readAsDataURL(incomingfile);
reader.onloadend = ()=>{
console.log(reader.result);
}
}
This is working fine and printing the result on console. But when I try to apply this below code
function getBase64(incomingfile) {
var reader = new FileReader;
reader.readAsDataURL(incomingfile);
reader.onloadend = ()=>{
return reader.result;
}
}
I am not getting the result of this function after calling. What should I do to get return value of Filereader.

the file The FileReader methods work asynchronously but don't return a Promise so when attempting to retrieve the result immediately after calling a method will not work
try this
let logBase64 = "";
function getBase64(incomingfile) {
var reader = new FileReader();
reader.readAsDataURL(incomingfile);
return new Promise((resolve, reject) => {
reader.onloadend = () => {
resolve(reader.result);
};
}).then((result) => {
logBase64 = result;
console.log(logBase64);
});
}

How to get results of File reader

So I have an onchange event in my html which gets an image from the user and need to convert it to a data url in order to send over socket.io and store in the database. How do I get the results of my file reader object. I dont know how to pass in a callback
What I need to do is get a callback function into the file reader onload event so that I can set my picture variable to the data url to then send over the socket. Just need help in getting the results from the file reader to my global variable
// HTML
<input type = 'file' (change) = "setpreview($event)" value = 'upload photo'>
// the js code.
setpreview(event) {
var img = <File>event.target.files[0];
var reader = new FileReader();
reader.onload = function() {
console.log(reader.result);
}
reader.readAsDataURL(img);
}

You got it just assign the result to a scoped variable and use it in template
srcImg = null; //declare this
setpreview(event) {
const comp = this;
const img = <File>event.target.files[0];
const promise = new Promise((resolve) => {
const reader = new FileReader();
reader.onload = function () {
resolve(reader.result);
}
reader.readAsDataURL(img);
});
promise.then(img => {
comp.srcImg = img;
// if you want to do anything with img you can do it here
});
}
<input type = 'file' (change) = "setpreview($event)" value = 'upload photo'>
<img [src]="srcImg" *ngIf="srcImg" />
Updated Stackblitz: https://stackblitz.com/edit/angular-tkbbdh

Read Simple JSON file (almost done)

I have a input and when I load it shows the file right in console.log.
But how do I get the actual json data from the file??
$('#importFlow').change(function () {
var files = event.target.files;
var file = files[0];
console.log(file);
console.log(JSON.parse(file)); //doesn't work
});

You'd need to use the FileReader API.
$('#importFlow').change(function () {
var files = event.target.files;
var file = files[0];
var reader = new FileReader();
reader.onload = function(event) {
var jsonObject = JSON.parse(event.target.result);
console.log(jsonObject); // Logs the parsed JSON
}
reader.readAsText(file);
});

You can read actual file content like this:
$('#importFlow').change(function () {
var files = event.target.files;
var reader, fileContent;
if (this.files)
{
reader = new FileReader();
reader.onload = function (e)
{
fileContent = e.target.result;
}
reader.readAsDataURL(this.files[0]);
}
});
In the above code, you can get the actual file data in the "fileContent" variable.

How to access a local variable in filereader onload callback

I am doing a file upload operation in React, and I need to read the file uploaded from the user and do some state changes according to this file. What I have right now is shown below and I need to need to access the variable startInt within the onload callback, but it is still not defined here using the IIFE
const file = document.getElementById("fileUpload").files[0];
if (file) {
const reader = new FileReader();
reader.readAsText(file, "UTF-8");
reader.onload = ((theFile) => {
const form = document.getElementById('fileUploadForm');
const start = datetimeToISO(form.Start.value);
const startInt = new Date(start).getTime();
return (e) => {
console.log(e.target.result);
//startInt is not defined here
}
})(file);
}
I followed this guide if it helps: https://stackoverflow.com/a/16937439/6366329
If you could point out my mistake that would be great. Many thanks in advance

you can access local var (but not class const like this.state.* or this .props.*).
so something like this you need:
var file = document.getElementById('inputID').files[0]
var Images = this.props.motherState.Images // Images is array
var reader = new FileReader();
reader.readAsDataURL(file); //
reader.onload = function () {
//console.log(reader.result);
if (file.type.match(/image.*/))
Images.push(reader.result) // its ok
// but this.props.motherState.Images.push(reader.result)
// return error like this:
// Images not define in this.props.motherState.Images
};
reader.onerror = function (error) {
//console.log('Error: ', error);
};

How to get the filename from the Javascript FileReader?

I'm using the Javascript FileReader to load an image in the browser:
e = e.originalEvent;
e.dataTransfer.dropEffect = 'copy';
this.documentFile = e.dataTransfer.files[0];
var reader = new FileReader();
reader.onloadend = function () {
if (reader.result) {
console.log(reader);
$('#theImage').attr('src', reader.result);
}
};
reader.readAsDataURL(this.documentFile);
This works fine. I now want to get the original filename of the image, but I've got no clue how and looking around the internet I can't find anything either?
Does anybody know how I can get the filename through the FileReader? All tips are welcome!

This is prob not the best solution, BUT it worked for me.
var reader = new FileReader();
reader.fileName = file.name // file came from a input file element. file = el.files[0];
reader.onload = function(readerEvt) {
console.log(readerEvt.target.fileName);
};
Not the best answer, but a working one.

I just faced the same issue, here's how I fixed it:
Using FileReader
const reader = new FileReader();
reader.readAsDataURL(event.target.files[0]); // event is from the HTML input
console.log(event.target.files[0].name);

The selected answer will work, but I personally prefer to prevent assigning unknown properties to existing objects.
What I do is using the built-in Map object to store connections between FileReader and its File. It works great, because Map allows the key to be anything, even an object.
Consider this example with drag&drop on the window, where multiple files can be dropped at the same time:
// We will store our FileReader to File connections here:
const files = new Map();
window.addEventListener('drop', e => {
e.preventDefault();
for (const file of e.dataTransfer.files) {
const reader = new FileReader();
files.set(reader, file);
reader.addEventListener('load', e => {
// Getting the File from our Map by the FileReader reference:
const file = files.get(e.target);
console.log(`The contents of ${file.name}:`);
console.log(e.target.result);
// We no longer need our File reference:
files.delete(e.target);
});
reader.readAsText(file);
}
});
window.addEventListener('dragover', e => {
e.preventDefault();
});
And voilà, we made it without altering our FileReader objects!

I got the filename and filesize through the FileReader this way
First of all, the reader is a javascript FILE API specification that is so useful to read files from disc.
In your example the file is readed by readAsDataURL.
reader.readAsDataURL(this.documentFile);
var name = this.documentFile.name;
var size = this.documentFile.size;
I tried on my site where use this.files[0] instead and worked fine to catch the name and the size with jQuery into an input element.
reader.readAsDataURL(this.files[0]);
$("#nombre").val(this.files[0].name);
$("#tamano").val(this.files[0].size);

I tried the solution of #Robo Robok but was unable to get this to work in my Angular Application. With this as inspiration I came up with the following and wonder if this is a correct approach. Me, I'm a bit skeptic because each upload gets there own FileReader
export class ImageFileUpload {
imageData: any;
imageName!: string;
fileReader!: FileReader;
}
selectedFiles!: FileList | null;
previews: Array<ImageFileUpload> = [];
uploadRenewals(event: any) { // event of html
const target = event.target as HTMLInputElement;
this.selectedFiles = target.files;
if (this.selectedFiles) {
const numberOfFiles = this.selectedFiles.length;
for (let i = 0; i < numberOfFiles; i++) {
const currentSelectedFile = this.selectedFiles[i];
const newImageFile = new ImageFileUpload();
newImageFile.imageName = currentSelectedFile.name;
newImageFile.fileReader = new FileReader();
newImageFile.fileReader.onload = (e: any) => {
newImageFile.imageData = e.target.result;
};
newImageFile.fileReader.readAsDataURL(currentSelectedFile);
this.previews.push(newImageFile);
}
}
}
}
HTML Page
<input #fileInput (change)="uploadRenewals($event)" multiple type="file">
<div class="slider">
<div *ngFor="let preview of previews; let idx = index">
<img [src]="preview.imageData" [alt]="preview.imageName">
</div>
</div>

One other way is to modify the FileReader() object instance with your own desired property. Adding a key like reader.myOwnFileName gets you access to that in the onload callback.
const reader = new FileReader();
reader.onload = function() {
console.log("Loaded file '" + reader.myOwnFileName + "' contents: ");
console.log(reader.result); // output file contents of chosen file.
};
reader.readAsText(this.files[0]); // use readAsText(), readAsDataURL() or other method.
// make your own key on the object instance:
reader.myOwnFileName = this.files[0].name;

If you want the filename to a variable:
var filename;
var reader = new FileReader();
reader.onloadend = function () {
if (reader.result) {
console.log(reader);
$('#theImage').attr('src', reader.result);
filename = reader.result;
}
};
reader.readAsDataURL(this.documentFile);
If you want it to run in a function:
var reader = new FileReader();
reader.onloadend = function () {
if (reader.result) {
console.log(reader);
$('#theImage').attr('src', reader.result);
myfunctionafter(reader.result);
}
};
reader.readAsDataURL(this.documentFile);
If you want to get the info out inside another function:
var reader = new FileReader();
var filename = reader.onloadend = function () {
if (reader.result) {
console.log(reader);
$('#theImage').attr('src', reader.result);
return reader.result;
}
};
reader.readAsDataURL(this.documentFile);
There might be a problem when your reader.onloadend might finish before the function you are running it from. Then you should do two functions and trigger the myfunctionafter(reader.result); from inside
Or you could simply get the src after
var filename = $('#theImage').attr('src');