Converting files in base64

Question

I have a function in java script that runs through the files.

I have selected by means of an input type:

file multiple, this function lists the files and for each file they add a link "See detail" which in turn when clicking sends to an onchange.

That link I create it when going through the selected files.

The problem is that in this function I need to obtain the balor in BASE64 per file, I only do that when I debug the script from the browser.

If I get Base64 per file but when I do not debugeo it leaves my variable indefinite.

I leave my code.

function handleFileSelect(e) {
            console.dir(e);
            if (!e.target.files) return;
            selDiv.innerHTML = "";
            var files = e.target.files;
            for (var i = 0; i < files.length; i++) {

                var base64;
                var fileToLoad = document.getElementById("files").files[i]
                var fileReader = new FileReader();
                fileReader.onload = function (fileLoadedEvent) {
                    base64 = fileLoadedEvent.target.result;
                    console.log(base64);
                };
                fileReader.readAsDataURL(fileToLoad);


                var f = files[i];
                var TmpPath = URL.createObjectURL(e.target.files[i]);
                var name = f.name;
                var extencion = f.name.split('.')[1];

                selDiv.innerHTML += f.name + "&nbsp;&nbsp;&nbsp;&nbsp; <a href='#' onclick=verdetalle(" + i + ",'" + extencion + "','" + name + "','" + base64 + "','" + TmpPath + "')>Ver Detalle</a>" + "<br/>";
            }
        }

this seccion the code is my problem, why?

                var base64;
                var fileToLoad = document.getElementById("files").files[i]
                var fileReader = new FileReader();
                fileReader.onload = function (fileLoadedEvent) {
                    base64 = fileLoadedEvent.target.result;
                    console.log(base64);
                };
                fileReader.readAsDataURL(fileToLoad);

Answer 1

1. FileReader works asynchronously. base64 is undefined during for-loop.

2. You are using function-scope variables. It overwrites variables.

async function type:

 document.querySelector( "input" ).addEventListener( "change", handleFileAsync ); async function handleFileAsync ( event ) { async function readFile( file ) { let reader = new FileReader(); let result = new Promise( resolve => reader.addEventListener( "load", resolve ) ); reader.readAsArrayBuffer( file ); return { name: `name: ${file.name}`, ArrayBuffer: ( await result ).srcElement.result } } let files = event.srcElement.files; let promises = []; for ( const file of files ) { promises.push( readFile( file ) ); } console.log( await Promise.all( promises ) ); } 

 <input type="file" multiple> 

Equivalent normal function as above:

 document.querySelector( "input" ).addEventListener( "change", handleFile ); function handleFile ( event ) { let files = event.srcElement.files; let promises = []; for ( const file of files ) { let reader = new FileReader(); promises.push( new Promise( resolve => reader.addEventListener( "load", resolve ) ) .then( result => ( { name: `name: ${file.name}`, ArrayBuffer: result.srcElement.result } ) ) ); reader.readAsArrayBuffer( file ); } Promise.all( promises ).then( list => console.log( list ) ); } 

 <input type="file" multiple> 

For using console, heading code uese .readAsArrayBuffer instead of .readAsDataURL .