Question

I have an Ajax file upload with this code:

$('#photo-input:file').change(function() {
                var photo = this.files[0];
                var caption = $('.photo-caption').val();
                type = photo.type;
                if (photo.type != 'image/png' && photo.type != 'image/jpg' && !photo.type != 'image/gif' && photo.type != 'image/jpeg' ) {
                    alert('Sorry, you may only upload png, jpg, jpeg, or gif images.');
                    return false;
                }

                $('.photo-post-submit').click(function () {
                    var formData = new FormData();
                    formData.append('photo', photo);
                    $.ajax({
                        url: '/post',
                        type: 'POST',
                        data: {'photo' : formData, 'caption' : caption},
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function () {
                        }
                    }, 'json');
                });

            });

But when I call request.POST['caption'] or request.POST['photo'] I get the error:

Not an HTML form submission (Content-Type: application/xml)

What’s going wrong?

Answer 1

It looks as if you got confused between the $.post and $.ajax methods, since you are passing in a separate json argument (which $.ajax doesn’t accept as a dataType argument).

Moreover, you really should not set the contentType to false, and you are setting processData to false, making for a very confusing mix as to what Pyramid will have to do with whatever jQuery makes of that combination.

To POST to a server with the cache parameter set to false, use:

$.ajax({
    url: '/post',
    type: 'POST',
    data: {'photo' : formData, 'caption' : caption},
    cache: false,
    dataType: 'json',
    success: function () {
    }
});

Note that the dataType is set to json, which means your Pyramid view needs to return JSON, the jQuery AJAX code is expecting a JSON response.