Sometimes, we want to fix the input type file onChange not firing issue with React.

In this article, we’ll look at how to fix the input type file onChange not firing issue with React.

How to fix the input type file onChange not firing issue with React?

To fix the input type file onChange not firing issue with React, we set the onChange prop to a function that takes the change event object.

For instance, we write:

import React from "react";

export default function App() {
  const onChange = (e) => {
    console.log(e.target.files);
  };

  return (
    <form>
      <input type="file" multiple onChange={onChange} />
    </form>
  );
}

We have a file input which we create by setting the type attribute to file.

And we add the multiple prop to it to make it allow multiple file selection.

Finally, we set the onChange prop to the onChange function to get the files selected when they’re selected.

Therefore, when we select one or more files with the file input, we should see the e.target.files logged.

e.target.files should have all the files selected.

Conclusion

To fix the input type file onChange not firing issue with React, we set the onChange prop to a function that takes the change event object.