Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

File upload bound to the Viewmodel

I have a form where I am uploading multiple files and there are a couple of textboxes and some checkboxes associated with each file being uploaded. I have seen examples for uploading multiple files where the actionresult signature is something like this:

[HttpPost]
public ActionResult Upload(IEnumerable<HttpPostedFileBase> fileUpload)

However, I cant find any example where I can have multiple files uploaded where my actionresult signature is something like this:

[HttpPost]
public ActionResult Upload(MyViewModel vm)

The reason I want this viewmodel being posted is because I think its cleaner than using the FormCollection variable and because I want to each file being uploaded and the data added along with its associated textboxes to be grouped together by way of a List<FileUploadPacket> which will part of the ViewModel

UPDATE

My View model below:

public class EmployeeVM  
{

    public int EmployeeID {get ;set;}
    public string EmpName {get ;set;}
    //Other properties

    public List<FileUploadPacket> FileUploadPackets { get; set; }
}

The FileUploadPacket class which has the property of type HttpPostedFileBase

public class FileUploadPacket 
{

    public int FileID {get ;set;}
    public string UserEnteredDesc {get ;set;}
    //some more other properties

    public HttpPostedFileBase UpFile { get; set; }
}

Code snippet of my view.aspx as below

<%: Html.TextBoxFor(model => model.EmpName, new { maxLength = 50 })%>

Upload your files here: 
<input type="file" id="UpFile" name="UpFile" value="ActionHandlerForForm"  />
<%: Html.TextBoxFor(model => model.FileUploadPackets[0].UserEnteredDesc )%>

<input type="file" id="UpFile" name="UpFile" value="ActionHandlerForForm"  />
<%: Html.TextBoxFor(model => model.FileUploadPackets[1].UserEnteredDesc )%>

As you can see, I have all the other properties specific to this one file being uploaded kept in its own class. So that in my form an employee can enter his name and upload his files and provide some description and other details for each file. If I move the public HttpPostedFileBase UpFile { get; set; } property to the EmployeeVM class then I will have to collect all the files separately in an array and manually map a file to its description. Is there no way to do this keeping the UpFile property in the FileUploadPacket class itself?

I am using the aspx view engine.

Please help. Thanks for your time...

like image 671
user20358 Avatar asked May 25 '12 15:05

user20358


People also ask

What is a ViewModel used for?

The ViewModel class is designed to store and manage UI-related data in a lifecycle conscious way. The ViewModel class allows data to survive configuration changes such as screen rotations.

How do I use ViewModel in view?

In ViewModel put only those fields/data that you want to display on the view/page. Since view reperesents the properties of the ViewModel, hence it is easy for rendering and maintenance. Use a mapper when ViewModel become more complex.

What is the use of HttpPostedFileBase?

The HttpPostedFileBase class is an abstract class that contains the same members as the HttpPostedFile class. The HttpPostedFileBase class lets you create derived classes that are like the HttpPostedFile class, but that you can customize and that work outside the ASP.NET pipeline.


1 Answers

GetHtml helper is not part of mvc framework, you should look up for third party library containing that helper.

Uploading file that is part of ViewModel is simple though. Basically it goes like this

Define view model

public class MyViewModel 
{
     public HttpPostedFileBase MyFile { get; set; }
}

Inside Views/Shared/EditorTemplates, create MyViewModel.cshtml

<input type="file" id="MyFile" name="MyFile" />

And view, corresponding to upload action

@model MyViewModel

@using(Html.BeginForm("Upload", "MyController", FormMethod.Post, new { enctype="multipart/form-data"})
{
     @Html.EditorForModel()
    <input type="submit" value="Upload" />
}

required attribute is important to upload files.

And that's it, once form is submitted, you should see uploaded file inside [HttpPost] action, vm.MyFile.

like image 100
archil Avatar answered Oct 15 '22 15:10

archil