How to post image to server in flutter

Question

I wanted to post some data to my laravel server and I am able to send the text data to the server but I can not send my image to the server. Please take a look at what I did.

My model class:

class Articles{
  int id;
  String title;
  String image;
  String author;
  toJson(){
    return {
      'id' : id.toString(),
      'title' : title,
      'image':image.toString()
    };
  }
}

my image file

final title = TextEditingController();
  final details = TextEditingController();
  final categoryId = TextEditingController();
  final link = TextEditingController();

  File _image;
  final picker = ImagePicker();

  Future getImage() async {
    final pickedFile = await picker.getImage(source: ImageSource.camera);

    setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path);
      } else {
        print('No image selected.');
      }
    });
  }

and What I have passed inside my onPressed method

var articles = Articles();
                      articles.title = title.text;
                      articles.details = await keyEditor.currentState.getText();
                      articles.image = _image.toString();
                      articles.category_id = dropdownValue.id;
                      articles.user_id = _userId;
                      _postArticles(context, articles);
                      setState(() {
                        isLoading = true;
                      });

When I am sending a post request without an image then it is successfully worked but after using the image not working but I am able to get an image path in my storage.

I/flutter (11340): {id: null, views: null, title: ggg, details: hhh , category_id: 8, user_id: 3, image: File: '/storage/emulated/0/Android/data/com.drapp.flutter_lara_news/files/Pictures/df7f4e7c-2e89-4fc1-b315-fc8110a605f77878269288328274785.jpg'}

score 0 · Answer 1 · answered Dec 03 '20 at 17:55

It's because you are using the path of the image instead of the image itself.

 setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path);
      } else {
        print('No image selected.');
      }
    });
  }

try to change it to a base64 encode.

instead of

 _image = File(pickedFile.path);

use

_image = base64Encode(pickedFile.readAsBytesSync());

The rest of the things look ok as per your code.

NOTE: base64Encode() is available in dart:convert package

score 0 · Answer 2 · answered Dec 03 '20 at 18:40

 Future _doPhoto() async {
           var image = await ImagePicker.pickImage(source: ImageSource.camera, maxHeight: 1024, maxWidth: 1024);
            var map = Map();
            map['image'] = base64Encode(image.readAsBytesSync());
            var res = await doUploadImageSvc(map);
    
    
          }
    
      static Future doUploadImageSvc(Map map) async {
        map["token"] = await API.getToken();
        var url = await getAPI() + "/do-ui-svcdoc.php";
        return http.post(url, body: map);
      }

How to post image to server in flutter

2 Answers2