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.

Follow the below tutorial on flutter upload image to database using api for the complete info on the implementations.

 

 

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 screen below depicts the implementation of flutter image upload.

flutter image upload

If you are having any query’s in this tutorial on flutter image upload do let us know in the comment section before. If you like this tutorial do like and share us for more interesting tutorials.

 

Show Buttons
Hide Buttons
Read previous post:
Flutter feedback / reach us button integration

  Flutter Whatsapp Feedback : In this tutorial we will be going through the implementation of whatsapp reach us/ feedback...

Close