Upload the Summernote file to the server

Question

I am currently executing the following instruction to handle loading an image from a summernote control in ASP.NET MVC Razor.

Server Code:

[HttpPost] public ActionResult UploadImage(HttpPostedFileBase file) { var imageUrl = UpdateProfilePicture(file); return Json(imageUrl); } 

A client side ajax:

 <script> $('.summernote').summernote({ height: 200, focus: true, onImageUpload: function (files, editor, welEditable) { sendFile(files[0], editor, welEditable); } }); function sendFile(file, editor, welEditable) { console.log(file); $.ajax({ data: {file:file}, type: "POST", url: "@Url.Action("UploadImage","Message")", cache: false, contentType: false, processData: false, success: function (url) { editor.insertImage(welEditable, url); } }); } 

I got the result on the server side, but the HttpPostedFileBase file parameter is null

Some examples say this works, but my code does not work functionally!

Any ideas?

Answer 1

In your method, use the Request object to retrieve the file as follows:

  [HttpPost] public string UploadImage() { for (int i = 0; i < Request.Files.Count; i++) { var file = Request.Files[i]; var fileName = Path.GetFileName(file.FileName); var path = Path.Combine(Server.MapPath("~/Images/"), fileName); file.SaveAs(path); } return YOUR UPLOADED IMAGE URL; }