Flutter image upload to rest API | image upload

Flutter Image Upload :

In this blog on Flutter image upload we will be looking through the topic of flutter upload image using multipart request and upload to a real time database rather than any dummy api call.

Network calls are quite common in every app, a app without network call is unpredictable these days.Though you may not implement but any third party library you have implemented may make use of it.

We have seen network call implementations in our previous tutorials in flutter app using Get, Post methods may refer them.

Now in this blog we will be going through the implementation of flutter network call where we are going to upload a image to the server.

Image Upload Video Tutorial :

Refer to the tutorial below for comprehensive information on implementing image upload to a database using Flutter and an API.

pubspec.yaml :

Add http dependency to implement network call.Make sure you provide latest version of library such that there is no code level issue.

dependencies:
  flutter:
    sdk: flutter
  http: ^latest_version

Add the image to be uploaded to the assets.

assets:
  - assets/testimage.png

main.dart :

We are creating a async method using which we upload images. For this method we will be passing title and file.

uploadImage(String title, File file) async{}

Create a variable request and specify the MultipartRequest provide POST method and url i.e., api

var request = http.MultipartRequest("POST",Uri.parse("https://api.imgur.com/3/image"));

Specify the parameters for uploading the image to api.

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

Specify the headers with authorization

request.headers['Authorization'] = "Client-ID " +"f7........";

Load image from assets folder

var picture = http.MultipartFile.fromBytes('image', (await rootBundle.load('assets/testimage.png')).buffer.asUint8List(), filename: 'testimage.png');

Add the picture

request.files.add(picture);

Fetch the response

var response = await request.send(); 
var responseData = await response.stream.toBytes();

Print the response

var result = String.fromCharCodes(responseData);

print(result);

Now specify this method under onPressed(){}

TextButton(
  onPressed: () {
    uploadImage('image', File('assets/testimage.png'));
  },

Complete code for image upload is provided below for implementation.

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image Upload'),
        ),
        body: Center(
          child: Container(
            child: TextButton(
              onPressed: () {
                uploadImage('image', File('assets/testimage.png'));
              },
              child: Text('Upload'),
            ),
          ),
        ),
      ),
    );
  }
}

uploadImage(String title, File file) async {
  var request =
      http.MultipartRequest("POST", Uri.parse("https://api.imgur.com/3/image"));
  request.fields['title'] = "dummyImage";
  request.headers['Authorization'] = "Client-ID " + "f7........";
  var picture = http.MultipartFile.fromBytes(
    'image',
    (await rootBundle.load('assets/testimage.png')).buffer.asUint8List(),
    filename: 'testimage.png',
  );
  request.files.add(picture);
  var response = await request.send();
  var responseData = await response.stream.toBytes();
  var result = String.fromCharCodes(responseData);
  print(result);
}

Flutter upload image Output :

The following screen illustrates the implementation of image upload.

If you have any questions about this tutorial on image upload, please feel free to ask in the comments below. If you found this tutorial helpful, don’t forget to like and share it for more engaging tutorials.