Upload Images while creating new Model

Question

I'm going to create profile for my users in ASP.Net MVC application. Users creation controller is something like this:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(UserProfileViewModel userViewModel)
{
    if (ModelState.IsValid)
    {
        ....
    }

    return View(userViewModel);
}

Besides, each user model got several properties including one photo. Everything goes well till I want to add an input field to accept photo.

@Html.TextBoxFor(model => model.ImageUrl, new { type = "file" })

And I add below field to UserProfileViewModel:

[Display(Name = "Profile Photo")]
public HttpPostedFileBase ImageUrl { get; set; }

Among snippets to upload a photo and answers to my previous question, it seems uploading photo was considered as a separate task. i.e. I need an individual form and controller to upload a photo (like first part of this answer).

I want to know are there any methods that I can create whole user profile in one form and pass its photo to the same controller (which included photo in UserProfileViewModel)?

I need to note I don't know to use jQuery or AJAX and I want to use standard HTML helpers for this task.

Update: My View Looks like this:

@model ProjectManager.Models.UserProfileViewModel 

@{
    ViewBag.Title = "Create";
}

<h2>@ViewBag.Title</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>User Profile</h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.LabelFor(model => model.Description, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Description)
                @Html.ValidationMessageFor(model => model.Description)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Age, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Age)
                @Html.ValidationMessageFor(model => model.Age)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ImageUrl, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.ImageUrl, new { type = "file" })
                @Html.ValidationMessageFor(model => model.ImageUrl)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="ثبت" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div class="rtl text-right">
    @Html.ActionLink("Back To List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Answer 1

File inputs are not sent in the request unless your form element contains the enctype = "multipart/form-data" attribute. Change the view code to

@using (Html.BeginForm("Create", "User", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    ....
}

Answer 2

All i have got, your question is I want to know are there any methods that I can create whole user profile in one form and pass its photo to the same controller (which included photo in UserProfileViewModel)?

Yes. It is possible. If you overwrite the form as Stephen Muecke said, you should get the photo with viewmodel. If you get null in viewmodel, you can retrieve the file(photo) from the request also.

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(UserProfileViewModel userViewModel)
  {
    if (ModelState.IsValid)
    {
      HttpPostedFileBase fileUploadObj= Request.Files[0];
      //for collection
      HttpFileCollectionBase fileUploadObj= Request.Files;
    ....
   }

   return View(userViewModel);
  }

Hope this helps :)