Wait for variable value to return function

3

I'm trying to create a function that turns a file into a Data URL. But I'm facing a problem: The return value of the function is not what I expected. Here is 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)' />
    
asked by anonymous 13.06.2016 / 06:54

1 answer

4

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

You need to use a callback to give you the string when it's ready. So 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: link

In this way you pass a function to File.prototype.toData = function(cb) { and when onload is called it invokes this function by passing the data you want:

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