Uploading and saving Files

In the previous chapter, I showed some code and its properties of how it can be used to save the data from a form to a text (.txt) file. Now its time for you to understand how and why media files are different from the simple form.

You need to encode the data of the media being sent to the server before it is sent to the server. For that you use an enctype and set a value to it inside the form element. Like the following

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

Now, when the form will be submitted, everything in it, will be first encoded to the relative type and then sent to server. Please note that the files (such as images, audio, video) need to be encoded. So that the server can process on them.

Now create the form in the page as

<form method="post" enctype="multipart/form-data">
  <input type="file" name="image" accept="image/*" />
  <input type="submit" value="Upload" />
</form>

Now when this form will be submitted the image will be submitted alongwith the data. Note the accept attribute, I have specified image in it, which will force the browser to only select the image (.jpg, .png etc) files not others such as audio (.mp3, .wav etc) and others.

Now lets get to the server-side code:

if (IsPost) {
      int numberOfFiles = Request.Files.Count;
      for(int i =0; i < numberOfFiles; i++) {
          var uploadedFile = Request.Files[i];
          if (uploadedFile.ContentLength > 0) {
              fileName = Path.GetFileName(uploadedFile.FileName);
              fileSavePath = Server.MapPath("~/App_Data/UploadedFiles/" +
                fileName);
              uploadedFile.SaveAs(fileSavePath);
          }
       }
   }

A little elaboration

Now lets get the knowledge of the above code, and lets understand how it works.

You might be familiar with loops and variables upto now. This code makes use of that thing. You will be looping through the images that were selected, but note that this is required only when you are using multiple attribute for the form input element such as

<input type="file" name="image" accept="image/*" multiple />

Otherwise, you don’t require that.

Now, the first code that is a request to count the files that were selected. Then it counts there value and uses it as a condition inside a loop. Then after that, it goes back and keeps getting each file and saves it to the server using SaveAs. Note that in this code, we are using UploadedFile variable for each of the media file that is being sent. You can try to edit the code and see how it works. Good luck with it!

Advertisements

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