Asp.net Image uploading on server side using generic handler

Question

I am trying to upload image on server side by using below code:

<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>

Below is Client Side javascript:

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);
    }
});
});

Below is my generic handler class code:

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);
      }
    }
    context.Response.Write(str_image);
}

Problem: when I select image it successfully selected but when sendFile function runs it shows me below error:

error: function () {
        alert("Whoops something went wrong!");
    }

Question: How can I upload my image successfully? How I solve above error?