How do I display an image in a Flutter Web using Image.memory when I only have a Stream<List<int>>? data-type?
If I use the Uint8List? I am able to load the file using the Flutter Image.memory method but I am am unable to use the Uint8List to use the http.MultiPartFile.fromBytes() because it only accepts a List.
This part is incorrect. Uint8List
implements the List<int>
interface and can be passed to any functions/constructors that want a List<int>
. Therefore, you can use the MultipartFile.fromBytes
constructor. If you saw a typing error, it was likely because you didn't promote the nullable type to a non-nullable one.
MultipartFile.fromBytes('files', file.bytes!)
rginsberg549
Updated on December 01, 2022Comments
-
rginsberg549 over 1 year
Overview:
I am using the file-picker library to allow the user to select one or multiple files from their device. The selected files will have the ability to be previewed before the selected files will be sent for storage using HTTP/Multipart.
Problem: The file-picker library returns a
List\<PlatformFile>
and I have access to either aUint8List?
OR aStream<List\<int>>?
Setting
readStream
andwithData
to both True does not return both theUint8List?
ANDStream<List\<int>>?
- This would be helpful in my opinion.If I use the
Uint8List?
I am able to load the file using the FlutterImage.memory
method but I am unable to use theUint8List
to use thehttp.MultiPartFile.fromBytes()
because it only accepts aList<int>
.Alternatively, if I use the
Stream<List<int>>?
I am able to usehttp.MultipartFile()
and pass in theStream<List\<int>>?
but then I am unsure of how to generate a preview of the file/image using aStream<List\<int>>?
Things I have considered but not sure how to accomplish
1- Is there a way convert a
Uint8List?
to aList<int>?
2- Is there an alternative method for sending files using
Uint8List?
3- Is there a way to receive both the
Uint8List?
ANDStream<List\<int>>?
from the file-picker result?I have copied a few snippets below but if you need more information please let me know. Thank you for your help in advance :)
Flutter Widget to Select Files
Text( "Open the File Browser", style: TextStyle( color: kPrimaryBlue, fontWeight: FontWeight.bold, fontSize: 20), ), onPressed: () async { try { FilePickerResult? result = await FilePicker.platform.pickFiles( type: FileType.any, allowMultiple: true, withReadStream: false, withData: true, ); if (result != null) { for (var file in result.files) { files.add(file); } } else { print('No Files Were Selected'); } } catch (ex) { print(ex); }
HTTP Request to send files to endpoint:
var uri = Uri.parse('https://hookb.in/7ZGKQE8ZDOua99D3RwMD'); var request = http.MultipartRequest('POST', uri);
for (var file in files) { request.files.add(http.MultipartFile( "files", file.readStream!, file.size!, filename: file.name)); } var response = await request.send(); if (response.statusCode == 200) { print('Uploaded!'); setState(() { files = []; });
Widget to display image/file before submitting:
Image( image: Image.memory(files[index].bytes);