How to Implement Upload Post Image Functionality in the MERN Stack Application

How to Implement Upload Post Image Functionality in the MERN Stack Application

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; } […]

How to Implement Upload Post Image Functionality in the MERN Stack Application Read More »