Tag Archives: files

Uploading the files – HTML5 and jQuery way!

Download the Sample from Dropbox

Most of the websites are using HTML5 and jQuery plugins, to upload the files without the user to have to send a POST request to the server, which is not a likely way of uploading the files.

Old way of uploading files

In old days, people likes to create a simple HTML form, and assign the encytype to it, that would let them select a file and then they will click on the Submit button which would then take them to a new page, where they will be shown the message, “Your photos have been uploaded” – or an error message telling them that there was an error. This is a bit irritating and awkward, because the user uploaded more like 5 photos among with one got an error, and the remaining 4 were also discarded and the user was told after 2 minutes to upload the 4 photos only and not that one particular image. Sometimes, connection is lost and other stuff!

New ways of uploading the files

The web is changing, and there are a lot of new ways in which the user can upload the image or his any file to the server, without having him to submit the form as he did back in 90s.

Using the iframes

Well before the HTML5, people used hidden iframes to target the form to be uploaded from, the iframe is just another HTML document embedded in your main HTML document, that if even navigated to any other web page doesn’t trigger any navigation event in the main page. Which means that if the form is submitted through an iframe the main page the user stands on it never submitted. But he can still view the results and other associated data, such as form elements and the result window.

HTML5 and JavaScript

But these are also old now, JavaScript is strong enough to upload your files, and using HTML5 you can easily work you way with the validations of Files too. You can manage which file to upload and which one to reject. This option also minimizes the chances of error for any file that were triggered in the old methods and the user was informed of those errors after he uploaded all of the HTTP request data.

In JavaScript, we can shorten down the code for creating an Ajax request – An Ajax request is an asynchronous request to the server to get some resources from the server and display it in the web page without needing to reload the web page. This technology (Ajax) enables us, to get any data to the web server without having to use the POST requests and reload the web page for the new content, and similarly it also enables us to send any data to the server – such as files, images and other data – to the web server. This makes the uploading of the content an easy method.

jQuery code

In this blog post, I will be using jQuery – why? because I love jQuery, it is shorter in syntax and looks cool, but remember it is slower than pure JavaScript because it is just a library that runs over JavaScript but the difference is barely noticable – to send the Ajax requests to the server, along with the file data that we want to be uploaded.

The first stage is to create the HTML form that will be capturing any of the file that the user wants to upload to the server. For example, the following code would be an example of the HTML form that will accept the files from the user and contains a simple button from which he will upload the files – I know, button is old method, but in this method this button won’t perform the built-in function, it will be captured by JavaScript and the page will stay where it is all using the JavaScript watch the jQuery code for more on this section.

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

Above is the example for the form. Now once we will look into the jQuery code, we will be able to omit the enctype=”multipart/form-data” part too. Until then, this form is – as it stands – will accept a (single; multiple files are not allowed yet) file and the Upload button will be used to trigger the main function.

The following is the JavaScript (jQuery) code that will capture the event and send a request alongwith the file.

$(document).ready(function () {
   // On the document ready
   $('input[type=submit]').click(function () {
     // Before the request starts, show the 'Loading message...'
     $('.result').text('File is being uploaded...');
     event.preventDefault();
     // On the click even,
     var formData = new FormData($('#form')[0]);
       $.ajax({
           type: 'POST',
           processData: false,
           contentType: false,
           data: formData,
           success: function (data) {
              // The file was uploaded successfully...
              $('.result').text('File was uploaded.');
           },
           error: function (data) {
              // there was an error.
              $('.result').text('Whoops! There was an error in the request.');
           }
       });
    });
 });

.. in the above code, there is an element where the result is being rendered. That was like this,

<p class="result"></p>

.. in this element you will be showing the process that is currently going on.

  1. First of all – It will show a File is being uploaded… message in this paragraph.
  2. After the upload.
    If the file was uploaded, a success note will be shown otherwise an error message will be displayed to the user.

