NetworkingMedium30 XP3 min read
How do you upload files with progress tracking in Flutter?
TL;DR: Use Dio's FormData with MultipartFile for multipart uploads. Pass onSendProgress callback to track upload percentage. Use image_picker or file_picker to select files, then read them as bytes for the MultipartFile.
Full Answer
- ▸image_picker / file_picker: User selects file from gallery or filesystem
- ▸MultipartFile.fromBytes(bytes, filename: 'photo.jpg'): Create from bytes
- ▸MultipartFile.fromFile(path, filename: ...): Create from file path (more memory-efficient)
- ▸FormData({'file': multipartFile, 'caption': 'Hello'}): Bundle with metadata
- ▸dio.post('/upload', data: formData, onSendProgress: (sent, total) {...}): Track progress
Code Examples
dartFile upload with progress bar
Output
// onProgress called every chunk: 0.1, 0.5, 0.8, 1.0 // Returns the server-hosted URL of the uploaded image
Common Mistakes
- ✗Loading the entire file into memory with fromBytes for large videos — use fromFile with a path instead
- ✗Not showing a cancel button — store the CancelToken and call cancel() if user navigates away
Interview Tip
💡
Always use MultipartFile.fromFile for large files — it streams from disk rather than loading into RAM. Mention CancelToken for user-cancellable uploads.
#file-upload#multipart#FormData#progress#dio