Flutter Web: How Do You Compress an Image/File?

Question

Flutter Web is currently in beta, so there's a lack of available info/resources on how to do this.

I could not find any flutter packages compatible with web to do this. Any tips?

Here's my code:

uploadImage() async {
File file;
FileReader fileReader = FileReader();
InputElement uploadInput = FileUploadInputElement();
uploadInput.click();
uploadInput.onChange.listen((event) {
  file = uploadInput.files.first;
  fileReader.readAsDataUrl(file);
  fileReader.onLoadEnd.listen((event) {
    if (file.type == "image/jpg" || file.type == "image/jpeg" || file.type == "image/png") {
      String base64FileString = fileReader.result.toString().split(',')[1];

      //COMPRESS FILE HERE

      setState(() {
        userImgFile = file;
        userImageByteMemory = base64Decode(base64FileString);
      });
    } else {
      CustomAlerts().showErrorAlert(context, "Image Upload Error", "Please Upload a Valid Image");
    }
  });
});
}

If you can setup an MRE in dartpad, I can help you based on this [post](https://stackoverflow.com/questions/14672746/how-to-compress-an-image-via-javascript-in-the-browser) — Abhilash Chandran, Mar 17 '20 at 21:24
Did you find a solution to this? I need to know how to do this on web... — Axes Grinds, Jun 26 '20 at 15:51
@AxesGrinds This answer should help you https://stackoverflow.com/questions/46515679/flutter-firebase-compression-before-upload-image — Corentin Houdayer, Mar 30 '21 at 07:13

Mukai Selekwa · Answer 1 · 2021-04-05T00:48:37.067

-1

For the time being, I will be creating a cloud function to resize/compress the file when it is uploaded to firebase storage on the backend as workaround.

Here's a link on how to do that for those needing a workaround until this is resolved: https://www.youtube.com/watch?v=OKW8x8-qYs0

EDIT

The image picker library has been updated. The solution can be found here

edited Apr 05 '21 at 00:48

answered Mar 17 '20 at 19:15

Mukai Selekwa

99
1
6

this does not solve the problem at hand, this is not a flutter/dart solution. – Bhagyesh Jan 04 '21 at 21:52

Flutter Web: How Do You Compress an Image/File?

1 Answers1