Insert Image Problem with AJAX

Inserting Image Problem:

AJAX:

    ``$("#saveBtn").on('click', function(e) {
        e.preventDefault(); // don't allow form to submit normally


        // Set variables from input fields


        // AJAX code to insert data into database

// ONE TRY

        $.ajax({
            url: "{{ url('/admin/saveProduct') }}",
            type: 'POST',
            data: new FormData($("#formAddProduct")[0]),
            dataType:'json',
            async:false,
            processData: false,
            contentType: false,
            success: function (response)
            {
                alert(response);

                if (typeof response.successMsg !== 'undefined')
                {

                }
                if (typeof response.errorMsg !== 'undefined')
                {

                }

            }
        });

// ANOTHER TRY

        var pro_name = $("input[name=pro_name]").val();
        var pro_code = $("input[name=pro_code]").val();
        var pro_price = $("input[name=pro_price]").val();
        var pro_img = $("input[name=pro_img]").val();
        var token = $("#token").val();


        $.ajax({
            type: "POST",
            //data:{pro_name:pro_name, pro_code:pro_code, pro_price:pro_price},
            data: "pro_name=" + pro_name + "&pro_code=" + pro_code + "&pro_price=" + pro_price +"&pro_img=" + pro_img + "&_token=" + token,
            //serialize all form data
            url: "{{ url('/admin/saveProduct') }}",
            success: function (data) {
                //alert(data.success);
                if (typeof data.successMsg !== 'undefined')
                {
                    $("#successMsg").html(data.successMsg);
                    var x = document.getElementById("successMsg");
                    if (x.style.display === "none") {
                        x.style.display = "block";
                    }

                    $("#successMsg").fadeOut(2000);
                }

                else if (typeof data.errorMsg !== 'undefined')
                {
                    $("#errorMsg").html(data.errorMsg);
                    var x = document.getElementById("errorMsg");
                    if (x.style.display === "none") {
                        x.style.display = "block";
                    }

                    $("#errorMsg").fadeOut(2000);
                }
                // $("#msg").fadeOut(2000);
            }
        });

        //$("#msg").show();
    });`

CONTROLLER:

``public function saveProduct(Request $request) { $pro_name = $request->pro_name; $pro_code = $request->pro_code; $pro_price = $request->pro_price; $pro_img = 'picture.jpg'; $product_pic = $request->file('pro_img');

    if(isset($request->id))
    {
        $id = $request->id;

        $result_update = DB::table("products")->where('id', $id)->update([
                'pro_name' => $pro_name,
                'pro_code' => $pro_code,
                'pro_price' => $pro_price,
                'pro_img' => $pro_img,
            ]);

        if ($result_update)
        {
            return response()->json(array(
                'successMsg' => 'Product Updated Successfully!',
            ));
        }
        else
        {
            return response()->json(array('errorMsg' => 'Failed to update product. Please try again.'));
        }
    }

    else
    {
        $result = DB::table("products")->insert([

                'pro_name' => $pro_name,
                'pro_code' => $pro_code,
                'pro_price' => $pro_price,
                'pro_img' => $pro_img,

            ]);

        if($result)
        {

            // Code for upload image

            $product = new products();

            $lastId = $product->id;

            //echo "This is USER ID: " + $lastId;


            $productPic = $request->file('pro_img');
            $name = $lastId.$productPic->getClientOriginalName();

            $uploadPath = 'uploadPic/';

            $productPic->move($uploadPath, $name);

            $imageUrl = $uploadPath.$name;

            $updateImage = products::find($lastId);

            $updateImage->pro_img=$imageUrl;
            $updateImage->save();

            return response()->json(array(
                'successMsg' => 'New product is successfully added.',
            ));
        }
        else
        {
            return response()->json(array('errorMsg' => 'Failed to add new product. Please try again.'));
        }
    }

}`

BLADE:

`` {{----}}

                        <label>Product Name</label>
                        <input type="text" id="pro_name" class="form-control" name="pro_name"/>
                        <br>

                        <label>Product Code</label>
                        <input type="text" id="pro_code" class="form-control" name="pro_code"/>
                        <br>

                        <label>Product Price</label>
                        <input type="text" id="pro_price" class="form-control" name="pro_price"/>
                        <br>


                        <label>Product Image</label>
                        <input type="file" id="pro_img" class="form-control" name="pro_img"/>
                        <div id="image-holder"></div>
                        <br>

                        <input type="submit" class="btn btn-success btn-fill" value="Submit" id="saveBtn"/>
                    </form>`