Django form not valid (form.is_valide() return False) on AJAX request

Question

I have a form for a model which contains ImageField and i want user to be able to submit image via AJAX.

Problem is that form.is_valide() returns False. When i dont use AJAX everything seems to be okay. I tried couple of SO answers on similar questions but with no luck.

View (simplified version)

def index(request):

    if request.method  == 'POST':
        form = UploadForm(request.POST, request.FILES)
        if form.is_valid() :
            description = form.cleaned_data['description']
            photo = form.cleaned_data['photo']
            return HttpResponse(json.dumps({'message':"some success msg"}))
        else:

            return HttpResponse(json.dumps({'message':'not ok'}))
    else:
        form = UploadForm()
    return render(request, 'photos/index.html', {'form':form})

HTML

<form id = "form" action="{% url 'photos:index' %}" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value="Submit" />
</form>

JS/JQuery

 $(document).ready(function(){

    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));
    }

function sameOrigin(url) {
    // test that a given url is a same-origin URL
    // url could be relative or scheme relative or absolute
    var host = document.location.host; // host + port
    var protocol = document.location.protocol;
    var sr_origin = '//' + host;
    var origin = protocol + sr_origin;
    // Allow absolute or scheme relative URLs to same origin
    return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
        (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
        // or any other URL that isn't scheme relative or absolute i.e relative.
        !(/^(\/\/|http:|https:).*/.test(url));
    }

    $('#form').submit(function(e){
        e.preventDefault();
        $.ajax({
            url:'/',
            type: 'POST',
            data: new FormData($(this)),
            cache:false,
            processData: false,
            contentType: false,
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) {
                 // Send the token to same-origin, relative URLs only.
                 // Send the token only if the method warrants CSRF protection
                 // Using the CSRFToken value acquired earlier
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
            },
            success: function(data){
                alert("yo success");
                alert(data.message);
            }
        });
    });
});

Any help i can get is much appreciated. Thanks

Answer 1

Solution is to manually fill FormData object

JS/JQuery

$('#form').submit(function(e){
        e.preventDefault();

        //fill FormData with form fields

        var data = new FormData($(this));
        data.append("photo", $("#id_photo")[0].files[0]);
        data.append("description",$("#id_description").val());

        $.ajax({
            url:'/',
            type: 'POST',
            data: data,
            cache:false,
            processData: false,
            contentType: false, 
            //part related to Django crsf token
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) {
                 // Send the token to same-origin, relative URLs only.
                 // Send the token only if the method warrants CSRF protection
                 // Using the CSRFToken value acquired earlier
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
            },
            success: function(data){
                var parseData = $.parseJSON(data);
                console.log(parseData.message);
            }
        });

    });

Answer 2

When a Django form is passed data, it's considered 'Bound' at that point, and calling form.is_valid() will do a full clean on the bound data to the form and set an instance attribute self._errors. Outputting the data from self._errors will probably give you the information needed in order to submit valid data to the form.

My suggestion would be to debug the source code as such...

def index(request):

    if request.method  == 'POST':
        form = UploadForm(request.POST, request.FILES)
        if form.is_valid() :
            description = form.cleaned_data['description']
            photo = form.cleaned_data['photo']
            return HttpResponse(json.dumps({'message':"some success msg"}))
        else:
            # output form.errors here and figure out what fields aren't passing validation
            return HttpResponse(json.dumps({'message':'not ok'}))
    else:
        form = UploadForm()
    return render(request, 'photos/index.html', {'form':form})