How will be button not submit the form by using a POST request? That is overridden by the code, in the second line inside the event handler. event.preventDefault(); in this code line, the default behaviour that will be triggered is overridden. Meaning that the page won’t be loaded again by a POST request, instead only that code will execute that we want – the Ajax code in the code block.

ASP.NET method to capture and make sure the request was having a File

You can use the following code of ASP.NET, that will make sure that the file is attached with the request, and then follow on to the Saving process and so on. For example this code,

files = Request.Files.Count;
if(files > 0) {
   // Files are sent!
   for (int i = 0; i < files; i++) {
      var file = Request.Files[i];
      // Got the image...
      string fileName = Path.GetFileName(file.FileName);
      // Save the file...
      file.SaveAs(Server.MapPath("~/" + fileName));
   }
}

Above code will work, for any image or any file type. There is no validation until now, you can attach your own validations depending on the Mime type or the size of the file that was attached the request.

Omitting the enctype

Oh well, I said that after the jQuery code I will explain how can you omit the enctype attribute – or if you even miss writing the enctype the result will be valid to upload the file – is that when you’re using the FormData object, to send the data, it make the form to behave as if the enctype of the form was set to the multipart/form-data (which is required to encode the files and tranfer them on HTTP). ‘

That is why, even if you miss this part and are using the FormData you will see that the images are being uploaded to the server.

Points of Interest

HTML5 and jQuery are widely used frameworks to upload the files using Ajax request to the web servers making it easier to control the file types to be uploaded, validating the maximum file size to be uploaded and some other particular validation can be handled easily on the client-side making it easier for the user to perform uploading tasks fastly.

FormData is an object that once used makes it easy to encode the files and other data as if the form’s enctype was set to the multipart/form-data. This is used (and is required) to upload files on the server through HTTP requests.

You can prevent any default method to be executed upon any element or control, using the JavaScript’s preventDefault() method.

Advertisements

Dynamic Content on a Website

Sometimes you have to show a lot of content to the user, but don’t want to create multiple pages for each of the object. For example, if you were a shopkeeper or a baker or cook. You might not want to create a seperate page for cake.html, cookie.html, chicken-soup.html. That is pretty sick right?

That’s where you use the Query Strings or the Url Data. You just append a data to your URL, and on the server-side, you use that data from the URL, and change the content on the web page. That would be just like, changing the switch from ON to OFF.

Let’s continue our example. If you were the developer of your website for your bakery. You might have to write the code in each of the page. And at the same time, you might to make a new page if your bakery gets a new item. Then your file system would have been like:

  1. Default.html (or index.html)
  2. About.html
  3. Contact.html
  4. Order.html
  5. Cake.html
  6. Cookie.html
  7. Apple-pie.html
  8. Juice.html
  9. …etc

But, you can reduce this to just one page. Yes! Lets change the File System to this:

  1. Default.html (or index.html)
  2. About.html
  3. Contact.html
  4. Order.html
  5. Item.html
  6. …etc

If you’re using ASP.NET Web Pages, that we’re using since the beginning. Then you can try this code out, you will find it really simple, handy and amazing.

The example URL would be like: http://www.example.com/item/item-id-or-item-name

@{ 
   var item = UrlData[0]; /* get the urldata */
   var content = "";
   if(item == "somevalue") {
     content = "Cakes are good!";
   } else if (item == "someothervalue") {
     content = "Cookies are fresh!";
   }
}

<div>@content</div>

Now, I will explain the code, the code takes the URL data of the page, you must keep a note that the content placed infront of the page name can be accessed. In the example we had:

http://www.example.com/page-name/url-data-content-here-infront-of-page

Then I used the ASP.NET to get the first part, note the [0] first parameter after the page name. And then used an if else block to show the dynamic content depending on the item-name.

Lets do this code with out own example:

http://www.example.com/item/cake/purchase

