HttpPostedFileBase is always null with partialview

Question

I’m developing an application for uploading pdf file on server using custom modal popup. I’m using file uploading browser html control to upload .pdf file and this control is designed in a Partial View. When I’m clicking on ‘Add’ button then on the server side I did not get the HttpPostedFileBase and FormCollection value.

Here is my code:

Partial View:

@model Zytron.Models.ProductDataControls

    @using (Html.BeginForm("UploadFiles", "AdminPanel", FormMethod.Post, new
    {
        @id = "file_upload",
    }))

    {

        <table width="100%" cellpadding="5" cellspacing="1">
            <tr>
                <td>
                    <span>Description</span>
                </td>
            </tr>
            <tr>
                <td>
                    @Html.TextBoxFor(m => m.Description, new
               {
                   @class = "textBox"
               })
                    @Html.HiddenFor(m => m.ProductId)
                    @Html.HiddenFor(m => m.ParentId)
                </td>
            </tr>
            <tr>
                <td>
                    <span>File Source</span>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="file" id="fileUpload" name="fileUpload" size="23" />
                </td>
            </tr>
        </table>
    }

Model Code:

public class ProductDataControls

 {



       public string Description { get; set; }

  }

Custom Modal Popup Code:

function loadProdAttachFile(tag, event, target) 
{
    event.preventDefault();
    var $loading = $('<img src="@Url.Content("~/Images/ajaxLoading.gif")" alt="loading" class="ui-loading-icon">');
    var $url = $(tag).attr('href');
    var $title = $(tag).attr('title');
    var $dialog = $('<div></div>');
    $dialog.empty();
    //            alert($url);
    $dialog
            .append($loading)
            .load($url)
              .dialog({
                  autoOpen: false
               , title: $title
               , width: 500
               , modal: true
               , minHeight: 220
               , show: 'fade'
               , hide: 'fade'
              });

              $dialog.dialog("option", "buttons", {
                  "Add": function () {
                      var dlg = $(this);
                      //$('form#file_upload').submit();

                      var file = document.getElementById("fileUpload").value;
                      var pid = getParamValue("pid", $url);
                      var type = getParamValue("type", $url);

                      $.ajax({
                          url: '/AdminPanel/UploadFiles',
                          type: 'POST',
                          data: { 'file': file, 'pid' : pid, 'type' : type },
                          success: function (response) {
                              dlg.dialog('close');
                              dlg.empty();
                          },
                          error: function (xhr) {
                              if (xhr.status == 400)
                                  dlg.html(xhr.responseText, xhr.status);     /* display validation errors in edit dialog */
                              else
                                  displayError(xhr.responseText, xhr.status); /* display other errors in separate dialog */
                          }
                      });

                  },
                  "Cancel": function () {
                      $(this).dialog("close");
                      $(this).empty();
                  }
              });
    $dialog.dialog('open');
};

Controller code:

[HttpPost]

public void UploadFiles(HttpPostedFileBase file, FormCollection form)
{
}

View Code:

<a href "/ UploadFiles” class="ModalDlgProdAttachment"   <img src=”../Images/MyImage.jpg" /> </a>

$('a. ModalDlgProdAttachment).live("click", function (event) { loadProdAttachFile(this, event, "# file_upload"); });

Answer 1

You cannot upload files using AJAX. This has been discussed many times on StackOverflow. You have a couple of solutions:

• If the client browsers that you are using support the HTML5 File API you could use it to upload a file using AJAX.
• If they doesn't support it you could use a file upload component such as Uploadify, BlueImp File Upload and Valums File Uploader. Those controls will test whether the client browser supports HTML5 and use it if so and if it doesn't fallback to other techniques which involve using hidden iframes or Flash movies.