Here are the steps –
1. const [formData, setFormData]=useState({})
2. Add onChange and onclick –
<FileInput type=‘file’ accept=‘image/*’ onChange={(e)=>setFile(e.target.files[0])}/>
<Button type=‘button’ gradientDuoTone=‘purpleToBlue’ size=‘sm’ outline onClick={handleUploadImage}
disabled={imageUploadProgress}>
3. Set state
const [imageUploadProgress, setImageUploadProgress]=useState(null)
const [imageUploadError, setImageUploadError]=useState(null)
const [formData, setFormData]=useState({})
4. Add function for image upload –
const handleUploadImage=async()=>{
try {
if(!file){
setImageUploadError(‘Please select an Image’)
return;
}
setImageUploadError(null)
const storage=getStorage(app)
const fileName=new Date().getTime()+‘-‘+file.name;
const storageRef=ref(storage, fileName);
const uploadTask=uploadBytesResumable(storageRef, file);
uploadTask.on(
‘state_changed’,
(snapshot)=>{
const progress=(snapshot.bytesTransferred/snapshot.totalBytes)*100;
setImageUploadProgress(progress.toFixed(0))
},
(error)=>{
setImageUploadError(‘Image Upload Failed’);
setImageUploadProgress(null);
},
()=>{
getDownloadURL(uploadTask.snapshot.ref).then((downloadURL)=>{
setImageUploadProgress(null)
setImageUploadError(null)
setFormData({…formData, image:downloadURL})
})
}
)
} catch (error) {
setImageUploadError(‘Image upload failed’)
setImageUploadProgress(null)
console.log(error)
}
}
5. Show error –
{
imageUploadProgress?(
<div className=‘w-16 h-16’>
<CircularProgressbar
value={imageUploadProgress}
text={`${imageUploadProgress || 0}%`}
/>
</div>
):(
‘Upload Image’
)
}
6.
{
imageUploadError && <Alert color=‘failure’>{imageUploadError}</Alert>
}
{
formData.image &&(
<img src={formData.image} alt=‘upload’ className=‘w-full h-72 object-cover’/>
)
}
Video Tutorial: –
