Issue with sending image over AJAX

Question

I created a on submit function that grabs different data along with images, if the user has uploaded them and ties the images into a FormData type object. This is than sent along with other data to the server to upload. My issue is that, I seem to be having trouble getting the images to the server along with other variables. All I get on success a blank response.

Here is what I am doing:

ElevationColorsForm.prototype.submit = function()
{
    // DEFUALT SET FORMDATA TO FALSE
    var formdata = false;
    // MAKE SURE BROWSER SUPPORTS FORM DATA
    if (window.FormData) {
        formdata = new FormData();
    }
    /************ DATA IS SENT TO SERVER TO BE STORED ON SAVE CHANGES *****************/
    var color_name = '';//<!-- CONTAIN NAME OF COLOR SET IN INPUT FIELD
    var color_file = '';//<!-- CONTAIN THE IMAGE TO BE UPLOADED // MOVED OVER TO THE formdata
    var color_type = [];//<!-- EITHER new_color OR current_color

    color_name = $(".color-item-input").map(function() 
    {       
        return this.value 

    }).get().join(", ");
    color_file = $(".color-item-file").each(function()
    {

        if(this.files.length > 0)
        {
            if (!!this.files[0].type.match(/image.*/)) {

                var file =  this.files[0];
                var reader;

                if ( window.FileReader ) {
                  reader = new FileReader();
                  reader.readAsDataURL(file);
                }
                if (formdata) {
                    formdata.append("images[]", file);
                }

                return file;    
            } 
            else
            {
                formdata.append("images[]", 'none');
                return 'false';
            }
        }
        else
        {
            formdata.append("images[]", 'none');
            return 'false'; 
        }

    }).get();
    $(".color-item").each(function()
    {           
        if($(this).hasClass('current-color'))
        {
            color_type.push('current-color');
        }
        else if($(this).hasClass('new_color'))
        {
            color_type.push('new-color');
        }

    });
    var RestrictionSelectActive = $(".restriction_active_ability option:selected").each(function()
    {           
        return this.value 

    }).get();

    var thisOne = this.Elevation.data.ifpe_id; // <!-- ELEVATION ID
    $.ajax({
        url: "actions/save_elevation_colors.php",
        type: "post",
        data:
        {
            'formData' : formdata,
            'elevation_id' : thisOne
        },
        processData: false,
        contentType: false,
        success: function(data){
            console.log(data);
            $(".message_box").text("Changes made!");
            $(".message_box").fadeIn(); 
            setTimeout(function(){
                $(".message_box").fadeOut();
                $(".message_box").empty();  
            },2000);
        },
        error:function(){
            alert("failure");
        }
    });
}

Here is my data response: {"status":"ok","code":1,"original_request":[]}

My server side is creating an array and storing all the the $_POST within the original_request and than json_encoding for retrieval.

suggestions or thoughts?

Answer 1

You cannot just add a FormData object as a property to the data object. You can only send one FormData object alone, which will get encoded appropriately. If you pass a key-value object, jQuery will try to www-form-urlencode that. See also How to send FormData objects with Ajax-requests in jQuery?.

ElevationColorsForm.prototype.submit = function() {
    if (!window.FormData) {
        alert("Sorry, your browser does not support uploading files with Ajax.");
        throw new Error("no FormData support");
    }

    function getValue() { return this.value; }

    var formdata = new FormData();

    var color_name = $(".color-item-input").map(getValue).get().join(", ");
    var RestrictionSelectActive = $(".restriction_active_ability option:selected").map(getValue).get();
    var color_type = $(".color-item").map(function() {           
        if ($(this).hasClass('current-color'))
            return 'current-color';
        if ($(this).hasClass('new_color'))
            return 'new-color';
        return '';
    }).get();

    $(".color-item-file").each(function() {
        if(this.files.length > 0 && /image.*/.test(this.files[0].type)) {
             formdata.append("images[]", this.files[0]);
        } else {
            formdata.append("images[]", 'none');
        }
    });

    formdata.append('elevation_id', this.Elevation.data.ifpe_id);
//  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    $.ajax({
        url: "actions/save_elevation_colors.php",
        type: "post",
        data: formdata,
//            ^^^^^^^^
        processData: false,
        contentType: false
    }).then(function(data){
        console.log(data);
        $(".message_box").text("Changes made!");
        $(".message_box").fadeIn(); 
        setTimeout(function(){
            $(".message_box").fadeOut();
            $(".message_box").empty();  
        },2000);
    }, function(){
        alert("failure");
    });
}