How to get string base64 in a variable?

Question

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

Answer 1

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">