How to Implement Resumable File Uploads toAzure Blob Storage in Flutter

Photo by Artur Shamsutdinov on Unsplash

Introduction:

In today’s digital era, file uploads are a crucial part of many mobile applications. However, handling large file uploads can be challenging due to network instability and limited bandwidth. To address this issue, developers can implement resumable file uploads, which allow the upload process to resume from the point of failure, ensuring a smoother user experience. In this blog, we will explore how to achieve resumable file uploads to Azure Blob Storage in Flutter, utilizing an example Flutter package to simplify the implementation.

Prerequisites:

Before we dive into the implementation, make sure you have the following:

1. Flutter development environment setup.
2. An Azure Blob Storage with the necessary access keys.

Choosing the Flutter Package:

To streamline the process, we’ll use the “resumable_upload” package, which is a popular Flutter plugin for handling file uploads. It provides resumable file upload capabilities and works seamlessly with Azure Blob Storage.

Step 1: Setting Up the Flutter Project

Start by creating a new Flutter project or using an existing one. Ensure you’ve updated your pubspec.yaml file to include the “resumable_upload” package:

dependencies:
  flutter:
    sdk: flutter
  resumable_upload: ^0.0.1

Then, run flutter pub get` to install the package.

Step 2: Configuring Azure Blob Storage

Before we proceed with the code implementation, you need to configure your Azure Blob Storage to store the uploaded files. Make sure to note down the container’s URL and access keys, as we’ll use them in the code.

Step 3: Implementing the Resumable File Upload

In this step, we’ll implement the resumable file upload functionality using the “resumable_upload” package. First, import the necessary dependencies:

import 'package:flutter/material.dart';
import 'package:resumable_upload/resumable_upload.dart';

Next, initialize the uploader:

UploadClient client = UploadClient(
        file: // Provide the file object to upload,
        cache: LocalCache(),
        chunkSize: 10 * 1024 * 1024, // Default 4MB
        timeout: const Duration(seconds: 20), // Default 30sec
        blobConfig: BlobConfig(
            accountName: 'AZURE_BLOB_ACCOUNT_NAME',
            containerName: 'AZURE_BLOB_NAME',
            blobName: 'AZURE_BLOB_NAME',
            sasToken: 'AZURE_Sas_TOKEN'),
    )

Now, create a function to handle the file upload:

Future<void> uploadFile() async {
  client.uploadBlob(
        onProgress: (count, total, response) {
          final num = ((count / total) * 100).toInt().toString();
          print('Uploading $num %')
        },
        onComplete: (path, response) {
          print('File uploaded successfully.');
        },
      );
}

Step 4: Triggering the Upload

Now, you can trigger the file upload process, for example, in response to a button tap:

ElevatedButton(
  onPressed: () {
    uploadFile();
  },
  child: Text('Upload File'),
),

Conclusion:

Congratulations! You’ve successfully implemented resumable file uploads to Azure Blob Storage in Flutter using the “resumable_upload” package. With this functionality in place, your users can enjoy a smooth file upload experience, even when dealing with unreliable network connections.

Remember to handle any potential error scenarios and provide appropriate feedback to users during the upload process. You can further enhance the user experience by adding indicators and error handling to make the upload process more transparent.

Happy coding!