Uploading File using generic handler

I was creating an web application in which I have a button and image tag in repeater. I want to upload image on server side without refreshing my webpage so for that I use generic handler class. Below is my page code:

<form id="form1" runat="server"><div class="container"><div class="table-responsive"><table id="Dg_Author" class="table table-striped table-bordered row-border hover order-column" cellspacing="0" width="100%"><thead><tr role="row"><th>Name</th><th>Email</th><th>Phone</th><th>Image</th><th class="text-center">Upload</th><th>More Options</th></tr></thead><tbody><asp:Repeater ID="Repeater1" runat="server"><ItemTemplate><tr role="row"><td><label runat="server"><%# Eval("Name") %></label><input type="text" runat="server" style="display: none;" /></td><td><label runat="server"><%# Eval("Email") %></label><input type="text" runat="server" style="display: none;" /></td><td><label runat="server"><%# Eval("Phone") %></label><input type="text" runat="server" style="display: none;" /></td><td><img runat="server" id="ShowImage" src='<%# "~/MediaUploader/"+ Eval("Image")+".jpg" %>' alt="Image not found" /></td><td class="text-center"><button id="optional_upload" type="button"></button><input id="f_UploadImage" style="display:none;" type="file" /></td><td id="optional" class="text-center;"><asp:Button runat="server" CssClass="optional_btn1" UseSubmitBehavior="False" OnClientClick="EditRow(); return false;" /><asp:LinkButton runat="server" CssClass="optional_lbtn1" Text="Update"></asp:LinkButton><asp:Button CssClass="optional_btn2" runat="server" UseSubmitBehavior="False" /></td></tr></ItemTemplate></asp:Repeater></tbody></table></div></div></form>

Below is my client side code for uploading image:

function sendFile(file) {
    var formData = new FormData();
    formData.append('file', $('#f_UploadImage')[0].files[0]);
    $.ajax({
        type: 'post',
        url: 'fileUploader.ashx',
        data: formData,
        success: function (status) {
            if (status != 'error') {
                var my_path = "MediaUploader/" + status;
                //$("#myUploadedImg").attr("src", my_path);
            }
        },
        processData: false,
        contentType: false,
        error: function () {
            alert("Whoops something went wrong!");
        }
    });
}
var _URL = window.URL || window.webkitURL;
$(document).ready(function () {
    $('#optional_upload').click(function (e) {
        e.preventDefault();
        $('#f_UploadImage').trigger('click');
    });
    $('#f_UploadImage').change(function () {
        alert(1);
        var file, img;
        if ((file = this.files[0])) {
            img = new Image();
            img.onload = function () {
                sendFile(file);
            };
            img.onerror = function () {
                alert("Not a valid file:" + file.type);
            };
            img.src = _URL.createObjectURL(file);
        }
    });
});

and below is my generic handler.ashx code:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;

namespace UploadImage
{
    /// <summary>
    /// Summary description for fileUploader
    /// </summary>
    public class fileUploader : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            try
            {
                string dirFullPath = HttpContext.Current.Server.MapPath("~/MediaUploader/");
                string[] files;
                int numFiles;
                files = System.IO.Directory.GetFiles(dirFullPath);
                numFiles = files.Length;
                numFiles = numFiles + 1;
                string str_image = "";

                foreach (string s in context.Request.Files)
                {
                    HttpPostedFile file = context.Request.Files[s];
                    string fileName = file.FileName;
                    string fileExtension = file.ContentType;

                    if (!string.IsNullOrEmpty(fileName))
                    {
                        fileExtension = Path.GetExtension(fileName);
                        str_image = "MyPHOTO_" + numFiles.ToString() + fileExtension;
                        string pathToSave_100 = HttpContext.Current.Server.MapPath("~/MediaUploader/") + str_image;
                        file.SaveAs(pathToSave_100);
                    }
                }
                //  database record update logic here  ()

                context.Response.Write(str_image);
            }
            catch (Exception ex)
            {

            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Problem is: After selecting an image from input type file below error showing from sendFile funtion:

alert("Whoops something went wrong!");

and no image was uploaded.  how can I solve this.

NOTE:

When simply I create a web form and without repeater and put all above code staff and run code works fine and file was uploading.