File input e Dart

Question

Sto provando Dart, ma non riesco a capire come inviare un'immagine dal server al server. Ho il mio tag di input e posso raggiungerlo nel codice DART, ma non riesco a leggerlo. Im cercando qualcosa di simile:

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 il codice HTML contenente:

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

Spero davvero che tu mi potete aiutare, im po 'bloccato. Potrei semplicemente mancare come eseguire l'onload per il lettore, o forse lo sto facendo completamente storto.

Answer 1

L'API FileReader è asincrona quindi è necessario utilizzare i gestori di eventi.

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); 
}); 

è anche necessario per consentire il caricamento di file dal al vostro browser, che può essere fatto in Chrome avviandolo con il flag --allow-file-access-from-file

Answer 2

Non è necessario (altro) per usare dart: dom FileReader al posto di dart: html.

Il codice dovrebbe funzionare se si aggiunge un listener di eventi per il lettore di file, in questo modo:

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

Answer 3

Questo è come leggere un file utilizzando 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

Il mio tentativo

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>); 
    } 
    }