[react] How to clear FileUpload files externally

[Naoto-Ida]

Hey y'all, we've been trying to figure out how to clear FIleUpload from the consuming component.

We know that the following works within the component:

 <FileUpload.Context>
  {({ api }) => (
    <button onClick={() => api.clearFiles()}>Clear</button>
  )}   
</FileUpload.Context>

but how shall we go about calling clearFiles from a parent component?
i.e. we have a form in the parent component which doesn't reload the page, therefore we need a way to call api.clearFiles from there.

[dhay]

I'm also not sure how to clear the FileUpload form. After submitting my form, I want to clear the set of uploaded files, but it's non-obvious to me how to do that based on the documentation here and attempting to read through the code. I'm trying to do something like this:

  const [files, setFiles] = useState<File[]>([]);

  const handleSubmit( = async (e: React.FormEvent) => {
    e.preventDefault();
    // ... process the form
    setFiles([])
};
// ...
return (
<form onSubmit={handleSubmit}>
                  <FileUploadRoot
                  directory
                  maxFiles={100}
                  onFileChange={(e) => setFiles(e.acceptedFiles)}
                >
                  <FileUploadDropzone
                    label="Drag and drop directory here to upload"
                    width="full"
                  />
                  <FileUploadList showSize clearable files={files}/>
                </FileUploadRoot>

</form>
);

The call to setFiles correctly clears the FileUploadList, but if I then drag in more files, the previous set of files shows up again.