Uploading multiple files in ASP.NET MVC

How to upload file in mvc
Uploading a File (Or Files) With ASP.NET MVC

We have some inbuilt HTML helper for html control but for file upload in MVC we have to use some basic method to upload file or files. Let’s see how it works.

Here’s a form that will post back to the current action.

@using(Html.BeginForm("SaveData", "FileUpload", FormMethod.Post, new { enctype = "multipart/form-data" }))
{</pre>
<div>@Html.LabelFor(x => x.MyProperty1)
 @Html.EditorFor(x => x.MyProperty1)</div>
<div>@Html.LabelFor(x => x.MyProperty1)
 @Html.EditorFor(x => x.MyProperty2)</div>
<div>@Html.LabelFor(x => x.MyProperty1)
 @Html.EditorFor(x => x.MyProperty3)</div>
<div><input id="file" type="file" name="file" /></div>
<pre>
    <input type="submit" value="submit" />
}

In controller action method which will take this model and HttpPostedFileBase 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.

	[HttpPost]
        public void SaveData(FileUploadModel containers, HttpPostedFileBase file)
        {
            string fileName = string.Empty; ;
            if (file12 != null && file12.ContentLength > 0)
            {
                // extract only the fielname
                fileName = Path.GetFileName(file12.FileName).ToString();
                // store the file12 inside ~/App_Data/uploads folder
                var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
                file12.SaveAs(path);
            }
            // add file12 name to model and save model
            containers.FileName = fileName;
        }

Now in case of multiple file upload. We can simply have multiple file inputs all with the same name.

@using(Html.BeginForm("SaveData", "FileUpload", FormMethod.Post, new { enctype = "multipart/form-data" }))
{</pre>
<div>@Html.LabelFor(x => x.MyProperty1)
 @Html.EditorFor(x => x.MyProperty1)</div>
<div>@Html.LabelFor(x => x.MyProperty1)
 @Html.EditorFor(x => x.MyProperty2)</div>
<div>@Html.LabelFor(x => x.MyProperty1)
 @Html.EditorFor(x => x.MyProperty3)</div>
<div><input id="file1" type="file" name="files" /></div>
<div><input id="file2" type="file" name="files" /></div>
<pre>
    <input type="submit" value="submit" />
}

Where input type file having name is files and id are file1 and file2, In controller HttpPostedFileBase argument will be files that is name.
Controller

[HttpPost]
        public void SaveData(FileUploadModel containers, IEnumerable 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);
                }
            }
        }

Download source code

Multiple file upload

Multiple file upload

Advertisements
This entry was posted in MVC and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s