How to send file data using Dajaxice?

Question

I am using ajax for my site. I have successfully used jQuery.ajax() to asynchronously upload a file to the server. I use Dajax and Dajaxice , so I plan to use this application to upload files. I tried this example. It is working fine. But if I add the file field to my html form, it will not send the file to the 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 was asked in many places, but he never answered.

Answer 1

There is currently no data to download files in dajax / dajaxice files.

I used dajax in several projects and circumvented this using blueimp / jquery-file-upload and a django view that accepts the POST of the uploaded file and returns the JSON string to the client.

This is a less perfect solution, not least because the jquery-file-upload button is different from the usual html form elements, you can create the whole form using jQuery-ui, although this is a lot of extra work.

Both, dwr , which is pretty much dajax for Java, and a delicious pie for django really offer file downloads, so theoretically this should be possible.

I am happy to post a sample of my ajax solution if anyone finds it useful.

Answer 2

I recently ran into this problem. So, I searched a bit and found some answers.

It is working fine. But if I add the file field to the html form, it will not send the file to the server.

The serialize() method used in the doc example. But according to jQuery doc :

Data from file selection items is not serialized.

In addition, there is no clear way to get the ajax file to load, since JS does not have access to the outside of the client browser. Thus, I do not think dajaxice can be used.

The simplest hack I found is to submit the form to an invisible iframe using the target option:

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

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

A more detailed process is described here.