Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to convert Uint8List image to File Image for upload in flutter web

Tags:

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 File) which takes a file and uploads it to the server. like so functionName(File imageToSend).

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:

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

when I use the variable uploadedImage the error is Expected a value of type 'File', but got one of type 'String' then I decided to use theChosenImg from theChosenImg = files[0];, this also tell me that the datatypes mismatch.

Is it possible for me to convert the Uint8List datatype to File?

UPDATED WITH 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() => _FrontUiState(); }  class _FrontUiState extends State<FrontUi> {  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: <Widget>[             Column(               children: <Widget>[                 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);               },             ),                  ],             ),              ],         ),       ),      );   } } 

Class with The MEDTHOD WHICH SENDS THE IMAGE

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);       });     }      } 
like image 967
Norbert Avatar asked Nov 10 '19 23:11

Norbert


People also ask

What is Uint8List Flutter?

Uint8List class Null safety. A fixed-length list of 8-bit unsigned integers. For long lists, this implementation can be considerably more space- and time-efficient than the default List implementation.

How do I get a Flutter Uint8List from a network image?

Response responseData = await http. get(imageUrl); Uint8List imageBytes = responseData. bodyBytes; this works on device and web too, hope it can help.


1 Answers

File.fromRawPath(Uint8List uint8List); 
like image 160
Nathan Mersha Avatar answered Oct 02 '22 15:10

Nathan Mersha