Flutter upload image using dio library | upload an image or file

Flutter Upload Image :

Flutter upload image or file is a key aspect in few app’s so i would like to make it easy for you through this vlog. In our previous vlogs we have seen various api request implementations.

Api’s play a key role in app functionality by providing dynamic features which provides various functionality to the user.

For example providing list of products which change dynamically, purchase, audio & video files, social networking all of these works on api implementation.

In this tutorial we have made use of a third party website for explaining you how the image upload process is done.It is very realistic just you need to change the api and follow this process.

By using this tutorial on Flutter Upload Image you can upload any file like image, audio, video so on..



pubspec.yaml :

Add the required dependencies to perform flutter image upload like dio and file picker.

    sdk: flutter
  dio: ^4.0.6
  file_picker: ^5.2.2


main.dart :

Complete code for flutter upload image in your app.

Here we have provided a async method such that app will wait until the network call is made and data is received.

Initially we will pick the file and provide it to the api request such that it is uploaded into server.If file is successfully selected then a file name is provided.

Also the file path such that the multipart request is made i.e., request is divided into different parts.

We will provide a post api request and also will progress the data uploaded using a callback method.

This progress can be used to show user the amount of data is still remaining and also time.


import 'dart:io';
import 'package:file_picker/file_picker.dart';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';

void main() {

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

  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
                  onPressed: () {
                  child: const Text("Upload File")),

Future uploadFile() async {
  var dio = Dio();

  FilePickerResult? result = await FilePicker.platform.pickFiles();

    File file = File(result.files.single.path ?? " ");

    String filename = file.path.split('/').last;

    String filepath = file.path;

  FormData data = FormData.fromMap({
    'key': 'your key here',
    'image': await MultipartFile.fromFile(filepath, filename: filename)

  var response = await dio.post("https://api.imgbb.com/1/upload", data: data,
  onSendProgress:(int sent, int total){
    print('$sent, $total');
  } );


  }else {
    print("Result is null");


Flutter upload image output :


flutter upload image

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


Show Buttons
Hide Buttons
Read previous post:
flutter get post
Flutter GET POST using dio || Get & Post call at once

Flutter GET POST : Flutter GET POST both the network calls are implemented concurrently using dio library is explained in...