Best way to handle file uploads from Backbone.js to Rails-based API through a proxy?

Question

We have a Backbone.js app that supports file uploads using plupload. The uploads are sent through a proxy (rack-reverse-proxy at the moment, but switching to straight nginx shortly) to a separate Rails app through an API.

This API has been in use for quite some time and can handle uploads of hundreds of MB. We don't think it is the problem.

When uploads are performed through BB.js and the proxy, however, they can stop at different points, but mostly it's at the sub-1.5MB point.

Of note is that attempts to upload multiple files less than 1MB each work fine in the same situations. I can upload 100 1MB files, but I can't upload any files more than, say, 2MB.

Some of the exceptions we get are from the BB.js app are:

Uncaught SyntaxError: Unexpected end of input
SyntaxError: JSON Parse error: Unexpected EOF

What's the best way to approach this? The main culprit seems to be a slower network connection (uploads to the server over fiber-based home network tend to complete, whereas uploads over the DSL-line at work tend to fail), but I can't imagine it's that cut and dry.

Is it our proxy setup? Will switching to nginx fix this? What's the best way to set up nginx for this purpose?

EDIT to answer Maurício's comment:

Nothing is returned from the server. Here are the headers as reported by WebKit Network Inspector (hostname changed):

Request URL:http://our.site.com/api/files
Request Headersview source
Content-Length:131661475
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryHwVBiFW8AIuh18Bt
DNT:1
Origin:http://our.site.com
Referer:http://our.site.com/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2
Request Payload
------WebKitFormBoundaryHwVBiFW8AIuh18Bt
Content-Disposition: form-data; name="name"

861-railsconf2012-using-backbone-js-with-rails-patterns-from-the-wild-large.mp4.mpg
------WebKitFormBoundaryHwVBiFW8AIuh18Bt
Content-Disposition: form-data; name="file_entry[folder_id]"

32984
------WebKitFormBoundaryHwVBiFW8AIuh18Bt
Content-Disposition: form-data; name="file"; filename="861-railsconf2012-using-backbone-js-with-rails-patterns-from-the-wild-large.mp4.mpg"
Content-Type: video/mpeg


------WebKitFormBoundaryHwVBiFW8AIuh18Bt--

After that, there is no response. The inspector reports both the status and time as Pending. In this most recent case, the transfer size is 0B, though I know data was sent as I can monitor outgoing traffic hitting 900K/sec for maybe 10-15 seconds, and then dying back down to normal (1-2K/sec).

What's the output that's received by the browser? Did you use CURL or anything like it to make the same call and see if it works through the proxy? — Maurício Linhares
– Maurício Linhares, Commented Jul 22, 2012 at 21:52
Maurício, I've added details. Let me know if you need more. — seanhussey
– seanhussey, Commented Jul 23, 2012 at 15:29

seanhussey · Accepted Answer · 2012-07-28 00:53:59Z

0

This all boiled down to an nginx configuration. The client_max_body_size directive hadn't been set. The default is 1M. Increasing that seems to have fixed the issue.

The nginx wiki entry for client_max_body_size ( http://wiki.nginx.org/HttpCoreModule#client_max_body_size ) states:

"It should be noted that web browsers do not usually know how to properly display such an HTTP error."

I haven't checked into how Chrome and Safari handle the 413 return code, but this could account for why I seemed to get no response from the server at all.

edited Jul 28, 2012 at 0:53

answered Jul 23, 2012 at 18:50

seanhussey

3793 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Best way to handle file uploads from Backbone.js to Rails-based API through a proxy?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related