Html5 camera image not uploading

Question

I have followed an article to access mobile camera to take a picture. Link to article : https://codepen.io/macx/pen/ZLJoKN

It works fine but the image taken from camera is not uploaded on server. To upload image to server I am using below script

 <script type="text/javascript">
        $("body").on("click", "#btnUpload", function () {
            var formData = new FormData();
            formData.append("fileName", $("#fileName").val());
            formData.append("file", $("#file")[0].files[0]);
            $.ajax({
                url: 'UploadService.asmx/UploadFiles',
                type: 'POST',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function (fileName) {
                    $("#fileProgress").hide();
                    $("#lblMessage").html("<b>" + fileName + "</b> has been uploaded.");
                },
                xhr: function () {
                    var fileXhr = $.ajaxSettings.xhr();
                    if (fileXhr.upload) {
                        $("progress").show();
                        fileXhr.upload.addEventListener("progress", function (e) {
                            if (e.lengthComputable) {
                                $("#fileProgress").attr({
                                    value: e.loaded,
                                    max: e.total
                                });
                            }
                        }, false);
                    }
                    return fileXhr;
                }
            });
        });
    </script>

Code in my web service

 [WebMethod]
    public void UploadFiles()
    {
        //Create the Directory.
        string path = HttpContext.Current.Server.MapPath("~/Uploads/");
        if (!Directory.Exists(path))
        {
            Directory.CreateDirectory(path);
        }
 
        //Fetch the File.
        HttpPostedFile postedFile = HttpContext.Current.Request.Files[0];
 
        //Fetch the File Name.
        string fileName = HttpContext.Current.Request.Form["fileName"] + Path.GetExtension(postedFile.FileName);
 
        //Save the File.
        postedFile.SaveAs(path + fileName);
 
        //Send OK Response to Client.
        HttpContext.Current.Response.StatusCode = (int)HttpStatusCode.OK;
        HttpContext.Current.Response.Write(fileName);
        HttpContext.Current.Response.Flush();
    }

If I select the file from folder, it works properly, but if the image is taken by mobile camera and the same is not uploaded.

What should we do here? save the image when it is clicked from camera? Your help is appreciated