Multiple Attributes Html.BeginForm MVC id and enctype as part of file upload

Question

As part of file upload (ASP.NET MVC3) adding id and enctype attributes to HTML.BeginForm return HttpPostedFileBase as null

Model:

public class ProfileModel
{
 [UIHint("Upload")]
 public HttpPostedFileBase ImageUpload { get; set; }
}`

ProfileForm.cshtml

@using (Html.BeginForm("Update", "Profile", new { ProfileId = ViewBag.ProfileID }, FormMethod.Post, new { @enctype = "multipart/form-data", @id = "ProfileForm" }))
{

    <div>
        @Html.LabelFor(model => Model.ImageUpload)
        @Html.TextBoxFor(model => Model.ImageUpload, new { type = "file" })
    </div>
    <div class='buttons'>
        <input type="submit"  value='Save' />
    </div>
}

Controller

public Upload(ProfileModel viewModel)
{
  if (viewModel.ImageUpload != null && viewModel.ImageUpload.ContentLength > 0)
 {
   var uploadDir = "~/uploads";
   var imagePath = Path.Combine(Server.MapPath(uploadDir), viewModel.ImageUpload.FileName);
   var imageUrl = Path.Combine(uploadDir, viewModel.ImageUpload.FileName);
   viewModel.ImageUpload.SaveAs(imagePath);
   }
}

---

if I remove the @id = "ProfileForm" attribute as below I am getting the HttpPostedFileBase (ImageUpload) value.

@using (Html.BeginForm("Update", "Profile", new { ProfileId = ViewBag.ProfileID }, FormMethod.Post, new { @enctype = "multipart/form-data"}))
{  }

I need to pass both id and enctype - can anyone please suggest me what I am doing wrong or is there any better way to do ?

Answer 1

I have fixed the issue by doing below: - When the submit is clicked I am positing the image first separately by calling below method

 function FileUploadClick() {

            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);
            }

            $.ajax({
                type: "POST",
                url: '/Profile/Upload',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function (response) {
                    alert('succes!!');
                },
                error: function (error) {
                    alert("errror");
                }
            });
        }

function Submit() {

    $("#ProfileForm").submit(function (e) {
        FileUploadClick();
        var url = "/Profile/Update";
        $.post(url, $("#ProfileForm").serialize(), function (data) {

        });
    });
}