Jasinski Technical Wiki

Navigation

Home Page
Index
All Pages

Quick Search
»
Advanced Search »

Contributor Links

Create a new Page
Administration
File Management
Login/Logout
Your Profile

Other Wiki Sections

Software

PoweredBy

Uploading Files - ASP.NET MVC2

RSS
Modified on Fri, Oct 26, 2012, 10:53 AM by Administrator Categorized as ASP·NET MVC, HTML and CSS

Overview

This article walks through how to use the jQuery Multi-File Upload component with ASP.NET MVC2.

Installation

The JavaScript files (either jquery.MultiFile.js or jquery.MultiFile.pack.js) can be downloaded here.

ASPX Code

  • Be sure to include a <script> tag reference to jquery.MultiFile.js or jquery.MultiFile.pack.js.
  • Note the parameters to the Html.BeginForm method. The form must be submitted via an HTTP POST (The FormMethod.Post argument specifies this); and the encoding type should be "multipart/form-data". This is required even when not using jquery.MultiFile.js.
  • Specify an id and name attribute for the <input type='file' /> element. This is required even when not using jquery.MultiFile.js.
  • Note the class='multi' attribute setting on the <input type='file' /> element.

{copytext|aspx}
<% using (Html.BeginForm("Maintain", "Claim", 
        FormMethod.Post, new { enctype="multipart/form-data" }))
   {%>

. . .

<b>Select Documents and Images to Upload</b>
<br />
<input type="file" name="uxFileUpload" class="multi" accept="gif|jpg|pdf|png" />
<ul class="reminder">
<li>Files selected for upload will be listed above.</li>
<li>Click the "X" before any file to remove it from the list.</li>
<li>Files will be uploaded when you click the [Save Changes and Upload Attachments] button below.</li>
</ul>

. . .

<input type="submit" value="Save Changes and Upload Attachments" />

<% } %>

Controller Code

[HttpPost]
public ActionResult Maintain(int id, ClaimViewModel viewModel)
{
    if (ModelState.IsValid)
    {
        //Upload files
        string path = "~/upload/attachments/" + id.ToString();
        List<string> files = HttpContext.Request.UploadFiles(path);

        //TODO: Save other data to the database
    }
    return View(viewModel);
}

Extension Method

Place the following code in a static class that's available (via using directives) to your controller code.

/// <summary>
/// Uploads all the files in the Request object to the path specified
/// </summary>
/// <param name="request">Typically HttpContext.Request</param>
/// <param name="virtualTargetPath">The path to upload the files to; e.g.,
/// "~/upload"</param>
/// <returns>A list of the file names uploaded</returns>
public static List<string> UploadFiles(this HttpRequestBase request, string virtualTargetPath)
{
    List<string> result = new List<string>();
    int imax = request.Files.Count - 1;
    string physicalTargetPath = HttpContext.Current.Server.MapPath(virtualTargetPath);

    for (int i = 0; i <= imax; i++)
    {
        HttpPostedFileBase file = request.Files[i];
        if (!Directory.Exists(physicalTargetPath))
            Directory.CreateDirectory(physicalTargetPath);
        string saveAsFileName = Path.Combine(physicalTargetPath, Path.GetFileName(file.FileName));
        file.SaveAs(saveAsFileName);
        result.Add(file.FileName);
    }
    return result;
}

ScrewTurn Wiki version 3.0.1.400. Some of the icons created by FamFamFam. Except where noted, all contents Copyright © 1999-2018, Patrick Jasinski.