How to upload images to server in Flutter?

Question

I would like to upload a image, I am using http.Client() for making requests,

static uploadImage(String id, File file) {
  var httpClient = createHttpClient();

  Map<String, String> headers = new Map<String, String>();
  headers.putIfAbsent("Authorization", () => "---");
  headers.putIfAbsent("Content-Type", () => "application/json");

  var body=new List();
  body.add(id.)
  httpClient.post(URL_UPLOADIMAGE,headers: headers,body: ,encoding: )
}

What should be the body and encoding part for the request ?

You should be able to use the same method from [dart question](https://stackoverflow.com/questions/22600488/how-can-i-upload-a-pdf-using-darts-httpclient)! — German Saprykin, Jun 30 '17 at 09:14
that did it, however that answer is from older version of library. — karan vs, Jun 30 '17 at 11:12
request.files.add( new http.MultipartFile.fromBytes("file", file.readAsBytesSync(), filename: "Photo.jpg", contentType: new MediaType("image", "jpg"))); //this works now. — karan vs, Jun 30 '17 at 11:13
@karanvs :- I want to add more to this so how to add other parameters with this and user registry data, so how to add that, and can you give an example — Paresh Mangukiya, Jun 17 '20 at 04:04

Shyju M · Answer 1 · 2019-06-13T09:31:10.937

63

Use MultipartRequest class

Upload(File imageFile) async {    
    var stream = new http.ByteStream(DelegatingStream.typed(imageFile.openRead()));
      var length = await imageFile.length();

      var uri = Uri.parse(uploadURL);

     var request = new http.MultipartRequest("POST", uri);
      var multipartFile = new http.MultipartFile('file', stream, length,
          filename: basename(imageFile.path));
          //contentType: new MediaType('image', 'png'));

      request.files.add(multipartFile);
      var response = await request.send();
      print(response.statusCode);
      response.stream.transform(utf8.decoder).listen((value) {
        print(value);
      });
    }

name spaces:

import 'package:path/path.dart';
import 'package:async/async.dart';
import 'dart:io';
import 'package:http/http.dart' as http;

edited Jun 13 '19 at 09:31

answered Apr 04 '18 at 07:22

Shyju M

8,181
3
42
46

2

My uploaded file is always `application/octet-stream`. Is there a way to get the right content type from the file and how can I set it in the request? – alex351 Apr 11 '19 at 08:01
2

where do I import the MediaType class from – nivla360 Feb 08 '20 at 20:22
3

I figured I just had to `import 'package:http_parser/http_parser.dart';` – nivla360 Feb 08 '20 at 20:26
If I have multiple `multipartFile`, how should write? – John Joe Apr 19 '20 at 14:24
4

DelegatingStream.typed is deprecated. – GunJack Jun 28 '20 at 07:49
3

USE `var stream = new http.ByteStream(_image.openRead()); stream.cast();` INSTEAD of `DelegatingStream.typed` – Pratik Butani Jan 19 '21 at 09:50
When I try this code it is giving me `"image":["No file was submitted."]`. Any ideas on how to solve that ? – Davrick Mar 13 '21 at 14:30
@nivla360 You saved me mate. Thanks – Bright Mar 19 '21 at 19:26
How can I convert back to image. Please help me – User Feb 22 '22 at 05:47
```DelegatingStream.typed(imageFile.openRead()) ``` is depreciated. – Saeed May 04 '22 at 17:21

score 29 · Answer 2 · answered Jun 13 '19 at 02:32

29

The easiest way is to use the http library,

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

_asyncFileUpload(String text, File file) async{
   //create multipart request for POST or PATCH method
   var request = http.MultipartRequest("POST", Uri.parse("<url>"));
   //add text fields
   request.fields["text_field"] = text;
   //create multipart using filepath, string or bytes
   var pic = await http.MultipartFile.fromPath("file_field", file.path);
   //add multipart to request
   request.files.add(pic);
   var response = await request.send();

   //Get the response from the server
   var responseData = await response.stream.toBytes();
   var responseString = String.fromCharCodes(responseData);
   print(responseString);
}

answered Jun 13 '19 at 02:32

Raj Yadav

7,724
6
31
29

1

Hello , its giving me Unhandled Exception: SocketException: OS Error: Broken pipe, errno = 32 , please suggest – Jon Stark Jul 26 '19 at 09:01
Please check the URL. Make sure you're able to post your file data from Postman – Raj Yadav Jul 27 '19 at 13:36
How do I receive it in my .php? – Santiago Arteaga Oct 24 '19 at 05:08
I am not much good at PHP but you can get files using $_FILES["file_field"] – Raj Yadav Nov 10 '19 at 07:16
@Santiago if am too late to answer you then it can help some one else. On the server side in my case i accepted it as a normal file from the HTML form and everything went well. – Angelwise Aug 10 '20 at 04:20

score 11 · Answer 3 · answered Jul 13 '18 at 09:33

11

Checkout the body in submitForm() method.

File _image;

Future cameraImage() async {
  var image = await ImagePicker.pickImage(
    source: ImageSource.camera,
    maxHeight: 240.0,
    maxWidth: 240.0,
  );

  setState(() {
    _image = image;
  });
}

submitForm() async {
  final response = await http.post(
    uri,
    headers: {
      AuthUtils.AUTH_HEADER: _authToken
    },
    body: {
      'user_id': userId
      'photo': _image != null ? 'data:image/png;base64,' +
          base64Encode(_image.readAsBytesSync()) : '',
    },
  );

  final responseJson = json.decode(response.body);

  print(responseJson);
}

answered Jul 13 '18 at 09:33

Aravind Vemula

1,332
14
21

How do I receive it in my .php? – Santiago Arteaga Oct 24 '19 at 05:07
@Santiago you need to decode and save. you can find solution here https://stackoverflow.com/questions/11511511/how-to-save-a-png-image-server-side-from-a-base64-data-string?answertab=oldest#tab-top – Aravind Vemula Oct 24 '19 at 09:46
1

Base64 is easy but very bandwidth expensive... upto 30% rise in data to send... wouldnt recommend – emanuel sanga Sep 21 '20 at 17:10

score 9 · Answer 4 · edited Mar 15 '20 at 21:13

9

I have tried all the above but none worked for me to upload a file to a server.

After a deep search, I got a plugin the same as Dio.

The following code uploads a file to a server.

uploadFileFromDio(UserProfile userProfile, File photoFile) async {
    var dio = new Dio();
    dio.options.baseUrl = url;
    dio.options.connectTimeout = 5000; //5s
    dio.options.receiveTimeout = 5000;
    dio.options.headers = <Header Json>;
    FormData formData = new FormData();
    formData.add("user_id", userProfile.userId);
    formData.add("name", userProfile.name);
    formData.add("email", userProfile.email);

    if (photoFile != null &&
        photoFile.path != null &&
        photoFile.path.isNotEmpty) {
      // Create a FormData
      String fileName = basename(photoFile.path);
      print("File Name : $fileName");
      print("File Size : ${photoFile.lengthSync()}");
      formData.add("user_picture", new UploadFileInfo(photoFile, fileName));
    }
    var response = await dio.post("user/manage_profile",
        data: formData,
        options: Options(
            method: 'POST',
            responseType: ResponseType.PLAIN // or ResponseType.JSON
            ));
    print("Response status: ${response.statusCode}");
    print("Response data: ${response.data}");
  }

edited Mar 15 '20 at 21:13

DrB

274
1
3
14

answered Dec 24 '18 at 09:23

TejaDroid

6,239
4
30
37

Do you have any problems with content type? If I upload an image, I have to set the content type manually. – alex351 Apr 10 '19 at 12:27
"content-type" is basically set in header of api, so you have to add a header param as content-type whatever set by api developer there Some common examples of content types are “text/plain”, “application/xml”, “text/html”, “application/json”, “image/gif”, and “image/jpeg”. – TejaDroid Apr 10 '19 at 12:59
I am sending files (images, documents etc) from mobile device to Node.js API, which uses multer for storing files to MongoDB. I also have a web application which communicates with the same API. If I upload the image over my mobile app and Dio plugin, the mime-type on the server and in my mobgodb is "application/octet-stream". If I upload it over my web app, the mime-type is "image/jpeg". I do not need to set content-type manually in my web app. – alex351 Apr 10 '19 at 13:17
I am uploading the image to the server but when I try to open an image that say's image is empty? – Jigar Fumakiya Jun 20 '19 at 06:18
How do I receive it in my .php? – Santiago Arteaga Oct 24 '19 at 05:07
I'm not sure but may be you have to check the receiving request in your `.php` with `"$_FILES"`, there you find all images from request with param `user_profile` – TejaDroid Oct 24 '19 at 07:31
the method add is not defined !! – evals Nov 24 '19 at 14:35
`add` method come from `FormData` class and its define in `dio`. So, please add latest dependancy of `dio` in your `pubspec.yaml` and then run `Packages upgrade`. – TejaDroid Nov 26 '19 at 07:05

score 6 · Answer 5 · answered Mar 13 '20 at 18:10

I found a working example without using any external plugin , this only uses

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

Code

var stream =
        new http.ByteStream(DelegatingStream.typed(imageFile.openRead()));
    // get file length
    var length = await imageFile.length(); //imageFile is your image file
    Map<String, String> headers = {
      "Accept": "application/json",
      "Authorization": "Bearer " + token
    }; // ignore this headers if there is no authentication

    // string to uri
    var uri = Uri.parse(Constants.BASE_URL + "api endpoint here");

    // create multipart request
    var request = new http.MultipartRequest("POST", uri);

  // multipart that takes file
    var multipartFileSign = new http.MultipartFile('profile_pic', stream, length,
        filename: basename(imageFile.path));

    // add file to multipart
    request.files.add(multipartFileSign);

    //add headers
    request.headers.addAll(headers);

    //adding params
    request.fields['loginId'] = '12';
    request.fields['firstName'] = 'abc';
   // request.fields['lastName'] = 'efg';

    // send
    var response = await request.send();

    print(response.statusCode);

    // listen for response
    response.stream.transform(utf8.decoder).listen((value) {
      print(value);

    });

When I use your code it gives me error saying `"image":["No file was submitted."]`. Any ideas on how to solve that ? — Davrick, Mar 13 '21 at 14:34

score 6 · Answer 6 · answered Apr 22 '20 at 17:36

6

Please try below solution

Future<String> uploadImageHTTP(file, url) async {

  var request = http.MultipartRequest('POST', Uri.parse(url));
  request.files.add(await http.MultipartFile.fromPath('picture', file.path));
  var res = await request.send();
  return res.reasonPhrase;

}

answered Apr 22 '20 at 17:36

Boban

341
1
4
7

I got this error. A value of type 'String?' can't be returned from the function 'uploadImageHTTP' because it has a return type of 'Future'. – Umashankar Das Dec 01 '21 at 11:06
consider null safety changes – Boban Dec 02 '21 at 12:23

score 5 · Answer 7 · answered Jun 30 '17 at 15:04

5

Consider using Flutter's Firebase Storage plugin -- it has features that could be useful for uploading large image files on a mobile connection.

I wrote the plugin, contributions and feedback are welcome!

answered Jun 30 '17 at 15:04

Collin Jackson

97,818
28
207
143

Thanks, I was able to do it with http client library – karan vs Jul 01 '17 at 15:41
"Use a Firebase plugin (that I wrote)", is not an answer to "How to upload image in Flutter?". – Jeppe Jun 22 '21 at 20:35

score 4 · Answer 8 · answered May 30 '19 at 20:06

First of all choose your image from gallery or Camera

File _image;
Future _getImage() async {
var image = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image = image;
});
}

