How to Reset the Input File Value Using React js
11 months ago
admin
Reactjs
In today's lesson, we will see how to reset the input file value using React js, sometimes when you upload a file you want to reset the input file value, so let's see how we can do that.
Use useRef() hook
So to reset the input file value we will use the 'useRef()' hook.
import React, { useRef } from 'react';
export default function Profile() {
const [image, setImage] = useState('https://cdn.pixabay.com/photo/2017/11/10/05/48/user-2935527_1280.png');
const fileInput = useRef();
const handleImageInput = async (file) => {
setImage(file);
//reset file input value
fileInput.current.value = '';
}
return (
<div className="col-md-4">
<div className="card p-2">
<div className="d-flex flex-column justify-content-center align-items-center">
<img src={image}
width={150}
height={150}
className="rounded-circle"
alt="Profile Image" />
<div className="input-group my-3">
<input type="file"
ref={fileInput}
name="user_image"
onChange={(e) => handleImageInput(e.target.files[0])}
accept="image/*"
className="form-control" />
</div>
</div>
</div>
</div>
)
}