Using Dio for Uploading Files in Flutter

Have you ever found yourself scratching your head over file uploads in Flutter? Don’t worry – I’ve been there too! Today, we’ll explore how to handle file uploads in Flutter using the powerful Dio package. Whether you’re building a social media app, a document management system, or just need to send files to your backend, this guide has got you covered.

Setting Up Dio

First things first, let’s add Dio to our project. Open your pubspec.yaml file and add the following dependency:

dependencies:
  dio: ^5.4.0

Run flutter pub get, and we’re ready to roll!

Basic File Upload

Let’s start with a simple example of uploading a single file. Here’s how you can implement it:

Future<void> uploadFile(File file) async {
  final dio = Dio();
  final formData = FormData.fromMap({
    'file': await MultipartFile.fromFile(
      file.path,
      filename: 'upload.jpg',
    ),
  });

  try {
    final response = await dio.post(
      'https://your-api-endpoint.com/upload',
      data: formData,
    );
    print('Upload successful: ${response.data}');
  } catch (e) {
    print('Error uploading file: $e');
  }
}

Advanced Features

Progress Tracking

One of the coolest features of Dio is its built-in upload progress tracking. Here’s how to implement it:

Future<void> uploadFileWithProgress(File file) async {
  final dio = Dio();
  final formData = FormData.fromMap({
    'file': await MultipartFile.fromFile(
      file.path,
      filename: 'upload.jpg',
    ),
  });

  try {
    await dio.post(
      'https://your-api-endpoint.com/upload',
      data: formData,
      onSendProgress: (sent, total) {
        final progress = (sent / total * 100).toStringAsFixed(2);
        print('Upload Progress: $progress%');
      },
    );
  } catch (e) {
    print('Error uploading file: $e');
  }
}

Multiple File Upload

Need to upload multiple files? No problem! Here’s how:

Future<void> uploadMultipleFiles(List<File> files) async {
  final dio = Dio();
  final formData = FormData();

  for (var i = 0; i < files.length; i++) {
    formData.files.add(
      MapEntry(
        'files[]',
        await MultipartFile.fromFile(
          files[i].path,
          filename: 'file_$i.jpg',
        ),
      ),
    );
  }

  try {
    await dio.post(
      'https://your-api-endpoint.com/upload-multiple',
      data: formData,
    );
  } catch (e) {
    print('Error uploading files: $e');
  }
}

Best Practices and Tips

1. Always handle errors appropriately and show meaningful messages to users
2. Consider implementing retry logic for failed uploads
3. Compress large files before uploading to improve performance
4. Don’t forget to show loading indicators during uploads
5. Validate file types and sizes before uploading

Conclusion

Dio makes file uploading in Flutter a breeze! With its robust feature set and straightforward API, you can implement file uploads with just a few lines of code. Remember to handle edge cases and provide a great user experience with progress indicators and error handling.