Now call the below function on button click or inside the _getImage() function. With the file i'm uploading other fields also you see in the saveInAttendance()

Don't forget to import package :

import 'package:dio/dio.dart';
import 'package:path/path.dart';

Future saveInAttendance( BuildContext context,String entryType,String mode) async {
        Dio dio = new Dio();
        FormData formData = new FormData(); // just like JS
        formData.add("inimageFile", new UploadFileInfo(_image, basename(_image.path)));
        formData.add("compID",2);
        formData.add("company_id",2);
        formData.add("EntryType", entryType);
        formData.add("emp_code", 5);
        formData.add("Mode",mode);
        formData.add("location",""+_startLocation.latitude.toString()+"-"+_startLocation.longitude.toString());
        dio.post(url_save_attendance, data: formData, options: Options(
            method: 'POST',
            responseType: ResponseType.json // or ResponseType.JSON
        ))
            .then((r) {
          setState(() {
            var data = json.decode(r.toString());
            if(data["apiMessage"].contains('Saved')){
              warningAlert("Attendance Saved", "Your attendance saved Successfully",context);
            }
          });
        }).catchError(print);
      }

For more Info you can visit Here

score 1 · Answer 9 · edited Dec 31 '19 at 12:17

my working code below, based on @TejaDroid's sample, it upload one image via the AWS Gateway API with a lambda function behind to store the image into S3.

