Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

[How Do I:] Multiple File Uploads in ASP.NET 2

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[Microsoft ASP.NET] [www.ASP.net] In this video, I'll demonstrate uploading a dynamically determined number of files in your ASP.net application. This is the second in a 4-part series of uploading files on ASP.net. In the first video, we built this application here, where we uploaded a single file. This is great if you know in advance how many files the user is going to need to upload. In our case, one, but it could be a multiple number. However, it doesn't handle the case where we don't know in advance how many files the user wants to upload. For example, in the case of building an email client—a web-based email client. We want to let the user create an email and attach files to that email, but we don't know how many they're going to want to attach. You'll see in some applications, they'll just pick an arbitrary number—say—5 files. Five is the maximum, and the user interface has 5 file upload boxes, and if they need more than 5, they have to send multiple emails. But that's not the most elegant way to solve that problem. So in this video, we'll modify this application that you're seeing here to allow the user to decide at run time how many files they need to upload. So let's go ahead over into the default.aspx page for our application. The first thing we're going to do is we're going to get rid of this <div> that has the feedback that's provided to the user—the file name, content type, file size. Certainly, you can iterate through the file collection that's sent to the server and provide that information. But it's not—strictly speaking—necessary. So the first thing we want to do is modify our text here to indicate that this is a new demo, and it's the multi-file upload. So as you'll recall, this input element here of type file is where the file gets specified by the user. But we're going to need to dynamically add to these with client site codes. So we're going to have to put this into some HTML element that is addressable by our JavaScript code. Let's create a paragraph, and we'll give it an ID of upload area so that we can program against it in JavaScript. Then let's put the initial file upload element inside that paragraph. We're also going to get rid of the break here because we're going to dynamically add the breaks in our JavaScript code. While we're at it, let's take this—let's take the ASP.net button and put that in a paragraph. Since we're doing that, of course, we don't need the breaks. Okay. We've got basically the same user interface so far if we look at design mode here. So we've got our file element, and we have our ASP.net button with our code-behind, but we need a HTML button that we can wire up to a JavaScript function to dynamically add additional file input elements. So to do that, let's go ahead and get not an ASP.net button, but a HTML button. And we'll call it ButtonAdd, and we'll give it a value of add a file. Then of course we want a click event handler, so we'll add onclick= and the name will be addFileUploadBox. That's going to be the name of our JavaScript function. Then down here just after our Span 1 here and this is—remember Span 1 is just an area in our page where we can feed diagnostics—so the upload was successful or there was a problem with the upload. Just below that, add a script section and, of course, the type is going to be JavaScript. Then within that—just do a little organizing here— and then within that we can say function addFileUploadBox. Now the first thing that we're going to do is make sure that we're working with an element. So let's say if not document get element by ID— or not document create element. Then we don't want to add—we don't want to add another file input box. So we'll just say return false. If that's not the case, let's create a variable to hold a reference to our upload area. Then say document get element by ID, and the element that we're interested in is that paragraph that we set up up here because this is where we're going to inject the new file upload element. Okay. Let's just make sure that that was successfully created. If it wasn't, there's not much point in continuing. But assuming it was—remember we said because we're using paragraphs I got rid of that break element. But we're going to need to inject breaks to get a line feed at the end of every file input box. Let's go ahead and create a variable called newLine and create an element— whoops! Then we'll just go ahead in the upload area. We'll go ahead and pop one of those in, so we'll say appendChild, and we'll just pop a new line in there. All right. Now we're ready to deal with the file input element itself. In order to do that let's say var newUploadBox. Let's create an element—so document createElement. The element type is going to be input. Now we need to go ahead and set some attributes. Let's set the type = file and the size. I think we set the size equal to 60, but we want it to match whatever our original static definition was. Oops! Yeah. So we set the size equal to 60, so that's good. Now the one thing we need to handle here that's a little bit interesting is that we can't use the same ID and name for subsequent file upload elements. What we're going to do is we're going to work with a variable that we'll call last assigned ID. First we need to find out if it exists. So let's say if lastAssignedId—or actually if not lastAssignedId. Then let's create one and set its value to 100 as a starting place. Now we can go ahead and finish configuring our new upload box. So we can say setAttribute, and here we'll set the ID attribute equal to some name— So FileField. Then we're simply going to append the current value of this last assigned ID. That way every time we add one, its ID will be just a little bit different. So it will be FileField and then whatever the number is. So FileField 1—FileField 100, FileField 101, etc. We're going to do that for the ID, and we're also going to do it for the name. All right. We can use the same value. Then the next thing we need to do, of course, is we need to insert it into the document. We're going to say upload area, appendChild, but instead of another new line, we're going to insert that new box—that newUploadBox. Then the only thing that we need to do here is make sure that we increment that last assigned ID so that each one is different. That's our Javascript. Right? Just really quickly, let's quickly review that. We're going to make sure that we're working an element. Then, we're going to get a reference to the upload area— that paragraph where we're going to insert the new file controls. All right. We're going to make sure that we insert breaks, so we're going to create an element in order to do that. Then we're going to create another element that is of type input. Well it's an input element of type file that's 60 characters wide. Then we're going to make sure that we have a last assigned ID variable in our function here, setting it to a default value of 100. Then we're going to dynamically name each newUploadBox using some static text— in this case, FileField and the lastAssignedId. Once we've created the element and set its attributes, we're going to call appendChild to insert into the document object model. Then we're going to clean up by incrementing the lastAssignedId by one so that if the user adds another one later the value of lastAssignedId will continue to be unique. Now let's hop over into our VB code-behind. Remember we deleted these from our document, so we don't need those. Because now we're handling a collection of files rather than a single file, we're going to have to—we're going to have to change this code a little bit. We actually won't be needing those. Let's start by creating a variable called uploads, and uploads is going to be an HTTP file collection, since instead of working with a single file we're working with a collection of files. Now that we've created that variable, we can initialize it by setting it to HTTP context— current request files. All right. So now we have a reference to the files collection that was sent by the browser request. The next thing that we need to do, of course, since we're not working with a single file, we need to iterate through all of the files in that collection. So let's set up a for loop where we say for i As Integer = 0 to however many files are in that uploads collection. Uploads.count -1. Then here we're going to just make sure that we actually got an upload— so make sure that they didn't specify an empty file dialogue. So let's do that by saying—oops—If uploads (i) ContentLength is < 0 Then we can go ahead and process the file. If that's the case, then we're going to take this try/catch block, and we're going to stick it inside the for loop that we're going to execute. Remember we got rid of this—we got rid of this span so we don't need to process that. Of course, because we're working with a variable number of file names, what we need to do here is instead get the file name from whichever file in the collection we're currently working on. All right. So pretty much the same code with just a little minor variation. All right. So here we're going to—again—we're going to create a variable that is of type HTTP file collection and then get a reference to the collection of files that were sent in the HTTP request. Then we're simply going to iterate through them, making sure that we actually got a file name and then getting the name out of whichever element that we're processing. Then we're going to call the save as method just as we did in the previous single demo. So with that let's go ahead and try it out. So let's go find a file. Now we can click on add. Notice we dynamically get another file dialogue. We can add another and another. Let's do 4 of them. Winter leaves. Now we can click upload now. Let's go back and look at our directory, which remember from the first video was uploaded user files, and there are all 4 of the images that we set to upload. So that's it. It's that easy to modify the demo that we built in video number 1 of this file uploading series to handle a dynamically determined number of files by adding just a little bit of JavaScript and then iterating through the files collection back in our code-behind. [Microsoft ASP.net] [www.ASP.net]

Video Details

Duration: 16 minutes and 9 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 5
Posted by: neudesicasp on Aug 27, 2013

In this video I will demonstrate uploading a dynamically determined number of files to your ASP.NET application.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.