How to Reset the Input File Value Using React

In today's lesson, we will see how to reset the input file value using React. 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>
    )
}