Form data submission with optional file uploads

[quinnturner]

Hi there, I have the following Uploady implementation:

<Uploady
  destination={{
    url,
    method: 'POST',
    filesParamName: 'files',
    params: {
      fileNamesToDelete: JSON.stringify(fileNamesToDelete),
    },
  }}
  multiple={true}
  autoUpload={false}
>
  {children}
  {/** within these children is a form with a submit button */}
</Uploady>

The form is all about managing files. A complete submission includes the following properties as form data:

• files to upload
• fileNamesToDelete (string[] | null) list of files that are to be deleted from the backend

In other words, if the current state is that file A is already uploaded, you can upload files B and C and delete file A in one Save action (one network request).

To submit the form, I use:

const onSubmit = () => {
 processPending({ params: { fileNamesToDelete }, sendWithFormData: true });
}

This works well, nice! I can include the fileNamesToDelete within the submission when uploading new files.

Unfortunately, when a user tries just to delete a set of files (and not upload a new file), processPending will not submit the form. I have not been able to identify an approach that allows me to submit the form without including a file in the submission.

My goal is to support the following actions (✅ explains that it currently works, ❌ is for what doesn't currently work):

a) ✅ Submit a set of files (files array is populated, processPending will know to submit)
b) ❌ Delete a set of files (files array is empty, processPending will avoid submitting)
c) ✅ A set of files should be uploaded, and another set should be deleted (files array is populated, processPending will know to submit and will include the fileNamesToDelete)
c) ✅ NOT submit when there are no files to upload or delete (files array is empty, processPending will avoid submitting)

[yoavniran]

hey @quinnturner
interesting question as on the face of it, what you're describing is the intended and normal behavior for Uploady.
The library is all about file uploading, so when there are 0 files to upload, there is no request to send. Hence, only sending a form submission without any files wont fly.

Without making fairly big changes to the internal code, I dont think it will be possible to work around this, and I dont see that happening.

In the scenario of no files, I'd suggest simply issuing a simple POST request to the same endpoint using XHR/Fetch or Axios if you like. Uploady doesnt give you any real benefit when there are no files.

However, I do understand the desire to have everything in one place, so there is at least one "hack" I can think of. It would require your server to "play along" as what I have in mind is whenever you only want to send the name(s) to delete, you could create a dummy File object and send it along. This will make Uploady issue the request.
You'd need to come up with a pattern for your server to recognize the dummy file and ignore it, though.