How to reset React file input with JavaScript?

Sometimes, we want to reset React file input with JavaScript.

In this article, we’ll look at how to reset React file input with JavaScript.

How to reset React file input with JavaScript?

To reset React file input with JavaScript, we set the input’s value property to an empty string.

For instance, we write

import React, { useRef } from "react";

export default function App() {
  const ref = useRef();

  const reset = () => {
    ref.current.value = "";
  };

  return (
    <>
      <input type="file" ref={ref} />
      <button onClick={reset}>reset</button>
    </>
  );
}

to add the file input and assign the ref ref to it.

Then in the reset function, we set its value property to an empty string to reset it.

Conclusion

To reset React file input with JavaScript, we set the input’s value property to an empty string.