How do I submit a form with a large file upload and send ajax requests?

Question

This works in other browsers but not in chrome. I am trying to allow users to upload large files and have an ajax call to update them on the progress of the file upload.

So a unique ID is generated on the client side and added to the action of the form before sending. Then the form is submitted (form only contains a file upload input) and an ajax call is made to get the progress of the upload.

The ajax call goes to another page and uses the ID to lookup the upload.

I am using JQuery 1.5.1. Debugging this and putting something on the error function give me nothing other than "error". Not very helpful. I used Chrome's debugger and it just says failed to load resource xxxx.aspx. xxx.aspx is the URL i needed. Turns out that there seems to be some sort of conflict between the form and the ajax call.

Is there some way to get around this?

Answer 1

Use SlickUpload

It is a server control and module that does exactly what you are looking for and takes less than 10 minutes to setup.

• Documentation: http://krystalware.com/Products/SlickUpload/Documentation/overview/

Answer 2

not exactly an answer to your question, but a link to a tool that can really help you drill down and find good error messages, step through javascript code and such would be firebug for Chrome, I got the IE and Chrome versions working and use it very regularly, it has been a life saver and greatly has decreased debugging time:

http://getfirebug.com/releases/lite/chrome/

I would suggest making firebug a common tool in your debugging arsenal.

Answer 3

you should really look at SWFupload, a great flash based uploader, with concurrent upload and progressbar support. Also it makes it really easy to use server-side, you dont need to implement upload percentage view as it client-side based.