How to upload a file in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
File upload functionality is essential for modern React applications, from profile pictures to document management systems. As the creator of CoreUI, I’ve implemented file uploads in countless enterprise applications. The most effective solution is to use a file input with onChange handler, store the file in state, and send it using FormData. This approach works seamlessly with any backend API and provides full control over the upload process.
Use a file input with FormData to upload files in React.
const [selectedFile, setSelectedFile] = useState(null)
const [uploading, setUploading] = useState(false)
const handleFileChange = (e) => {
setSelectedFile(e.target.files[0])
}
const handleUpload = async () => {
if (!selectedFile) return
setUploading(true)
const formData = new FormData()
formData.append('file', selectedFile)
try {
const response = await fetch('/api/upload', {
method: 'POST',
body: formData
})
const data = await response.json()
console.log('Upload successful:', data)
} catch (error) {
console.error('Upload failed:', error)
} finally {
setUploading(false)
}
}
return (
<div>
<input type='file' onChange={handleFileChange} />
<button onClick={handleUpload} disabled={!selectedFile || uploading}>
{uploading ? 'Uploading...' : 'Upload'}
</button>
</div>
)
The file input’s onChange event provides the selected file through e.target.files[0], which is stored in state. FormData creates a multipart/form-data request that servers expect for file uploads. The append() method adds the file with a field name matching your API’s requirements. The upload button is disabled during upload and when no file is selected, preventing duplicate submissions.
Best Practice Note
This is the same reliable file upload pattern we use in CoreUI React components. For better UX, add file type and size validation before upload, display upload progress using XMLHttpRequest or axios with progress events, and show preview for image files to confirm selection before uploading.
