Flutter: How to Convert bytes to a File in order to upload the file to Firestore

Question

I am trying to watermark an image with the text in flutter and then need to upload that watermarked Image on the Firestore. When I try to watermark and store the bytes to a File I am getting an error.

File: '��

Please help me to solve this issue. Thank you!

Here is the code part.

  _originalImage = ui.decodeImage(croppedFile.readAsBytesSync());
  ui.drawString(_originalImage, ui.arial_24, 100, 120, 'Hello World');
    // Store the watermarked image to a File
   List<int> resImage = ui.encodeJpg(_originalImage);
   print(resImage);
    setState((){
      _watermarkedImage = File.fromRawPath(Uint8List.fromList(wmImage));
      print(_watermarkedImage);
    });
  imageFile = _watermarkedImage;

And when I print the result before storing the bytes to a File, I am getting the following bytes values.

255, 216, 255, 224, 0, 16, 74, 70, 73, 70, 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 255, 219, 0, 132, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 255, 192, 0, 17, 8, 2, 37, 2, 47, 3, 1, 17, 0, 2, 17, 1, 3, 17, 1, 255, 196, 1, 162, 0, 0, 1, 5, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 16, 0, 2, 1, 3, 3, 2, 4, 3, 5, 5, 4, 4, 0, 0, 1, 125, 1, 2, 3, 0, 4, 17, 5, 18, 33, 49, 65, 6, 19, 81, 97, 7, 34, 113, 20, 50, 129, 145, 161, 8, 35, 66, 177, 193, 21, 82, 209, 240, 36, 51, 98, 114, 130, 9, 10, 22, 23, 24, 25, 26, 37, 38, 39, 40, 41, 42, 52, 53, 54, 55, 56, 57, 58, 67, 68, 69, 70, 71, 72, 73, 74, 83, 84, 85, 86, 87, 88, 89, 90, 99, 100, 101, 102, 10

score 4 · Answer 1 · answered Feb 28 '21 at 15:33

4

As Suggested by Antonin you need to load the file path. use this to store your bytes in a temp file and then load the file

final directory = await getTemporaryDirectory();
final filepath = "abc.png";
File imgFile = File(filepath);
imgFile.writeAsBytes(bytes); //your image bytes

and now use the file

answered Feb 28 '21 at 15:33

Ganesh Bhat

246
4
19

I don't have a file path. All I have is the bytes as a result(Please check my question above). Now I need to convert the bytes to file. Please help me to convert the bytes to file. So that I can upload the file to the Firestore. – Ahamed Ameen Mar 01 '21 at 05:37
I have given the example of creating the file. filepath can be set to anything. that is the name in which file will be created – Ganesh Bhat Mar 01 '21 at 07:23
Okay, will try to implement the code! What is the use of this "final directory = await getTemporaryDirectory();" Also I am getting this error - "Unhandled Exception: FileSystemException: Cannot open file, path = 'abc.png' (OS Error: Read-only file system, errno = 30)" – Ahamed Ameen Mar 01 '21 at 08:00
https://stackoverflow.com/questions/51607002/flutter-unable-to-create-directory-os-error-read-only-file-system – Eric Mar 01 '21 at 09:54
Yes.. as said by Eric, please use path provider plugin – Ganesh Bhat Mar 01 '21 at 13:32
fetch the image URL of the uploaded image and display – Ganesh Bhat Mar 02 '21 at 06:25

score 1 · Answer 2 · answered Mar 04 '21 at 05:20

This is how I solved the issue with the help of Ganesh Bhat.

  _originalImage = ui.decodeImage(imageFile.readAsBytesSync());
  ui.drawString(_originalImage, ui.arial_48, 250, 340, 'Hello World');
    // Store the watermarked image to a File
   wmImage = ui.encodeJpg(_originalImage);
   Directory appDocumentsDirectory = await getApplicationDocumentsDirectory();
   String appDocumentsPath = appDocumentsDirectory.path; 
   filePath = '$appDocumentsPath/abc.jpg';
   File imgFile = File(filePath);
   imgFile.writeAsBytes(wmImage);
   print(imgFile);
   imageFile = imgFile;

Eric · Answer 3 · 2021-02-28T08:08:13.003

0

Somewhere in your code you have an uninitialized object (null) on which path method is being executed which results in error. Check if all your filesystem objects are properly initialized by debugging or logging them out to a console.

Try checking wmImage and Uint8List.fromList(wmImage) what they're pointing to - my guess is one of those entities have null assigned.

edited Feb 28 '21 at 08:08

answered Feb 28 '21 at 08:03

Eric

1,685
1
17
32

score -1 · Answer 4 · answered Feb 28 '21 at 08:00

-1

You are trying to get a file from a path but you give it bytes, you need to either load the correct path or convert bytes to a file

answered Feb 28 '21 at 08:00

Antonin GAVREL

9,682
8
54
81

1

So how do I convert bytes to a file – Ahamed Ameen Feb 28 '21 at 09:44

Flutter: How to Convert bytes to a File in order to upload the file to Firestore

4 Answers4