Sending data inside the type file to the controller in ASP.NET MVC

Question

I want to sending a photo for posting blog!

I have defined two properties in my model. One for the name of the photo to be stored in the database and And another one to get the file and save to the server (in Resources Folder).

this is my model code :

[DataType(DataType.Upload)]
public HttpPostedFileBase File { get; set; }

public string BlogImage { get; set; }

this is my HTML code :

<div class="form-group col-sm-8">
                    <label for="BlogImage">Blog Image</label>
                    <input type="file" class="form-control" id="BlogImage">
                </div>

I want to send the file to the server with AJAX.

 var myAdminBlog = {
    BlogImage: $("#BlogImage").val(),
    File: $("#BlogImage").val()
};

$.ajax({
    url: 'AddPostBlog',
    data: JSON.stringify(myAdminBlog),
    type: "POST",
    contentType: "application/json;charset=utf-8",
    dataType: "json",
    success: function (data) {
        alert(data);
    },
    error: function (errormessage) {
        alert(errormessage);
    }
});

This is my Ajax Code.

Finally, you can see the controller code.

 public JsonResult AddPostBlog(csAdminBlog myAdminBlog)
    { 
       int UploadMessage = UploadImage(myAdminBlog);
       return Json("Post Sended", JsonRequestBehavior.AllowGet);

    }

My problem is exactly that I do not know how to get the file from javascript.

I tried to use the $("#BlogImage").val() method, but failed.

Note: All codes work well and all information is sent to the controller , Only the item that is not sent is the File option

Use `FormData` and set the correct ajax options. Refer [How to append whole set of model to formdata and obtain it in MVC](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) — , Oct 13 '18 at 08:03

Nikhil Ghuse · Answer 1 · 2018-10-13T07:45:27.977

0

If it is not necessary to be in jQuery then you can use document.getElementById(BlogImage).files[0]

Create Class like this

Public Class UploadFile
{
[DataType(DataType.Upload)]
public HttpPostedFileBase File { get; set; }

public string BlogImage { get; set; }

}

Then in javascript

 var UploadFile= new Object();
 UploadFile.BlogImage = $("#BlogImage").val();
 UploadFile.File = document.getElementById(BlogImage).files[0];

$.ajax({
   url: 'AddPostBlog',
   data: JSON.stringify({uploadFile:UploadFile}),
   type: "POST",
   contentType: "application/json;charset=utf-8",
   dataType: "json",
   success: function (data) {
      alert(data);
   },
   error: function (errormessage) {
      alert(errormessage);
   }

});

And In Controller Method

 public JsonResult AddPostBlog(UploadFile uploadFile)
 { 
  //Your Code

}

edited Oct 13 '18 at 07:45

answered Oct 13 '18 at 07:38

Nikhil Ghuse

1,258
14
31

Thank you for taking the time to write the code. But my problem was not resolved.The problem is that the data placed inside the file (photo) is not sent to the controller. The only data that is sent to the database is only the image address . C://fakepath/myImage.png – Mojtaba Oct 13 '18 at 08:00
So convert it to base64 image and then send – Nikhil Ghuse Oct 13 '18 at 09:00
You need to convert your image to base64 and then store it in fields: byte[] imageArray = System.IO.File.ReadAllBytes(@"image file path"); string base64ImageRepresentation = Convert.ToBase64String(imageArray); – Dilip Oganiya Oct 13 '18 at 09:05
Did I say any thing different..? – Nikhil Ghuse Oct 13 '18 at 09:06
@Dilip@Nikhil Ghuse I need the file to be sent as HTTPPostedFileBase. Will I have trouble with Converting? – Mojtaba Oct 13 '18 at 09:10
check this link then https://stackoverflow.com/questions/28373894/httppostedfilebase-is-null-using-jquery-ajax – Nikhil Ghuse Oct 13 '18 at 09:12

Sending data inside the type file to the controller in ASP.NET MVC

1 Answers1