How to overwrite file in database with ajax

Dima Alek

I'm trying to replace some file in my DB using ajax call. I can not understand how to pass data(file) from my tag into controller, maybe somebody can give me an advise...

My controller:

[HttpPost]
public JsonResult UpdateFile(int id, HttpPostedFileBase postedFile)
{
byte[] bytes;
using (BinaryReader br = new BinaryReader(postedFile.InputStream))
{
bytes = br.ReadBytes(postedFile.ContentLength);
}
using (FileDBEntities db = new FileDBEntities())
{
tblFile fupt = db.tblFiles.Where(x => x.id == id).FirstOrDefault();
fupt.Name = Path.GetFileName(postedFile.FileName);
fupt.ContentType = postedFile.ContentType;
fupt.Data = bytes;
db.SaveChanges();
return Json(new { success = true }, JsonRequestBehavior.AllowGet);
}
}

my JS:

function loadFileData() {
$.ajax({
type: "GET",
url: "/File/FileIndex",
dataType: "JSON",
success: function (data) {
$.each(data, function (i, val) {
var trow = $('');
var trowb = $('').data("id", val.id);
trow.append('' + val.Name + " " + '');
trowb.append('');
tab.append(trow);
tab.append(trowb);
});
$("#showFiles").html(tab);
},
error: function () {
alert("Failed! Please try again.");
}
});
var tab = $('');
tab.on("click", "#upload", function (e) {
//$('#uploadStatus').html("ok");
var tr = $(this).closest("tr");
var id = tr.data("id");
var input = $('#choose').file;
$.ajax({
type: "POST",
url: "/File/UpdateFile",
dataType: "JSON",
data: {
id: id,
pospostedFile: input
},
success: function (data) {
$('#uploadStatus').html("ok");
loadFileData();
},
error: function () {
alert("Failed! Please try again.");
}
});
});
}

Debbuger says me that I'm sending "null" as "postedFile". How can I take this value from input and feed it to my Controller?

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Laxmidhar Sahoo6y ago
Hi

Bellow link has a example

https://www.aspsnippets.com/Articles/Upload-file-using-jQuery-AJAX-in-ASPNet-MVC.aspx

Thanks and regards
Laxmidhar Sahoo6y ago
Hi

1 - Your api method is post .But in ajax call you provide get method
2- the url shoud match the controller name and method name

type: "POST",
url: "/Controllername/UpdateFilex",
Thanks and regards
Dima Alek6y ago
And how should my controller look like?
Pankajkumar Patel6y ago
Hi Dima Alek,

To overwrite file in database with ajax you can use "JQuery Ajax uploading a file and other values from client side" like following:
On client side:
function upload() {
  var formData = new FormData();
  var totalFiles = document.getElementById("FileUpload").files.length;

  for (var i = 0; i < totalFiles; i++) {
    var file = document.getElementById("FileUpload").files[i];

    formData.append("FileUpload", file);
formData.append("guid", theGuid);
  }

  $.ajax({
    type: 'post',
    url: '/myController/Upload',
    data: formData,
    dataType: 'json',
    contentType: false,
    processData: false,
    success: function (response) {
      alert('succes!!');
    },
    error: function (error) {
      alert("errror");
    }
  });
}
On server side:
Request.Form["guid"];

Request.Files["FileUpload"];
For more details:

https://stackoverflow.com/questions/35783168/jquery-ajax-uploading-a-file-and-other-values-from-client-side

Hope, this will help you!