uploadImageWithhttp(File imageFile, int serialno) async {
    var postBody= {
        'username': 'test@gmail.com',  
        "productid": "1000123",             //TODO
        "imageno": serialno.toString(), 
        'image': imageFile != null ? base64Encode(imageFile.readAsBytesSync()) : '',
    };

    final response = await http.post(
      constAWSAPIGateway_UploadImage[CONST_API_STAGE],
      headers: {
        //AuthUtils.AUTH_HEADER: _authToken
        'Content-Type' : 'application/json',
      },
      body: json.encode(postBody),
    );

    final responseJson = json.decode(response.body);

    print(responseJson);
  }

score 1 · Answer 10 · answered May 02 '20 at 11:52

1

to get Body from request Instead of

response.stream.transform(utf8.decoder).listen((value) {
    print(value);
  });

I use:

String body=await response.stream.bytesToString()

answered May 02 '20 at 11:52

Shojaeddin

1,458
1
13
14

score 0 · Answer 11 · edited Jun 19 '19 at 09:42

Import dio, image_picker library

    Future _onGalleryPressed() async {
            Future<File> image = ImagePicker.pickImage(source: ImageSource.gallery);
            setState(() {
              this._imageFile = image;
            });
            File img = await image;
            Navigator.of(context).pop();
            if (img != null) {
              //API CALL
              try {
                FormData formData = new FormData.from({"file": path});
                var url = backendUrl + "/upload-image";
                var token = await _getMobileToken();
                Map<String, String> headers = {
                  'Authorization': 'Bearer $token',
                  "Content-Type": "multipart/form-data",
                  "X-Requested-With": "XMLHttpRequest"
                };
                await dio.post(url,
                  data: formData,
                  options: Options(
                      method: 'POST',
                      headers: headers,
                      responseType: ResponseType.json // or ResponseType.JSON
                      ));
                Navigator.pop(context);
              } catch (e) {}
            }
          }

