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
+2
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
+3
Dima Alek6y ago
And how should my controller look like?
+2
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!
+4