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 Upload Image you can upload any file like image, audio, video so on..

 

Flutter Upload Image Video Tutorial :

Go through below tutorial for more information on upload image.

 

pubspec.yaml :

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

dependencies:
  flutter:
    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() {
  runApp(MyApp());
}

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

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

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

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

  if(result!=null){
    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');
  } );

  print(response.data);


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

 

Flutter upload image output :

 

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.