In my app, I have a separate Uploader component based on react-dropzone, which has a handleFileUpload method. I forward it with useEffect as a reference to the parent component and trigger it there when the Submit button is clicked.

I tried a very basic approach to upload multiple files into S3 with pre-signed URLs using Fetch API.

Uploader.js

const handleFileUpload = async () => {
  console.log("handleFileUpload begin");
    for (const file of files) {
      let url = await getPresignedUrl(file.name);
      let response = await fetch(url, {
        method: "PUT",
        body: file,
      });
      console.log(response) // <- this is never triggered
    }
  };
  console.log("handleFileUpload end");
};

In the parent Form component, I run this forwarded method asynchronously on form submit using a React callback.

Form.js

const handleSubmit = useCallback(
  async (e) => {
    e.preventDefault();

      // upload files using ref to the method from Uploader component
    await handleUpload.current().then(
      console.log('file uploaded')

      // update item in database
      ...
    )
  },
[handleUpload]
);

What I see is that all console logs are executed in the expected order, except for the actual fetch call. So files are never uploaded when I hit the Submit button. I want to be sure that my files are finished uploading to the server before I update any database entries, etc. There must something wrong with my approach, am I using the async calls correctly?