serialize data:image/png;base64 data type json

Hello guys, need some guide honestly already post in stackoverflow but nothing respond there so i repost in here, what i have been developing is

• Form in modal bootsrap which has crop and resize images before upload
  

Here is demo (please see and tested first) in view file the reason why i make input type="text" to aplicated new revision to old projects

Here is my js

Code:

$('#btnsubmit').on("click", function(e) {
    e.preventDefault();
    $.ajax({
        url: base_url + "welcome/add",
        type: "POST",
        data: $('#form').serialize(), //extract value in form
        dataType: "JSON",
        success: function(data) {
            if (data.status) //if success close modal and reload ajax table
            {
                alert('success');
            } else {
                alert('failed');
            }
            $('#btnsubmit').text('save'); //change button text
            $('#btnsubmit').attr('disabled', false); //set button enable
         }
    });

and this is my controller

Code:

$dataURL=$this->input->post('images_crop');
    $dataURL = $_POST["imageData"];
    $dataURL = str_replace('data:image/png;base64,', '', $dataURL);
    $dataURL = str_replace(' ', '+', $dataURL);
    $image = base64_decode($dataURL);
    $filename = date("d-m-Y-h-i-s") . '.' . 'png'; //renama file name based on time

    $path = set_realpath('uploads/product/');
    file_put_contents($path. $filename, $image);

    $data = array (
        'id_product_post'=>$this->input->post('id_product_post'),
        'foto'=>$filename
       );
    $this->db->insert('li_product_foto',$data);

all i have got so far blank image in folder with size 0kb, Thanks for some one reading, vote up, vote down, comments