title: How to convert Uint8List image to File Image for upload in flutter web
body: <p>I have have been able to pick a file from my computer and display in my flutter web app.
  I have a function(of type <code>File</code>) which takes a file and uploads it to the server. like so <code>functionName(File imageToSend)</code>. </p>
  
  <p>But when I try to send this image to the sever side, it gives me an error. Am doing the upload using the code below:</p>
  
  <pre><code>Uint8List uploadedImage;
  File theChosenImg;
  FileReader reader =  FileReader();
  FileReader reader2 = FileReader();
  
  filePicker() async {
  InputElement uploadInput = FileUploadInputElement();
  uploadInput.click();
  
  
  uploadInput.onChange.listen((e) {
    // read file content as dataURL
    final files = uploadInput.files;
    if (files.length == 1) {
      final file = files[0];    
  
      reader.onLoadEnd.listen((e) {
                  setState(() {
                    uploadedImage = reader.result;
                    theChosenImg = files[0];
                  });
      });
      reader.readAsArrayBuffer(file);
      reader2.readAsDataUrl(file);
    }
  });
  }
  </code></pre>
  
  <p>when I use the variable <code>uploadedImage</code> the error is <code>Expected a value of type 'File', but got one of type 'String'</code> then I decided to use <code>theChosenImg</code> from <code>theChosenImg = files[0];</code>, this also tell me that the datatypes mismatch.</p>
  
  <p>Is it possible for me to convert the <code>Uint8List</code> datatype to <code>File</code>?</p>
  
  <p><strong>UPDATED WITH CODE</strong></p>
  
  <pre><code>import 'dart:typed_data';
  import 'dart:html';
  import 'dart:ui' as ui;
  import 'package:flutter/cupertino.dart';
  import 'package:flutter/material.dart';
  import 'package:web_image_upload/impUp.dart';
  import 'package:http/http.dart' as http;
  import 'dart:convert';
  
  class FrontUi extends StatefulWidget {
    @override
    _FrontUiState createState() =&gt; _FrontUiState();
  }
  
  class _FrontUiState extends State&lt;FrontUi&gt; {
  
  Uint8List uploadedImage;
  File theChosenImg;
  String dispText = 'Uploaded image should shwo here.';
  FileReader reader2 = FileReader();
  
  _startFilePicker() async {
  InputElement uploadInput = FileUploadInputElement();
  uploadInput.click();
  
  
  uploadInput.onChange.listen((e) {
    // read file content as dataURL
    final files = uploadInput.files;
    if (files.length == 1) {
      final file = files[0];
      FileReader reader =  FileReader();
  
      reader.onLoadEnd.listen((e) {
                  setState(() {
                    uploadedImage = reader.result;
                    theChosenImg = files[0];
                  });
      });
      reader.readAsArrayBuffer(file);
      reader2.readAsDataUrl(file);
    }
  });
  }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: ListView(
            children: &lt;Widget&gt;[
              Column(
                children: &lt;Widget&gt;[
                  SizedBox(
                    height: 30,
                  ),
                  Container(
                    height: 500,
                    width: 800,
                    child: Center(
                      child: uploadedImage == null
                  ? Container(
                      child: Text(dispText),
                    )
                  : Container(
                      child: Image.memory(uploadedImage),
                    ),
                    ),
                  ),
              SizedBox(height: 20,),                
                  CupertinoButton(
                    color: Colors.green,
                    child: Text("Choose"),
                    onPressed: (){
                      _startFilePicker();
                    },
                  ),
  
              SizedBox(height: 50,),
               CupertinoButton(
                color: Colors.green,
                child: Text("Upload"),
                onPressed: (){
                  PhotoCls().upload(reader2.result);
                },
              ),
  
  
  
                ],
              ),
  
  
  
            ],
          ),
        ),
  
      );
    }
  }
  </code></pre>
  
  <p><strong>Class with The MEDTHOD WHICH SENDS THE IMAGE</strong></p>
  
  <pre><code>import 'dart:io';
  import 'package:path/path.dart';
  import 'package:async/async.dart';
  import 'package:http/http.dart' as http;
  import 'dart:convert';
  
  
  
    class PhotoCls {
   String phpEndPoint = "http://IPv4 address/testlocalhost/uploadPicture.php";
  
  
  upload(File imageFile) async {    
        // open a bytestream
        var stream = new http.ByteStream(DelegatingStream.typed(imageFile.openRead()));
        // get file length
        var length = await imageFile.length();
  
        // string to uri
        var uri = Uri.parse(phpEndPoint);
  
        // create multipart request
        var request = new http.MultipartRequest("POST", uri);
  
        // multipart that takes file
        var multipartFile = new http.MultipartFile('file', stream, length,
            filename: basename(imageFile.path));
  
        // add file to multipart
        request.files.add(multipartFile);
  
        // send
        var response = await request.send();
        print(response.statusCode);
  
        // listen for response
        response.stream.transform(utf8.decoder).listen((value) {
          print(value);
        });
      }
  
  
  
    }
  </code></pre>