How do I receive it in my .php? – Santiago Arteaga Oct 24 '19 at 05:08 — Santiago Arteaga, Oct 24 '19 at 05:08

score 0 · Answer 12 · answered Jan 19 '21 at 10:33

0

If you want to upload it as a binary file.

  static uploadFile(File imageFile) async {
    final response = await http.post(postURL, body: imageFile.readAsBytesSync());
    return json.decode(response.body);
  }

Thank you

answered Jan 19 '21 at 10:33

Pratik Butani

56,749
54
254
407

score 0 · Answer 13 · answered Jun 07 '21 at 15:40

updateProfile() async {
        try {
          if (_formKey.currentState.validate()) {
            _formKey.currentState.save();
            var dio = new Dio();
            var formData = FormData.fromMap({
              'name': name,
              'con_person_name': concernedPersonName,
              'email': email,
              'phone': phoneNumber,
              'password': password,
              'token': token,
              'user_type': '3',
              'license_no': licenceNumber,
              'gstno': gstNumber,
              'address': address,
              'hospital_id': '102'
              'image': await MultipartFile.fromFile(_image?.path,
            filename: _image.path.split('/').last ?? 'image.jpeg'),
           
            });
            var response = await dio.post('$SERVER_ADDRESS/api/doctorregister',
                data: formData);
            print(response.statusCode);
            print(response.data);
          }
        } catch (error) {
          print(error.toString());
        }
      }

Along with your answer please. provide an explanation – Thavas Antonio Jun 07 '21 at 18:53 — Thavas Antonio, Jun 07 '21 at 18:53

score 0 · Answer 14 · answered Jun 10 '21 at 18:08

I have checked about it at multiple places finally i found a solution -

                    var objToSend = {
                          "file": await MultipartFile.fromFile(
                                file.path,
                                filename: filename,
                             ),
                    };

                    FormData formData = FormData.fromMap(objToSend);
                   
                    print(formData.files.toString());
                    Dio dio = new Dio();

                    await dio
                        .post(_toSend,
                            data: formData,
                            options: Options(
                               method: 'POST',
                               headers: <String, String>{
                                  "Content-Type": "application/json",
                                  "Access-Control-Allow-Origin": "*",
                                  "Authorization": 'Bearer ' + token
                                 },
                            ))
                        .whenComplete(() {
                             print('uploaded');
                         }).catchError((onError) {
                             print('failed');
                         });

How to upload images to server in Flutter?

14 Answers14

Linked

Related