Upload multiple images and compress image in Flutter

Sokserey PHON
Feb 26, 2021

--

In this article, I will demonstrate how to upload multiple images and compress image in your Flutter App.

There are some required libs in order to solve this problem:

multi_image_picker

flutter_image_compress

dio

path_provider

flutter_absolute_path

Get images from gallery

Load assets from gallery with multi_image_picker

Convert List<Asset> to List<File>

From multi_image_picker lib, it returns List<Asset>. However, flutter_image_compress can compress File. Letโ€™s convert List<Asset> to List<File>

Convert List<Asset> to List<File>

Image Compress Service

Letโ€™s create image_compress_service to generate image path and compress image.

Generate FormData

In order to upload file, we need to generate it to FormData

Generate Form Data

Upload Images to Server

After generating FormData from above method, here is the final step.

Finally, we can upload compressed images to the server successfully. Please give me some claps ๐Ÿ‘๐Ÿ‘๐Ÿ‘๐Ÿ‘ if you like this article.

Check out full source code here: full_source_code

--

--

Sokserey PHON

Just a young dumb dude who loves programming. Senior Mobile Developer (Flutter/React Native)