Ajax form submission, files not getting submitted - django

Question

I am trying to implement AJAX form submission for my Django forms.
The files are getting submitted without AJAX, so the logic at the serverside seems to be working. and with ajax, the rest of the values except the files get submitted.
Here is the code that I am implementing,
AJAX form Submission
(function() {
// using jQuery
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
crossDomain: false, // obviates need for sameOrigin test
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type)) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
})();
jquery
$('#save-form').live('submit', function(event) { // catch the form's submit event
event.preventDefault();
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: '/save/', // the file to call
success: function(response) { // on success..
$('#modalsave-form').html(response); // update the DIV
}
});
return false;
});
HTML Form
<form class="form-horizontal" id="save-form" enctype="multipart/form-data" method="post" action="/save/">
<div class="control-group">
<label class="control-label" for="id_body">Write Something</label>
<div class="controls">
<textarea class="typeaheadfun" id="id_body" rows="3" cols="100" name="body" placeholder="Scribble Body" style="width: 455px;"></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label" for="id_media">Add a File</label>
<div class="controls">
<input type="file" name="media" id="id_media"/>
</div>
</div>
<hr>
<input class="btn btn-primary pull-right" type="submit" value="Post!" />
<br>
{% csrf_token %}
</form>

Answer 1

When you submit an HTML form it usually sends form's data to the server using either GET or POST data HTML headers. When however you need to send binary data or attached file(s) to the server efficiently, HTML as part of it's spec has a different method for sending such data. enctype attribute of <form> tag specifies using which method should the browser send the data to the server. To send files, multipart/form-data is widely used encoding method.
When you try to send form without ajax, browser sends file data to the server using multipart/form-data encoding however when you submit the form using ajax you do the following:
data: $(this).serialize()
That step does not encode data the same way as server expects the data hence your ajax does not work.
To make it work, instead of manually submitting form's data, you should submit the whole form using ajax. Doing it manually is tricky plus there are plugins which do that already. One such plugin is jQuery Form Plugin. It allows to submit the whole form using ajax. The following is js code which should give you an idea on how to integrate it with your setup:
$('#save-form').live('submit', function(event) {
event.preventDefault();
$(this).ajaxSubmit({
url: '/save/', // the file to call
success: function(response) {
$('#modalsave-form').html(response);
}
});
return false;
});

Answer 2

Another option is to use the FormData interface that absolves the need for a plugin
https://developer.mozilla.org/en-US/docs/Web/API/FormData
Sample Code: (Adapt to suit your needs)
`
$('#fupload').click(function(){
var xhr = new XMLHttpRequest();
var token = $('input[name="csrfmiddlewaretoken"]').prop('value');
$.ajaxSetup({
headers: { "X-CSRFToken": token }
});
var formData = new FormData($('form')[0]);
formData.append('file',xhr.file);
$.ajax({
url: '/myurl/', //server script to process data
type: 'POST',
xhr: function() { // custom xhr
myXhr = xhr;
//if(xhr.upload){ // check if upload property exists
// xhr.upload.addEventListener('progress',progressHandlingFunction, false);
// for handling the progress of the upload
//}
return xhr;
},
// Form data
data: formData,
//Ajax events
success: function(server_response){
$( '#path' ).val("Success");
},
error: function(jqXHR, textStatus, errorThrown ){
$( '#path' ).val(errorThrown);
},
//Options to tell JQuery not to process data or worry about content-type
cache: false,
contentType: false,
processData: false
});
});
`