In this article, we’ll see how we can reset a file in React.js. To reset a file input in React, we can use useRef to create a reference to the input element and modify its properties using the DOM API.
The useRef is a React Hook that stores mutable values persistently without triggering a re-render. It can hold references to DOM nodes, counters, or timers.
The built-in React hook useRef(initialValue) accepts one argument as the initial value and returns a reference (also known as a ref). An object with a unique property current is referred to as a reference.
Syntax:
inputFile.current.value = "";
Steps to Create React Application:
Step 1: Create a react application by using this command
npx create-react-app file-input
Step 2: After creating your project folder, i.e. file-input, use the following command to navigate to it:
cd file-input
Project Structure: It will look as follows:
Step 3: Open the App.js file. Simply paste the source code into the App.js file.
Example: In this example, React component “App” exports a file input field and a reset button. The component’s container style sets a 5rem margin and centers child elements horizontally in a flexbox column layout. To generate a reference to the input element, developers make use of the useRef hook. They achieve this by defining a constant called “inputFile” which is assigned the value of invoking the useRef hook with a starting value of null.
The function handleReset is a type of callback function that resets the input element’s value upon clicking the reset button. The function achieves this by verifying if the inputFile reference exists and then modifying the input element’s value to an empty string. Additionally, it toggles the input element’s type between “text” and “file”.
Javascript
import React, { useRef } from "react"; export default function App() { // Style object for the container div const container = { margin: "5rem", display: "flex", flexDirection: "column", alignItems: "center", }; // Style object for the input element const input = { width: "400px", padding: "8px", border: "1px solid #ccc", borderRadius: "4px", fontSize: "14px", boxShadow: "0px 0px 10px 0px grey", }; // Style object for the button element const button = { marginTop: "1rem", padding: "10px 10px 10px 10px", border: "none", borderRadius: "8px", backgroundColor: "green", color: "#fff", fontSize: "1rem", cursor: "pointer", transition: "all linear 0.5s", boxShadow: " 0px 0px 10px 0px grey", }; // Ref object to reference the input element const inputFile = useRef(null); // Function to reset the input element const handleReset = () => { if (inputFile.current) { inputFile.current.value = ""; inputFile.current.type = "text"; inputFile.current.type = "file"; } }; // Render function to display the input // element and the reset button return ( <div style={container}> <input style={input} type="file" ref={inputFile} /> <button style={button} onClick={handleReset}> Reset Input </button> </div> ); } |
Step 4: To run the application, open the Terminal and enter the command listed below. Go to http://localhost:3000/ to see the output.
npm start
Output:
