How do I display an image in a Flutter Web using Image.memory when I only have a Stream>? data-type?

Question

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 a Uint8List? OR a Stream<List\<int>>?

Setting readStream and withData to both True does not return both the Uint8List? AND Stream<List\<int>>? - This would be helpful in my opinion.

If I use the Uint8List? I am able to load the file using the Flutter Image.memory method but I am unable to use the Uint8List to use the http.MultiPartFile.fromBytes() because it only accepts a List<int>.

Alternatively, if I use the Stream<List<int>>? I am able to use http.MultipartFile() and pass in the Stream<List\<int>>? but then I am unsure of how to generate a preview of the file/image using a Stream<List\<int>>?

Things I have considered but not sure how to accomplish

1- Is there a way convert a Uint8List? to a List<int>?

2- Is there an alternative method for sending files using Uint8List?

3- Is there a way to receive both the Uint8List? AND Stream<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);

score 0 · Accepted Answer · answered Apr 30 '21 at 21:10

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!)

How do I display an image in a Flutter Web using Image.memory when I only have a Stream>? data-type?

1 Answers1