reactjs - Reset file upload after useState react js hooks

Question

I wanted to reset my file upload control after I add selected image to array with useState hooks, but it is not somehow working for me.

My Code -

const fileInputRef = useRef();
const[images,setImages]=useState([]);

const addImage = (e)=>{
 setImages([...images,e.target.files])
}


useEffect(()=>{
if(fileInputRef) fileInputRef.current.value=null
 },[images])

return( <input type="file" ref={fileInputRef} onChange={addImage} />)

Now here fileInputRef is reset, but the problem here is I am getting images array with FileList object as length 0 as shown in the image below

.

Please help.

question from:https://stackoverflow.com/questions/65626134/reset-file-upload-after-usestate-react-js-hooks

Answer 1

the problem is that you are not passing a copy of the file it's a reference e.target.files all you need is to spread it so you copy it so when useEffect run and delete the reference you have a copy in the images state

import React, { useEffect, useState, useRef } from "react";

const Stack = () => {
  const fileInputRef = useRef();
  const [images, setImages] = useState([]);

  const addImage = (e) => {
    setImages([...images, ...e.target.files]);
  };

  useEffect(() => {
    if (fileInputRef) fileInputRef.current.value = null;
  }, [images]);

  console.log(images);
  return <input type="file" ref={fileInputRef} onChange={addImage} />;
};

export default Stack;

i add a demo on codesandbox here