@{
   var item = UrlData[0];
   var action = UrlData[1]; /* notice the paramter */
   var response = "";
   var content = "";
   if(item == "cake") {
     content = "Cakes are good for birthday party!";
   }
}

<div>
   <p>@content</p>
   @if(action == "purchase") {
     <a href="buy-item/@item">CHECK OUT</a>
   } else {
     <a href="item/@item/purchaase">PURCHASE THIS</a>
   }
</div>

This is a sample, you can see that the code would execute and would check for the URL, and inside the URL it would change the content of the Website. You can have as many URL parameters as much you want and they are better to read too. You can add actions, such as feedback, purchase, contact email sent etc.

How to interact with File; File System

Every website on our Internet uses a File System, where the user sometimes gets access to write the data, as everyone has some access to read the data. Lets get the common examples.

For beginners: What do you think read/write permissions are?

When the user is being provided read permission, it means he can read all the files; for example, he can view all the text files (.html, .css, .js etc). Which are required for a user to visit and surf the website. Let’s say Error Code 403 is one of these, any error code that starts with a 4 (403, 401) is an error; which means the users will never get access to these files or directories untill or unless webmaster allows him/her!

Now, lets cover the write permission. This permission is granted to the users which can edit, update, or upload new data to the server’s file System. For example, you might use some service which lets you share your images or text data (For example, Facebook, Google+, Tumblr., WordPress etc..). Now these websites allow their users to read (you know what read means now) and write some data (write = upload, update, delete, and other of this kind) to the server. This can be done on a Database. Which we will cover in future, but for now!

Read: To read the files present on the server, where we can easily access the files by just giving a virtual link to the file.

Write: To let the users alter the current file System data. To let him upload, or delete the files present on the File System of the server.

Coming to the point

When you select a file in the form, the basic idea for them is to provide you with a beautifull form, where you are asked to select a file, which indirectly is a

<input type="file" name="image" />

Which is used to select the files and then send it to the server, You will need enctype to convert and encode the data to the type which is best for image and other data upload. Such as

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

And so on.

How to access and work with file System

In ASP.NET, its really simple to access and update the files present on the server’s file system. All you need is just a few variables to make all the process simple and user readable.

You remember, how we interact with the form submission by setting their methods to post. We will be using the same method here!

<form method="post">
   <input type="text" name="name" />
   <input type="submit" value="Submit" />
</form>

Now, when this is submitted, all the data (input, select, textarea) is submitted to the server alongwith other data that is inside the current form only.

Now lets handle this data on the server. We will start the IsPost block and read the data from the form and do some stuff in the server.

I need you to do something before that,

  1. Create a folder somewhere, lets say C:\<username>\Documents\filename.txt
  2. Now, you will use this link, and write the stuff!
if (IsPost) {
   var name = Request["FirstName"];
   var Data = name + Environment.NewLine; // new line there in the file..
   var FileToSaveOn = Server.MapPath("write the link to the file that you created here..");
        File.WriteAllText(@FileToSaveOn, Data);
}

Now go to the file in the Documents of yours. You will see the data written in the file.

Retry the whole process by changing the variable name to understand how they interact, try to change the code to get the information about how you can change and update the code and make it usefull. There are some other types of the File property too. You can use them to delete, update or create files too! Example are:

File.AppendAllText(); // this will update the file

There is just a slight difference between AppendAllText and WriteAllText, and its that WriteAllText will remove the previous data and then write the current data only. AppendAllText will keep the previous data and add this data at the end of the file. Pretty nice huh? 🙂

File.Exists("link to the file"); // checks whether the file is available or not..
File.ReadAllLines(); // reads the data in the file..
File.Delete(); // deletes the file; whose link is in paranthesis..

Its a better approach to first check whether file is present or not before proceeding, because it might give you an Exception, and for a developer Exceptions ain’t good! You should handle these tiny exceptions by using null as value inside the if else block.

In my next post, I will cover the basics of the file uploading and saving.