Removing FilePond file after upload React

Question

Ok I am at my wits end here. I am using FilePond with React in a functional component using Hooks. I am not using FilePond to handle the actual upload, just setting the state with the files, my simplified version is this:

The Filepond:

        <FilePond          
            onupdatefiles={fileItems => handleFilepondUpdate(fileItems)}            
          />
        </Form.Field>

The handle update:

 const handleFilepondUpdate = fileItems => {
    if (fileItems.length === 0) {
      addAttachment({
        ...picture,
        bugAttachment: null
      });
    } else {
      addAttachment({
        ...picture,
        bugAttachment: fileItems[0].file
      });   
    }
  };

The state:

const [picture, addAttachment] = useState({
    bugAttachment: ""
  });
const { bugAttachment } = picture;

And finally my upload and clear the input state:

 const onSubmit = e => {
    e.preventDefault();
    const fd = new FormData();
    fd.append("email", props.user[0].email);
    fd.append("bugDescription", bugDescription);
    fd.append("bugAttachment", bugAttachment);
    addBug(fd).then(() => {
      setBug({
        bugDescription: ""
      });

    });
  };

So how would I go about removing the FilePond file after the form is sent through?

Answer 1

Try clearing the bugAttachment property inside onSubmit using addAttachment hook

 const onSubmit = e => {
    e.preventDefault();
    const fd = new FormData();
    fd.append("email", props.user[0].email);
    fd.append("bugDescription", bugDescription);
    fd.append("bugAttachment", bugAttachment);
    addBug(fd).then(() => {
      setBug({
        bugDescription: ""
      });
      addAttachment({
        ...picture,
        bugAttachment:""
      });  

    });
  };

Update: It seems like that you have not used the files prop with your picture state,Try something like this.

 <FilePond          
   files={bugAttachment}
   onupdatefiles={fileItems => handleFilepondUpdate(fileItems)}            
   />