Image Upload Request using http package in flutter

Hello flutter programmers!. Recently I have completed flutter newspaper app for a famous newspaper in my country. In the development I had to upload an bank slip image from the device camera and send it to the API. For that whole process I had to find a effective way to do this both taking image part and the upload part. These are the main steps that I am going to do.

1. Get image image from the camera
2. Upload the image

Need Packages

To complete both steps we need some dart libraries

1. Get Image from the gallery or camera/both- image_picker 0.6.7+7

Go to above link and see the dart syntax for this flutter library.We are using this package to get the image from camera/gallery as file image.You have to add that package into pubspec.yaml file in your flutter project.

2. upload the image- http:0.12.2 Or you can use dio:3.0.10

I think You have already know about these two packages. I am upload image using http package in this article and also hoe to provide another article about dio too.You have to add that package into pubspec.yaml file in your flutter project.

Get Image from Gallery Or camera/both

you can read the documentation for the image picker package in pub.dev get the idea about getting image from the device.I have created some example application according to this implementation.The UI for the image upload as follows.

Main Screen

For the first step the code as follows. I have created only one screen for this demo application and used floating action button to get the image from the device camera.You can customize that option into device gallery.

First I created empty file named for image and get the image from the device camera as follows.

Future getImage() async {
  var image = await ImagePicker.pickImage(source: ImageSource.camera);

  setState(() {
    selectedImage = image;
  });
  //return image;
}

After assigned the image value the whole widget will be updated according to the new image value.The future builder loads the memory image into the layout.

2)Upload the image

This is the most important step.I am going to upload the image with other parameters.

This is the sample request that I am going to create here.

{
  "name":"test",
  "email":"test@gmail.com",
  "id":"12345",
  "file": image
}

Here you can see most of the body parameters are Strings,But we need to send the image file named as “file”.I had to send the image file with other parameters. So What we need do to?

The answer is simple.We need to create multipart request using http package in flutter.What is multipart request?

A HTTP multipart request is a HTTP request that HTTP clients construct to send files and data over to a HTTP Server. It is commonly used by browsers and HTTP clients to upload files to the server.

So I created the request function as follows.

First You need to create the HTTP multi part request as above.After That you need to add the essential headers.I have added bearer token but It is optional.But you need to add the content type as “multipart/form-data”.

I have mentioned some test data for you.if you are using this You need to add your API/Service URL with relevant endpoints.

I am going to add the previous image file directly into this request here.

request.files.add(http.MultipartFile(                                  'file',                                   file.readAsBytes().asStream(),                                   file.lengthSync(),
filename: filename,                                 
contentType: MediaType('image','jpeg'),                               ));

The request will add the image file data named “file” here.It is necessary to define the content image type as jpeg otherwise your service API doesn’t get the file as image file.After that I wanted to add all headers and other body parameters to the request that I wanted to send.Ok all basic steps are done up to now.How do trigger button to send those image data?

Before sending the image You need to find the image path from using the image file.For that purpose we have to use path 1.7.0 package.

import path package to your dart file which is need to get the image file name.In my sample app it is main.dart file.OK Finally we want to tap a button to send that request.for my sample app This is the function for the button

onTap(){
Service service=Service();
  service.submitSubscription(file:selectedImage,filename:basename(selectedImage.path),token:"testToken");
}

First I created service object and after using that object I have tried to send the request. I have to use the basename() function to get the image file path.That image file is memory image file.To use that function you need to import the path package which I have mentioned before. Add this into your button function.After you select image hit the upload button.This will work successfully.

OK.Hope you get the basic idea about image uploading in flutter using HTTP package.There are many ways to do this.For an example the HTTP multipart request has many type of constructors.You can customize this as you want.

Thanks for reading this article. Be sure to clap/recommend as much as you can and also share with your friends. It means a lot to me.

Also, Let’s become friends on LinkedIn and Github.