uploading FormData with file attachment

Question

I'm using jquery to upload form data with file attachment.

The server is a jquery restify. the problem that I'm having is that I get the image file (called cocktail_image_file_input) as a string: which means that the value is the following string:

[object FileList]

I'm supposed to see it in req.files but instead i see it in req.context.cocktail_image_file_input as a regular string data.

I'm trying to send the data using the following code:

$('#finish_cocktail_button').click(
    function () {
        var data = new FormData();
        var cocktailImageFile = $('#cocktail_image_file_input')[0].files;
        if (cocktailImageFile.length == 1) {
            data.append('cocktail_image_file_input',cocktailImageFile);
        }
        var cocktailName = $('#cocktail_name_input').val().trim();
        var cocktailSourceType = $('#cocktail_source_type_select').val();
        var cocktailSourceName = $('#cocktail_source_name_input').val();
        var cocktailSourceDesc = $('#cocktail_source_desc_input').val();
        if (cocktailName.length < 3) {
            alert('please enter a valid cocktail name');
        } else {
            var cocktailSteps = [];
            $('#cocktail_steps_ul li').each(
                function () {
                    var step = [];
                    $('span', this).each(function(){step.push($(this).text())});
                    fullStep = step.join(commandsSplitSign);
                    cocktailSteps.push(fullStep);
                }
            );
            if (cocktailSteps.length < 2) {
                alert('really? less then 2 steps cocktail ?');
            } else {
                data.append('cocktail_name',cocktailName);
                data.append('cocktail_steps',JSON.stringify(cocktailSteps));
                data.append('cocktail_source_type',cocktailSourceType);
                data.append('cocktail_source_name',cocktailSourceName);
                data.append('cocktail_source_desc',cocktailSourceDesc);
                $.ajax({
                    url: 'http://api.myalcoholist.com:8888/cocktail/add_cocktail',
                    crossDomain: true
                    , type: 'POST',
                    enctype: 'multipart/form-data',
                    processData: false,
                        contentType: false
                    , data:data
                }).done(function (data) {
                    alert(data);
                });
            }
        }
    }
);

what am I missing ?

Answer 1

you are missing [0]: data.append('cocktail_image_file_input',cocktailImageFile[0])

This will select only the file object, otherwise you try to append the FileList object which isn't recognized by FormData.