jquery - How to send form data with jquery cropper?

Question

I am using cropper jquery library and now I am sending POST request to server, which contains form data and cropped image

 display_img.cropper('getCroppedCanvas').toBlob(function (blob) {
    var formData = new FormData();

    formData.append('croppedImage', blob);

    var data = {
        name: name,
        description: description,
        croppedImage: formData,
        nsfw: nsfw,
        cover: cover,
        pictures: pictures,
        videos: videos,
        mods: mods,
    };

    $.ajax({
        type: 'POST',
        url: '/kategorija',
        data: data,
        processData: false,
        contentType: false,
        success: function (data) {
            console.log(data);
        },
        error: function (err) {
            console.log(err);
        }
    });
});

But this doesn't work, because on server I get empty request. When I remove croppedImage from data, and in ajax processData and contentType, it works and I recieve all other data. So how can I send formData with other data?

Answer 1

You have to add all your data to the FromData object(via append) then pass the FormData object as the data parameter in the ajax request.