Flutter: How to Upload to Cloudinary

Prerequisites

Tools required to follow the article.

• Flutter SDK.
• Android Studio or VS code.
• Emulator or an Android device

Introduction

Saving assets locally has been proven to be bad practice especially during production. So must case as a flutter developer you will be asked to upload your assets to on online platform most times Cloudinary, and this can be challenging especially as a junior flutter developer.

• Cloudinary is a company which provides a cloud-based image and video management services. It enables users to upload, store, manage, manipulate and deliver images and video for websites and apps.

It is time to see how this magic works.

Setting up Project Tools

First, let’s create a new flutter project, run the following command on your terminal.

flutter create up_to_cloudinary

Open the project on our preferred IDE.

Secondly, let’s Setup our Cloudinary account that will be used to store our files.

sign up to Cloudinary and follow the signup process if you don’t have an account or sign in if you already have an account. First, let’s create a new flutter project, run the following command on your terminal.

Let’s go back to our IDE, and open the main.dart,

replace the body of our Scaffold with the following code:

We just created an avatar which will display our picture after uploading, but for now, it has a child property of an Icon widget.

Let’s go in deep and write our function which will handle our uploading. But first Let’s install few packages in our pubspec.yaml file that will be needed.

image_picker: ^0.6.3+4

dio: ^3.0.9

loading: ^1.0.2

And run the command flutter pub get on our terminal.

Let’s talk about the function of each package and why it is needed:

• Image Picker: this package helps our application to interact with the device camera and storage.
• Dio: is a networking library developed by Flutter China. It is a powerful Http client for Dart, which supports Interceptors, Global configuration, FormData, Request Cancellation, File downloading, ConnectionTimeout etc.
• Loading: This just helps to give us a feeling that something is happening while files something is happening.

After Adding those packages and removing the comments our pubspec.yaml looks like

Going back to our main.dart let’s import these packages so we can access them and use it below. Added the following code at the top of our main.dart

import 'package:image_picker/image_picker.dart';

import 'dart:convert';

import 'package:dio/dio.dart';

import 'package:loading/loading.dart';

import 'package:loading/indicator/ball_pulse_indicator.dart';

Diving in, let’s create a method just above the default _incrementCounter

Future uploadImage() async {}

Because we will we making some API calls we have to give a type Future to the method:

• A Future is used to represent a potential value, or error, that will be available at some time in the future. Receivers of a Future can register callbacks that handle the value or error once it is available.

Just Before the Function Let’s the following variables

var imageUrl;

bool isloading = false;

Inside our method let’s access the image picker by adding the following code,

Back to Cloudinary, hope you didn’t forget about this dude, we need first get our Cloudinary API Base URL from our Cloudinary dashboard and set our upload preset which will give us the authorization to upload to our account, to do this let’s follow the instructions below

• Login to your Cloudinary with our credential > just beside where your account details are listed, click on more to expand, copy your API Base URL , create constant which will hold your API Base URL, also add /upload at the end of the string. Also, take note of the Cloud Name, it will be useful. Our const should look similar to this:

const url = "https://api.cloudinary.com/v1_1/****/upload";

• Click on Settings > Click on Upload > Scroll down to Upload presets > click on Add upload preset > give it a suitable name > click on save

Having done this Let’s write our API call in our method, Add the following code to the method:

We Created a FormData with three properties:

1. file: which Which contains the Image properties with the help of MultipartFile.fromFile from Dio package and the path to the image which was selected by image-picker
2. Upload preset
3. Cloud name

We also Made an API request and passed in the formData and got the set the imageUrl from the response gotten from the API.

Our Function now Looks like:

Let’s Update Our Scaffold body with the following code:

And also Let’s update the floatingActionButton in the Scaffold to link our uploadImage function to the onPressed. Update with the following code:

Our main.dart should have this look:

Now Let’s run our code, and upload an image.

Also, I am open for Remote Flutter developer role please reach out to me via email if you have or know of any.

Happy Fluttering