XmlHttpRequest PUT文件上传停止> 1MB

Question

I am uploading files to a server (in this case, S3). Any file under ~1MB works fine. Files above that size usually fail, although not every time. I have the process working for the small files, so the issue does not seem to lie in security, CORS, signing, etc. It seems to be during the send.

Small files work ~100% but even larger files do not fail immediately, but fire a couple of progress events that show correct total byte and increasing loaded byte counts as they should. However, after a few of these progress events, it fires the error and the send stops. Once in while, a file of 7-8MB has succeeded, but the same file will fail on other attempts.

Here are the relevant lines of code with as much fluff removed as possible. The url is a signed temporary PUT request that is working and passing the OPTIONS preflight call that precedes the PUT call. The content-type header is required as it gets included in 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 tried different files, sizes, extensions and those do not seem to form any pattern other than size. The size of the file is an indicator but not exact. Based on that, I looked for timeouts and made them large (just in case). I did try to catch onabort and ontimeout and neither one is fired.

When I get the error, I can find nothing o the event, xhr or xhr.upload to indicate why it stopped.

Chrome tools shows the attempt as a PUT with status '(failed).'

The error event shows type = "error" but no other information. The xhr at that point shows nothing (readyState: 4, response: "", responseText: "", responseType: "", responseXML: null, status: 0, statusText: "")

If anyone has any words of wisdom to offer or even a far-fetched idea to try, I would appreciate it. Thanks.

Answer 1

Maybe it's not a problem of ajax request, but a problem of configuration of the server. Your server must accept file uploads maximum size of 1Mb.

If you use php set upload_max_filesize and post_max_size in your php.ini.

/* For example */
upload_max_filesize = 10M
post_max_size = 10M