PUT requests where the body is a file do not work in Safari (version 13.x). The same code works in Chrome and Firefox. I've tried using the Fetch API and Axios - neither work in Safari.

The File object being passed to the call can come from the drag-and-drop API or a simple file type input. Both of which work in Chrome / Firefox but neither in Safari.

While files sent with MIME type application/pdf work fine, it seems that anything with the image/ prefix or even octet-stream result in Safari not sending the body. According to the Safari developer panel, the body is 0 bytes.

The requests have the correct Content-Length and Content-Type headers. After a while, S3 replies with a message saying they haven't received any bytes in the last 20 seconds. The response is a 400 and the connection is closed.

UPDATE: As reported by Safari, the body is 0 bytes.

Code

           // filesToUpload is an array of File objects, and is 
           // correctly populated with appropriate file types and sizes
            var options = {
                headers: {
                    'Content-Type': filesToUpload[uploadIndex].type,
                }
            };
            await axios.put(url, filesToUpload[uploadIndex], options);

            // This does not work either
            await fetch(url, {
                method: "PUT",
                body: filesToUpload[uploadIndex]
            });

I'm aware of the bug in Safari 14.1 preventing file inputs from working, but this is not related. The file input works correctly here, as does the drag-and-drop API - at least from my perspective. I can see the correct file types and sizes in the filesToUpload array.