Uploading files to a server (in this case, S3) has been a smooth process for files under ~1MB. However, larger files tend to fail intermittently during the send operation. The issue does not seem to be related to security measures, CORS settings, or signing procedures as small files work fine.
Interestingly, even some larger files do not fail immediately; they trigger progress events indicating correct byte counts until eventually an error occurs and the upload stops. Occasionally, a file of 7-8MB manages to succeed, only to fail on subsequent attempts.
Below are key lines of code with unnecessary details removed. The URL is a signed temporary PUT request that successfully passes the OPTIONS preflight call preceding the PUT request. The content-type header is crucial as it is part of the signing process for the URL.
xhr = new XMLHttpRequest()
xhr.upload.onerror = (e) ->
console.log(xhr)
console.log(e)
xhr.onerror = (e) ->
console.log(xhr)
console.log(e)
true
xhr.open('PUT', url)
xhr.setRequestHeader('content-type', file.type)
xhr.send(file)
I have experimented with different files containing various sizes and extensions, but there doesn't seem to be a discernible pattern apart from the file size. To address this, I increased timeout values and tried to handle abort and timeout events, albeit without success.
Upon encountering the error, no decisive information is found in the event, xhr, or xhr.upload properties explaining the halt in transmission.
In Chrome tools, the failed attempt is displayed as a PUT request with status '(failed).' The error event indicates type="error" without further context, while the xhr object showcases minimal data at that point.
If anyone has any insights or unconventional suggestions to offer, your input would be greatly appreciated. Thank you.