About

I'm Mike Pope. I live in the Seattle area. I've been a technical writer and editor for over 30 years. I'm interested in software, language, music, movies, books, motorcycles, travel, and ... well, lots of stuff.

Read more ...

Blog Search


(Supports AND)

Google Ads

Feed

Subscribe to the RSS feed for this blog.

See this post for info on full versus truncated feeds.

Quote

Your users don't give a damn what framework and language you're using. The only people who care about that stuff are other software developers. And God help you if your users are software developers; then you're really in trouble.

Jeff Atwood



Navigation





<September 2017>
SMTWTFS
272829303112
3456789
10111213141516
17181920212223
24252627282930
1234567

Categories

  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  

Contact

Email me

Blog Statistics

Dates
First entry - 6/27/2003
Most recent entry - 9/23/2017

Totals
Posts - 2453
Comments - 2558
Hits - 1,984,654

Averages
Entries/day - 0.47
Comments/entry - 1.04
Hits/day - 382

Updated every 30 minutes. Last: 11:04 PM Pacific


  02:25 PM

In ASP.NET Web Pages, you can use the FileUpload helper[1] to render HTML that lets users upload one or more files. For example, this helper:
@FileUpload.GetHtml(
initialNumberOfFiles: 1,
allowMoreFilesToBeAdded: false,
includeFormTag: true,
uploadText: "Upload File 1",
name: "Upload1"
)

Renders this:

The upload controls consist of a <input type="file"> element and a submit button (<input type="submit">). By default, the helper renders a <form> element around this. For example, the markup rendered by the previous example is this:

<form action="" enctype="multipart/form-data" method="post">
<div class="file-upload" id="file-upload-0">
<div>
<input name="Upload1" type="file" />
</div>
</div>
<div class="file-upload-buttons">
<input type="submit" value="Upload File 1" />
</div>
</form>

(The <div> elements with their IDs let you specify CSS to make things pretty.)

People sometimes ask whether there's a way to get additional information about the upload. For example, if you have two FileUpload helpers on a page, can you tell which one submitted the file?

Yes. Specify the helper this way:

<form method="post" name="form2" enctype="multipart/form-data">
@FileUpload.GetHtml(
initialNumberOfFiles: 1,
allowMoreFilesToBeAdded: false,
includeFormTag: false,
uploadText: "Upload2",
name: "Upload2"
)
<input type="submit" name="buttonUpload2" value="Upload File 2" />
</form>

Note that:
  • includeFormTag is set to false.
  • The helper is wrapped in its own <form> element.
  • The custom <form> element explicitly includes enctype="multipart/form-data". This is required for the file upload portion of the submit.
  • The custom form contains an <input type="submit"> element.

Point is, you're telling the helper not to generate its own form, and then specifying both the necessary <form> element and the submit button. In fact, once you take control of the form like this, you can include anything you want — more markup, more controls, etc.

Then in code you can do detect the submit button normally and do whatever you like. Here's a sample you can play with.
@{
var message = "";
var fileName = "";
if (IsPost)
{
if (Request.Files.Count == 0)
{
fileName = "None!";
}
else
{
fileName = Request.Files[0].FileName;
}

if (!Request.Form["buttonUpload1"].IsEmpty())
{
message = "Upload1";
// Do logic for upload form 1
}

if (!Request.Form["buttonUpload2"].IsEmpty())
{
message = "Upload File 2";
// Do logic for upload form 2
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{font-family:verdana;}
div{margin:12pt;}
</style>
</head>
<body>
<h1>FileUpload Test</h1>
<form method="post" name="form2" enctype="multipart/form-data">
@FileUpload.GetHtml(
initialNumberOfFiles: 1,
allowMoreFilesToBeAdded: false,
includeFormTag: false,
uploadText: "Upload File 1",
name: "Upload1"
)
<input type="submit" name="buttonUpload1" value="Upload File 1" />
</form>

<hr />
<form method="post" name="form2" enctype="multipart/form-data">
@FileUpload.GetHtml(
initialNumberOfFiles: 1,
allowMoreFilesToBeAdded: false,
includeFormTag: false,
uploadText: "Upload2",
name: "Upload2"
)
<input type="submit" name="buttonUpload2" value="Upload File 2" />
</form>

@if (IsPost)
{
<p>You uploaded file @fileName using @message</p>
}

</body>
</html>

More info: For more on uploading files, including how to process them, see Letting Users Upload a File in the Web Pages tutorials.

Credits: Thanks to the "brilliant but blogless" :-) Levi Broderick for help on sorting out the enctype business.

[1] This helpers is available in the ASP.NET Web Helpers library, which you install using the Package Manager (NuGet).

[categories]   ,

|