How to Un Select Specific File in React input type ="file" multiple using react-hook-form

Question

I'm trying to implement a feature in my React application where users can deselect specific files after selecting multiple files using an input element with the type "file" and the multiple attribute. I'm using React Hook Form for form management. How can I achieve this functionality using React Hook Form? Specifically, how can I allow users to unselect or remove individual files from the list of selected files before submission?

I am not able to do ==>

setValue(name, (prevState) => {
    const updatedFiles = [...prevState];
    updatedFiles.splice(index, 1);
return updatedFiles;
     });

Answer 1

In this specific case, you want your input to be rendered again when changing its value. So, using a controlled input is the best way. In its onChange, change the state in the react-hook-form, in the input value, put the value of the form. You can get the form's value with react-hook-form's getValue method.