how to send file data using Dajaxice?

Question

I am using ajax for my website. I have successfully used jQuery.ajax() to asynchronously upload file to server. I am using Dajax and Dajaxice therefore I plan to use these application for file upload as well. I tried this example. It is working fine. But if I add file field into my html form, it does not send file to server. My html form looks like

<form id="myform" action="/file/" method="post" enctype="multipart/form-data">
<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='AaSmyBEwQLSD3YghRAD9Cf2uxEjzESUe' /></div>
<p><label for="id_docfile">Select a file</label> max. 42 megabytes</p>
<p><input type="file" name="docfile" id="id_docfile" /></p>
<p><input type="submit" value="Upload" /></p>
</form>

This question has been asked at many place but never answered.

Answer 1

Afaik there is currently no provision within dajax / dajaxice to upload files.

I have used dajax in a few projects and have got round this by using blueimp/jquery-file-upload and a django view that accepts a POST of the upload file and return a JSON string to the client.

This is a less than perfect solution not least because the jquery-file-upload button is styled differently from normal html form elements, it is possible to style the whole form using jQuery-ui, although this is a lot of additional work.

Both, dwr which is pretty much dajax for Java, and tasty pie for django do offer file uploading, so in theory it should be possible to implement it.

I'm happy to post a sample of my ajax solution if anyone would find them useful.

Answer 2

I've also faced this problem recently. So, I've digged a little and discovered some answers.

It is working fine. But if I add file field into my html form, it does not send file to server.

There's serialize() method used in the doc example. But according to the jQuery doc:

Data from file select elements is not serialized.

Also, there's no clear way to get ajax file upload, because JS doesn't have access to the outside of the client browser. So, I don't think it's possible to make using dajaxice.

The easiest hack, I've found is to post form to the invisible iframe using target option:

<form method='POST' action='/upload' enctype='multipart/form-data' target='submit-iframe'>

so, only the iframe will be refreshed. Using js you than can get data from it catching the load() event.

More detailed process described here