Question: i have to insert data with ajax into database, now it insert data in to database,but not upload the image.

**ajax Code**

```
 $(document).on("click","#save", function(){
        jQuery.ajax({
            method :'post',
            url:''+APP_URL+'/products/add_product',
            data:$("#product_form").serialize(),
            success: function(response){ 
             $("#product_list").load("<?php echo url('products/tblproducts');?>").fadeIn("slow")

                }
            });    
  });

```

"product\_form" is ID of form. 

**Route**

```
         Route::post('products/add_product','admin\ProductsController@add_new_product');

```

**Controller Function**

```
public function add_new_product(Request $request){
  try{ 
        DB::beginTransaction(); 

         $product_image = NULL;
        if ($request->hasFile('product_photo')){ 
            $ext = $request->product_image->getClientOriginalExtension();
            $product_image = uniqid().".".$ext; 
            $file = $request->file('product_image');
            $destinationPath = public_path("products");
            $file->move($destinationPath, $product_image); 
        }
         $bdata['product_photo']=$product_image;
        $bdata['product_name']= $request->item_name;
        $bdata['product_barcode']= $request->barcode;   
        DB::table('tbl_products')->insert($bdata);
        DB::commit();
        $this->CreateMessages('add');
    }catch(\Exception $v){
         DB::rollback();
        $this->CreateMessages('not_added');
        throw $v;
    }

```

}

Answer: 
```
Try below code to upload image:

`$(document).on("click","#save", function(){
 var fd = new FormData();
 fd.append('product_photo',$('#id_of_image_uploader').prop('files')[0]);
 fd.append('item_name', $('#id_of_item_name').val());
 fd.append('barcode', $('#id_of_barcode').val());

 jQuery.ajax({
            method :'post',
            url:''+APP_URL+'/products/add_product',
            data: fd,
            cache: false,
            contentType: false,
            processData: false,
            success: function(response){ 
             $("#product_list").load("<?php echo url('products/tblproducts');?>").fadeIn("slow")
                }
            });
});`

```
You have to modify:

```
data:$("#product_form").serialize()

```

To become:

```
data: new FormData("#product_form")

```

And your form must have the `enctype` attribute set to `multipart/form-data`.