File Uploads & Progress Tracking
Upload images, documents, and multipart FormData payloads effortlessly with automatic boundary creation and real-time progress events.
Uploading Files with api.upload()
The api.upload() helper accepts React Native file objects ({ uri, type, name }), Blobs, ArrayBuffers, or typed array views (Uint8Array, DataView, etc.), as well as standard FormData instances:
upload.ts
typescript
import { createClient } from 'react-native-fetch-client';
const api = createClient({ baseURL: 'https://api.example.com' });
// In React Native with react-native-image-picker:
const imageAsset = {
uri: 'file:///data/user/0/com.app/cache/photo.jpg',
type: 'image/jpeg',
name: 'avatar.jpg',
};
// Automatic multipart/form-data boundary generation:
const response = await api.upload('/users/avatar', imageAsset, {
fieldName: 'file',
extraFields: {
userId: '12345',
caption: 'My profile photo',
},
onUploadProgress: (progress) => {
console.log(`Uploaded ${progress.loaded} of ${progress.total} bytes (${progress.percent}%)`);
},
});
console.log('Upload complete:', response.data);Binary Subarrays & Buffer Slices
When uploading typed arrays or views backed by a shared buffer (e.g.
uint8Array.subarray(offset, length)), the client strictly respects byteOffset and byteLength, preventing unintended bytes from being uploaded.No Manual Boundary Needed
Never manually set
Content-Type: multipart/form-data in your headers. The client and runtime automatically generate the correct MIME boundary string so the backend server can parse files properly.Download Progress Tracking
Monitor incoming payload chunks using the onDownloadProgress callback:
typescript
// Download progress monitoring
const response = await api.get('/downloads/big-firmware.bin', {
responseType: 'blob',
onDownloadProgress: (progress) => {
console.log(`Downloaded ${progress.percent}% (${progress.loaded}/${progress.total} bytes)`);
},
});