Upload images to REST API with Flutter using http

Flutter is the new tool in the market and it definitely has a promising future. Flutter popularity can be analyzed by the number of application being published to Play Stores, made up of flutter.

I was also new to flutter when I was trying to integrate REST APIs in flutter and I had to send product images to APIs but it was hard to find suitable, easy to understand and to the point guide on how to do that. I have found at the way for uploading images by creating MultiPart Request using dart http Package. I am going to explain this process by keeping it as simple as I can. Lets Start with Adding the http Package to your App.

http | Dart Package

Run the Follow command in your project directory terminal:

$ dart pub add http

For getting image from device Gallery or camera, I used the Image Picker package.

image_picker | Flutter Package

Run the Follow command in your project directory terminal:

$ dart pub add image_picker

import image picker package in you dart file:

import

Here is the code to get Image from gallery.

Future<File> getImage() async {
final ImagePicker _picker = ImagePicker();
// Pick an image
final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
//TO convert Xfile into file
File file = File(image!.path);
//print(‘Image picked’);
return file;
}

Now we have Image picked from gallery. Import http package in your dart file where MultipartRequest will be created as:

import 'package:http/http.dart' as http;

Then Create Multipart Request in which I am going to send My Image with Product Id as field.

var request = 
http.MultipartRequest(‘POST’, Uri.parse(urlToInsertImage));

It requires method which is POST here and the URL of the API. MultipartRequest can contain Fields (usually Strings) and Files(File can be of any kind). Here I am uploading product image with productId, so I am adding a field of ProductId.

request.fields[‘ProductId’] = productId.toString();

Last step is to add file in MultipartRequest and send it to server. Code is below:

request.files.add(http.MultipartFile.fromBytes(‘picture’, File(file!.path).readAsBytesSync(),filename: file!.path));

Here file is the Image File which I am getting from the method mentioned above for image picked. MultipartFile supports more ways too for creating file acceptable for MultipartRequest e.g MultipartFile.fromPath(‘file’, filePath) and http.MultipartFile.fromBytes(‘file’, FileAsBytes, fileName).

After adding our file to MultipartRequest, we can send request to server and handle the responce accordingly.

var res = await request.send();

The Overall code for the multipart request is:

var request = http.MultipartRequest(‘POST’, Uri.parse(urlInsertImage));request.fields[‘ProductId’] = productId.toString();request.files.add(http.MultipartFile.fromBytes(‘picture’, File(file!.path).readAsBytesSync(),filename: file!.path));var res = await request.send();

I hope its super easy for beginners to do this request and integrate complex APIs quickly. for More Github