How to upload a file (or files) with ASP.NET MVC

To upload a file or set of files with ASP.NET MVC we first need to understand what happens under the hood. First, ASP.NET MVC is different since we don't get to use ASP.NET Server Controls as we're used to them. There are no "server controls" in the way that we're used to them.

Second, it'd be important to write Unit Tests for something like File Upload, ASP.NET MVC didn't do any special work for File Upload support. It uses whatever stuff is built into ASP.NET itself. This may or not be helpful or interesting or even easy to test.

Why do we have to add enctype="multipart/form=data" on our forms that include file uploads? Because the form will now be POSTed in multiple parts.

Uploading a single file

Let’s start with the view. Here’s a form that will post back to the current action.

 

<form action="" method="post" enctype="multipart/form-data">

<label for="file">Filename:</label>

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

<input type="submit"/>

</form>

 

Here’s the action method that this view will post to, which saves the file into a directory in the App_Data folder named “uploads”.

 

[HttpPost]

public ActionResult Index(HttpPostedFileBase file){

if(file.ContentLength>0){

var fileName = Path.GetFileName(file.FileName);

var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);

file.SaveAs(path);

}

return RedirectToAction("Index");

}

 

Notice that the argument to the action method is an instance of HttpPostedFileBase. ASP.NET MVC introduces a new value providers features.

Whereas model binders are used to bind incoming data to an object model, value providers provide an abstraction for the incoming data itself.

In this case, there’s a default value provider called the HttpFileCollectionValueProvider which supplies the uploaded files to the model binder. Also notice that the argument name, file, is the same name as the name of the file input. This is important for the model binder to match up the uploaded file to the action method argument.

Uploading multiple files

In this scenario, we want to upload a set of files. We can simply have multiple file inputs all with the same name.

 

<form action="" method="post" enctype="multipart/form-data">

<label for="file1">Filename:</label>

<input type="file" name="files" id="file1"/>

<label for="file2">Filename:</label>

<input type="file" name="files" id="file2"/>

<input type="submit" />

</form>

 

Now, we just tweak our controller action to accept an IEnumerable of HttpPostedFileBase instances. Once again, notice that the argument name matches the name of the file inputs.

 

[HttpPost]

public ActionResult Index(IEnumerable<HttpPostedFileBase>files){

foreach(var file in files){

if (file.ContentLength > 0){

var fileName = Path.GetFileName(file.FileName);

var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);

file.SaveAs(path);

}

}

return RedirectToAction("Index");}

 

Yes, it’s that easy. :)



Was this article helpful?

Top Related Jobs

Top Freelance jobs are waiting for you, View & apply to earn more.



People also searched for

How to post a Job & Hire a great WordPress developer
How to post a Job & Hire a great WordPress develop...
Web Development

WordPress is an open source Content Management System (CMS), which allows the users to build dynamic websites and blog. WordPress is the most popular blogging system on the web and...

Read More
Some Useful JavaScript Tips,Tricks and Best Practices
Some Useful JavaScript Tips,Tricks and Best Practi...
Web Development

As you know, JavaScript is the top programming language in the world, the language of the web, of mobile hybrid apps (like PhoneGap or Appcelerator), of the server side (like NodeJ...

Read More
How to Write a Job Description to Find a Good PHP Developer?
How to Write a Job Description to Find a Good PHP...
Web Development

PHP (recursive acronym for PHP: Hypertext Pre-processor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be em...

Read More

You are freelancing Ninja?

Try Auto proposal today, The new virtual assistant for your freelancing world.