Wait variable value to return function

Question

I’m trying to create a function that turns a file into a Data URL. But I am facing a problem: The return value of the function is not what I expected. Just follow my code:

File.prototype.toData = function() {
  
  //Leitor de Arquivos
  var leitor = new FileReader();
  var dados  = false; //Não há dados inicialmente
  
  //Quando o leitor ler o arquivo
  leitor.onload = function(e){
    dados = e.target.result; //Grava a string de dados na variável
  };
  
  //Inicia a leitura deste arquivo
  leitor.readAsDataURL(this);

  //Minha Tentativa:
  //while(!dados){}
  
  //Retorna os dados
  return dados;

}


function teste(i) {
  console.log('Dados: '+i.files[0].toData())
}

<input type='file' onchange='teste(this)' />

Answer 1

Your problem is that this method is asynchronous and you can’t just do var foo = i.files[0].toData();

You have to wear a callback to give you the string when it is ready. So you can example:

File.prototype.toData = function(cb) {
    // Leitor de Arquivos
    var leitor = new FileReader();

    // Quando o leitor ler o arquivo
    leitor.onload = function(e) {
        cb(e.target.result); // Envia a string de dados quando esta estiver pronta
    };

    // Inicia a leitura deste arquivo
    leitor.readAsDataURL(this);
}

function teste(i) {
    i.files[0].toData(function(dados) {
        console.log('Dados: ' + dados);
    });
}

Example: https://jsfiddle.net/LynLm3jj/

Thus passes a function to File.prototype.toData = function(cb) { and when the onload was called he invokes that function passing the data you want:

leitor.onload = function(e) {
    cb(e.target.result); // Envia a string de dados quando esta estiver pronta
};