Uncaught SyntaxError: Unexpected token x with jQuery plugin?

Question

I'm currently using the uploadify jQuery plugin to upload images to a folder. The image upload part works fine but when I try to add extra form data it gives me the error Uncaught SyntaxError: Unexpected token x.

I'm retrieving data as JSON array and my response header content type is application/json but unsure why it's throwing this error.

My question is: based on the code below why is this error occurring and what would be a solution?

jQuery:

          $('#userfile').uploadify({
                'auto':false,
                'swf': base_url + 'assets/js/jquery/uploadify_31/uploadify.swf',
                'uploader': base_url + 'post/cover_upload',
                'cancelImg': base_url + 'assets/jquery/uploadify-cancel.png',
                'fileTypeExts':'*.jpg;*.bmp;*.png;*.tif;*.gif;*.jpeg',
                'fileTypeDesc':'Image Files (.jpg,.bmp,.png,.tif,.gif,.jpeg)',
                'fileSizeLimit':'10MB',
                'fileObjName':'userfile',
                'buttonText':'Select Photo(s)',
                'multi':true,
                'removeCompleted':false,
                'onUploadSuccess' : function(file, data, response) {
                    var responseObj = JSON.parse(data);
                    if(responseObj.file_name){
                        $('#cover-image').css("background-image", "url('http://localhost:8888/SimpleBlog/uploads/"+responseObj.file_name+"')");     
                        $('#cover-image').css("background-size", "cover");
                        $('#cover-image').css("background-position", "center");
                    }
                },
                'onUploadStart' : function(file) {
                    var uri = window.location.pathname.split('/').pop();
                    $('#userfile').uploadify("settings", 'formData', {'pst_str' : uri});
                }
            });

PHP - post/cover_upload

public function cover_upload(){

    $this->load->library('upload');

    $image_upload_folder = FCPATH . '/uploads';

    if (!file_exists($image_upload_folder)) {
        mkdir($image_upload_folder, DIR_WRITE_MODE, true);
    }

    if($this->input->post('pst_str') == "add"){
        $pst_str = $this->create_temp_post();
    }else{
        $pst_str = $this->input->post('pst_str');
    }

    $this->upload_config = array(
        'upload_path'   => $image_upload_folder,
        'allowed_types' => 'png|jpg|jpeg|bmp|tiff',
        'max_size'      => 36000,
        'max_width'     => 10240,
        'max_height'    => 7680,
        'remove_space'  => TRUE,
        'file_name'     => random_string('alnum', 16),
        'pst_str'       => $pst_str
    );

    $this->upload->initialize($this->upload_config);

    if ( !$this->upload->do_upload() ) {
        $upload_error = $this->upload->display_errors();
        echo json_encode($upload_error);
    }else{
        header("content-type:application/json");

        $file_info = $this->upload->data();
        $this->post_model->add_cover($pst_str, $file_info['file_name']);

        echo json_encode($file_info);

    }

}

Any help is greatly appreciated.

Answer 1

It appears to be the way your JSON is formatted. Try parsing your response this way.

   if(data.file_name){
     $('#cover-image').css("background-image", "url('http://localhost:8888/SimpleBlog/uploads/"+data.file_name+"')");     
      $('#cover-image').css("background-size", "cover");
      $('#cover-image').css("background-position", "center");
    }

http://jsfiddle.net/Ef7b3/