Image Upload
Image Upload
Image upload is one of the most common file upload use cases in mobile apps, such as profile pictures, product photos, or social media posts. This tutorial covers the complete image upload flow.
Installing an Image Picker Library
bash
npm install react-native-image-picker
Selecting an Image from the Gallery
javascript
import { launchImageLibrary } from 'react-native-image-picker';
launchImageLibrary({ mediaType: 'photo' }, (response) => {
if (!response.didCancel) {
setSelectedImage(response.assets[0]);
}
});
Capturing an Image from the Camera
javascript
import { launchCamera } from 'react-native-image-picker';
launchCamera({ mediaType: 'photo' }, (response) => {
if (!response.didCancel) {
setSelectedImage(response.assets[0]);
}
});
Previewing the Selected Image
javascript
Uploading the Image
javascript
const formData = new FormData();
formData.append('image', {
uri: selectedImage.uri,
name: selectedImage.fileName,
type: selectedImage.type,
});
await axios.post('/upload-image', formData, {
headers: { 'Content-Type': 'multipart/form-data' },
});
Compressing Images Before Upload
To reduce upload time and bandwidth usage, images should typically be compressed or resized before uploading, using libraries such as react-native-image-resizer.
Requesting Camera and Gallery Permissions
Both Android and iOS require explicit permission requests before accessing the camera or photo library, which should be handled gracefully with clear explanations for users.
Conclusion
Implementing a complete image upload flow, including selection, preview, compression, and upload, is essential for features like profile pictures, product listings, and social sharing in React Native apps.
