title: Choose a File and send through POST with Flutter Web
body: <h3>Problem Statement</h3>
  
  <p>Hi, basically, what I want is to send a file through a POST to a python server-side Flask API. </p>
  
  <p>The goal is to provide the user with a file picker interface, and after him/her choosing the desired <code>.txt</code> file, send it through Dio using a POST request. </p>
  
  <p>A button (Widget) should call this <code>uploadFile()</code> function and everything should be handle by it</p>
  
  <hr>
  
  <h3>Code</h3>
  
  <p>Here is my current code: </p>
  
  <pre><code>import 'package:dio/dio.dart';
  import 'dart:html';
  import 'package:http/http.dart' as http;
  
  BaseOptions options = new BaseOptions(
    baseUrl: "http://localhost:5000",
    connectTimeout: 5000,
    receiveTimeout: 3000,
  );
  InputElement uploadInput = FileUploadInputElement();
  
  void uploadFile() async {
    uploadInput.click();
    uploadInput.onChange.listen((e) {
      // read file content as dataURL
      final files = uploadInput.files;
      final reader = new FileReader();
  
      if (files.length == 1) {
        final file = files[0];
  
          reader.onLoad.listen((e) {
            sendFile(reader.result);
          });
  
          reader.readAsDataUrl(file);
        }
    });
  }
  
  sendFile(file) {
    var dio = new Dio(options);
    FormData formData = FormData.fromMap({"file": MultipartFile.fromBytes(file), "fileName": 'data.txt'});
    dio.post('/upload', data: formData);
    //dio.post('/upload', data: FormData.fromMap({'file': 'aaaa'}));
  }
  </code></pre>
  
  <hr>
  
  <h3>Trial Outcome</h3>
  
  <p>The problem here is that <a href="https://api.flutter.dev/flutter/dart-html/FileReader-class.html" rel="nofollow noreferrer">FileReader</a> does not have a <code>readAsBytes</code> method, therefore I can't send the file as a Multipart file using the fromBytes method.</p>
  
  <p>The only methods <a href="https://api.flutter.dev/flutter/dart-html/FileReader-class.html" rel="nofollow noreferrer">FileReader</a> has are: <code>readAsDataUrl</code>, <code>readAsArrayBuffer</code> and <code>readAsText</code>
  I don't want to read the .txt body to send it, I want to send the actual file. </p>
  
  <h3>Other tries</h3>
  
  <ul>
  <li>I have also tried using <a href="https://pub.dev/packages/file_picker" rel="nofollow noreferrer"><code>file_picker</code></a> but it seems that it does not support Flutter Web</li>
  </ul>
  
  <h3>Reference Links</h3>
  
  <p>My try is based on: <a href="https://stackoverflow.com/questions/56457214/is-there-any-plugin-or-way-to-upload-file-to-server-using-flutter-web/56648742#56648742">Is there any plugin or way to upload file to server using flutter web?</a></p>
  
  <p>and some others that I could not find again.</p>
  
  <h2>React Inspiration</h2>
  
  <p>The way I've managed to do it in React was: </p>
  
  <blockquote>
    <p><strong>FileUploader.js</strong></p>
  </blockquote>
  
  <pre><code>export const UploadButton = ({ handler }) =&gt; (
      &lt;button onClick={handler.uploadTextFile}&gt;Upload Image&lt;/button&gt;
  );
  
  export const FileChooser = ({ handler }) =&gt; (
      &lt;input
          ref={ref =&gt; {
              handler.uploadInput = ref;
          }}
          type="file"
      /&gt;
  );
  </code></pre>
  
  <blockquote>
    <p><strong>Handler.js:</strong></p>
  </blockquote>
  
  <pre><code>async uploadTextFile(ev) {
          ev.preventDefault();
  
          this.fileName = uuid.v4();
          const data = new FormData();
          data.append("file", this.uploadInput.files[0]);
          data.append("fileName", this.fileName);
          data.append("setOfWords", this.words);
  
          await fetch("http://localhost:5000/upload", {
              method: "POST",
              body: data
          });
  </code></pre>
  
  <h3>Cry</h3>
  
  <p>Please, help? I am stuck on it for more than 4 days and could not yet figure out how to solve this in Flutter Web...</p>