How to Reset the Input File Value Using React js

1 year 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>
    )
}

Related Tuorials

Build a Shopping Cart Using React js Laravel 11 & Stripe Payment Gateway Part 5

In the last part of this tutorial, we will display the cart items, add the ability to increment/decr...


Build a Shopping Cart Using React js Laravel 11 & Stripe Payment Gateway Part 4

In the fourth part of this tutorial, we will fetch and display all the products on the home page, an...


Build a Shopping Cart Using React js Laravel 11 & Stripe Payment Gateway Part 3

In the third part of this tutorial, we will start coding the front end, first, we will install the p...


Build a Shopping Cart Using React js Laravel 11 & Stripe Payment Gateway Part 2

In the second part of this tutorial, we will create the product and payment controllers, and later w...


Build a Shopping Cart Using React js Laravel 11 & Stripe Payment Gateway Part 1

In this tutorial, we will create a shopping cart using React js Laravel 11 and Stripe payment gatewa...


How to Use Rich Text Editor in React js

In this lesson, we will see how to use rich text editor in React JS, let's assume that we have a com...


How to Download a File from the Server Using Laravel and React js

In this tutorial, we will see how to download a file from the server using Laravel and React js, let...


How to Add a Class on Hover in React js

In this lesson, we will see how to add a class on hover in React js, let's assume that we have a boo...


Drag and Drop Image and File Upload Using React and Laravel

In this tutorial, we will see how to upload files using drag and drop in React js and Laravel, first...


API Authentication Using Laravel Sanctum and React js Part 3

In the third part of this tutorial, we will register and log in the user, get the access token, and...