HttpPostedfileBase is null using jQuery Ajax

I have problem with uploading file In Asp.net Mvc. First of all I should use Ajax to pass the upload file value.

In javascript I have model that I fill it, When I check it with debugger is correctly fill the object, but when I send this model to server (Controller )

The httpPostedfileBase value is Always null.

I search it on google, in some post I saw that I cant use file uploader with Ajax, but in other I saw that I can.

But I can not fix my Code.

There is my Javascript Code.

$(document).ready(function () {

$('#btnUploadFile').on('click', function () {
   var data= new FormData();

    debugger;
    var files = $("#fileUpload").get(0).files;

    if (files.length > 0) {
        data.append("UploadedImage", files[0]);
    }
    var ResturantSharingViewModel =
   {
       Type: $("#SharingTargetType").val(),
       SharingTitle: $("#SharingTitle").val(),
       content: $("#Content").val(),
       ItemId : $("#ItemId").val(),
       Photos: files[0]
   };
    $.ajax({
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json',
        url: '<%= Url.Action("SaveOneDatabase")%>',
        data: JSON.stringify(ResturantSharingViewModel),
          success: function (result) {
              var rs = result;
          },
          error: function () {
              alert("Error loading data! Please try again.");
          }
      });

My Controller public virtual bool SaveOneDatabase(ResturantSharingViewModel result) My ResturantSharingViewModel View Model

 public class ResturantSharingViewModel
{
    public Guid SharingPremiumHistoryID { get; set; }
    public string SharingTitle { get; set; }
    public string Content { get; set; }
    public DateTime AddedDate { get; set; }
    public bool IsSubmit { get; set; }
    public DateTime SubmitedDate { get; set; }
    public IEnumerable<SelectListItem> SharingTypes { get; set; }
    public IEnumerable<SelectListItem> SharingTargetType { get; set; }
    public short Type { get; set; }
    public Guid ItemId { get; set; }
    public HttpPostedFileBase[] Photos { get; set; }
}

My Html Elements

    <form enctype="multipart/form-data">
    <article>
    <%--<% =Html.BeginForm("Add","PremiumSharing") %>--%>
   <hgroup class="radiogroup">
    <h1>ارسال خبر</h1>
    <%= Html.HiddenFor(model => model.SharingPremiumHistoryID) %>
    <%= Html.HiddenFor(model => model.ItemId) %>
    <div class="group">
        <span> ارسال به </span>
        <%= Html.DropDownListFor(model => model.SharingTargetType, Model.SharingTypes) %>
    </div>
</hgroup>
<div class="newseditor">
    <div class="input-form">
        <%= Html.LabelFor(model => model.SharingTitle, "عنوان خبر") %>
        <%= Html.TextBoxFor(model => model.SharingTitle) %>
    </div>

    <div class="input-form">
        <%= Html.LabelFor(model => model.Content, "متن خبر") %>
        <%= Html.TextAreaFor(model => model.Content) %>
    </div>
    <div><input id="fileUpload" type="file" />

    </div>
    <% if (ViewBag.IsInEditMode != null && !(bool)ViewBag.IsInEditMode)
       {%>
    <div class="input-form">
        <%= Html.CheckBox("SendToInTheCity") %> ارسال در بخش «در شهر» فیدیلیو
    </div>
    <%} %>

    <div class="input-submit">
        <button name="post" id="btnUploadFile"  onclick="uploadFile()" >ارسال خبر</button>
    </div>
    <br />
</div>

Answer

First, it’s possible to upload with Ajax, the important thing is you need to set <form enctype="multipart/form-data"></form> on you form to tell it your form has an file upload input. Then you need to accept HttpPostedFileBase as an input parameter in your controller action.

Try this. Example of jquery upload code. (Taken mostly from How can I upload files asynchronously?)

function uploadFile(uploadId) {
    var formData = new FormData($('form')[0]);

    $.ajax({
        url: '<%= Url.Action("SaveOneDatabase")%>',
        type: 'Post',
        beforeSend: function(){},
        success: function(result){

        },
        xhr: function() {  // Custom XMLHttpRequest
        var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload) { // Check if upload property exists
                // Progress code if you want
            }
            return myXhr;
        },
        error: function(){},
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
}

HTML Form needs this attribute. See this post why you need it -> What does enctype=’multipart/form-data’ mean?

enctype="multipart/form-data"

[HttpPost]
public ActionResult SaveOneDatabase(HttpPostedFileBase file)
{
}

Advertisement

Answer