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); }); } }
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.
Response responseData = await http. get(imageUrl); Uint8List imageBytes = responseData. bodyBytes; this works on device and web too, hope it can help.
File.fromRawPath(Uint8List uint8List);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With