Entrada de archivos y Dart

Question

Estoy probando Dart, pero no puedo entender cómo enviar una imagen del usuario al servidor. Tengo mi etiqueta de entrada, y puedo llegar a esto en el código de DART, pero no puedo leer de ella. Im tratando algo como:

InputElement ie = document.query('#myinputelement'); 

ie.on.change.add((event){<br/> 
    InputElement iee = document.query('#myinputelement');<br/> 
    FileList mfl = iee.files;<br/> 
    File myFile = mlf.item(0);<br/> 

    FileReader fr = new FileReader(); 
    fr.readAsBinaryString(myFile); 

    String result = fr.result; //this is always empty 
}); 

Con el html que contiene:

<input type="file" id="myinputelement"> 

Realmente espero que me puedo ayudar, soy un poco atascado. Puede que me esté perdiendo la carga del lector de archivos, o quizás lo estoy haciendo completamente mal.

Answer 1

La API FileReader es asincrónica, por lo que debe usar controladores de eventos.

var input = window.document.querySelector('#upload'); 
Element log = query("#log"); 

input.addEventListener("change", (e) { 
    FileList files = input.files; 
    Expect.isTrue(files.length > 0); 
    File file = files.item(0); 

    FileReader reader = new FileReader(); 
    reader.onLoad = (fileEvent) { 
    print("file read"); 
    log.innerHTML = "file content is ${reader.result}"; 
    }; 
    reader.onerror = (evt) => print("error ${reader.error.code}"); 
    reader.readAsText(file); 
}); 

también es necesario para permitir la carga de archivos a partir de su navegador, lo que se puede hacer en Chrome iniciándolo con la bandera archivos --allow-file-access-from-

Answer 2

No es necesario (más) utilizar dart: dom FileReader en lugar de uno de dart: html.

El código debería funcionar si se añade un detector de eventos para el lector de archivos, así:

FileReader fr = new FileReader(); 
fr.on.load.add((fe) => doSomethingToString(fe.target.result)); 
fr.readAsBinaryString(myFile); 

Answer 3

Esto es cómo leer un archivo usando dart:html.

document.querySelector('#myinputelement`).onChange.listen((changeEvent) { 
    List fileInput = document.querySelector('#myinputelement').files; 

    if (fileInput.length > 1) { 
     // More than one file got selected somehow, could be a browser bug. 
     // Unless the "multiple" attribute is set on the input element, of course 
    } 
    else if (fileInput.isEmpty) { 
     // This could happen if the browser allows emptying an upload field 
    } 

    FileReader reader = new FileReader(); 
    reader.onLoad.listen((fileEvent) { 
      String fileContent = reader.result; 
      // Code doing stuff with fileContent goes here! 
    }); 

    reader.onError.listen((itWentWrongEvent) { 
      // Handle the error 
    }); 

    reader.readAsText(fileInput[0]); 
}); 

Answer 4

Mi intento

void fileSelected(Event event) async { 
    final files = (event.target as FileUploadInputElement).files; 
    if (files.isNotEmpty) { 
     final reader = new FileReader(); 

     // ignore: unawaited_futures 
     reader.onError.first.then((evt) => print('error ${reader.error.code}')); 
     final resultReceived = reader.onLoad.first; 
     reader.readAsArrayBuffer(files.first); 

     await resultReceived; 
     imageReference.fileSelected(reader.result as List<int>); 
    } 
    }