Flutter upload Image to server using http pacakge

Flutter upload image to server using Http pacakge

youtube tutorial: https://youtu.be/6qAau3ngbLw

srouce code: https://github.com/axiftaj/Flutter-Rest-Api-Tutorials-With-Example

If you are a beginner then it will be hectic process for you to upload images to server using http package but actually its not.

There are two ways to upload images to server

1. Upload path of image to server(we will do this method in this blog)
2. Convert image to base 64 and upload it( in this case backend developer willl then encode the base 64 and store it in database)

Add these dependencies to your pubspec.yaml

1. http: ^0.13.4
2. image_picker: ^0.8.4+4
3. modal_progress_hud_nsn: ^0.1.0-nullsafety-1

Image picker is used to pick images from gallery or capture image while http package is used to upload image to server using different protocol and modal progress hud is used to for circular progress loading .

Add camera and gallery permission for android into you manifest file above the application tag.

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />

For ios add folloing line of code to your info.plist file which is located at inside ios fodler > runner.

<key>NSCameraUsageDescription</key>
<string>hello app camera description.</string>


<key>NSPhotoLibraryUsageDescription</key>
<string>hello app photos description.</string>

Full source code

import 'dart:convert';
import 'dart:io';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:modal_progress_hud_nsn/modal_progress_hud_nsn.dart';

class UploadImageScreen extends StatefulWidget {
  const UploadImageScreen({Key? key}) : super(key: key);

  @override
  _UploadImageScreenState createState() => _UploadImageScreenState();
}

class _UploadImageScreenState extends State<UploadImageScreen> {

  File? image ;
  final _picker = ImagePicker();
  bool showSpinner = false ;

  Future getImage()async{
    final pickedFile = await _picker.pickImage(source: ImageSource.gallery , imageQuality: 80);

    if(pickedFile!= null ){
      image = File(pickedFile.path);
      setState(() {

      });
    }else {
      print('no image selected');
    }
  }

  Future<void> uploadImage ()async{

    setState(() {
      showSpinner = true ;
    });

    var stream  = new http.ByteStream(image!.openRead());
    stream.cast();

    var length = await image!.length();

    var uri = Uri.parse('https://fakestoreapi.com/products');

    var request = new http.MultipartRequest('POST', uri);

    request.fields['title'] = "Static title" ;

    var multiport = new http.MultipartFile(
        'image',
        stream,
        length);

    request.files.add(multiport);

    var response = await request.send() ;

    print(response.stream.toString());
    if(response.statusCode == 200){
      setState(() {
        showSpinner = false ;
      });
      print('image uploaded');
    }else {
      print('failed');
      setState(() {
        showSpinner = false ;
      });

    }

  }

  @override
  Widget build(BuildContext context) {
    return ModalProgressHUD(
      inAsyncCall: showSpinner,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Upload Image'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            GestureDetector(
              onTap: (){
                getImage();
              },
              child: Container(
                child: image == null ? Center(child: Text('Pick Image'),)
              :
              Container(
                child: Center(
                  child: Image.file(
                    File(image!.path).absolute,
                    height: 100,
                    width: 100,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              ),
            ),
            SizedBox(height: 150,),
            GestureDetector(
              onTap: (){
                uploadImage();
              },
              child: Container(
                height: 50,
                width: 200,
                color: Colors.green,
                child: Center(child: Text('Upload')),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Thank you for reading this, do leave your feedback it helped.