AJAX-Like File Uploading

Mohammad Abu-Ali

5.00/5 (2 votes)

11 Apr 2010CPOL2 min read

This article explains how to provide the feature of uploading files to a web page, imitating AJAX behavior.

Introduction

Currently, there's no direct way to upload files in a web page without refreshing the page. If you have an interactive page that is AJAX-enabled, you would like to support uploading files in a way similar to AJAX behavior.

Unfortunately, the XMLHttpRequest object doesn't support uploading files; therefore, I am trying to upload files using a workaround.

Background

First of all, before diving in to the subject, let's review some basic concepts of HTML forms. If you are already familiar with HTML forms, you can skip this section.

Basically, there are two main ways to submit a form. The first one is by clicking on an input control of type submit. Like the following:

HTML

<input type="submit" id="mySubmitButton" name="mySubmitButton" value="Submit Form" />

The other way is by calling a JavaScript code that submits the form, like the following:

JavaScript

function submitMyForm() {
    var theForm = document.forms['myForm'];    
    theForm.submit();
}

A form in HTML has several attributes that indicate how the form should be submitted; the following are some of these attributes:

action: it's a path to a web page to which the form should be submitted
method: the method of submitting the form (possible values include: POST, GET ...etc.)
enctype: the way the submitted data should be encrypted
target: the frame in which the form should be submitted

Once a page is submitted, either by clicking on the Submit button or by calling a JavaScript that submits the form, the browser checks the action of the form to be submitted, and then it will load the action -web page- sending it the contents of the form, encrypted using the encryption method specified in the encrypt attribute.

Prepare the Page

Two pages are going to be used to implement this technique. The first one will hold the HTML content, including the file upload control. The second one will contain the server-side code to save the file to the server.

Let's start by adding controls to the first page. Of course, we'll need to add a file upload control. In addition, we'll add an iFrame and a form. The HTML body of the page will look like this:

HTML

<body>

    <!-- This is the form that we added -->
    <form id="myForm" name="myForm" target="myIFrame" method="post" action="SaveFile.aspx"
        enctype="multipart/form-data">
    </form>
    
    <!-- This is the form which is added by default -->
    <form id="form1" runat="server">
    
        <!-- This is the file upload control -->
        <input type="file" id="myFile" name="myFile" runat="server" />
        
        <!-- This is a normal button that will be used 
             to the JavaScript function to upload the file -->
        <input type="button" value="Upload File" />
        
        <!-- This is an iFrame in which the form will be submitted -->
        <iframe style="display: none;" id="myIFrame" name="myIFrame"></iframe>
    
    </form>
</body>

Note that we added the form outside the form that was added by default to the page. We also set the action property to the second page URL, as mentioned earlier. The iFrame style is set to keep it hidden so we won't notice it when the file is being uploaded.

JavaScript

Now, we want to let the button call a JavaScript to submit the form and upload the file. In order to do that, we'll add a JavaScript function to the page and call it uploadFile. We'll also call this function at the button's click event. The following is the JavaScript function:

JavaScript

<script type="text/javascript">
function uploadFile() {

    // get the form that we added
    var theForm = document.forms['myForm'];
    
    // some browsers don't recognize the line above,
    // so this line is added for browser compatability
    if (!theForm)
        theForm = document.myForm;    

    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
    
        // get the file upload control
        var theFile = document.getElementById("myFile");
        
        // add the file upload control inside the form
        theForm.appendChild(theFile);
        
        // submit the form
        theForm.submit();
    }    
}
</script>

Save the File

The second page, SaveFile.aspx, contains the code that saves the file on loading, as follows:

protected void Page_Load(object sender, EventArgs e)
{
    Request.Files["myFile"].SaveAs("path on the server to save the file");
}

Compatible Browsers

This technique was tested on Microsoft Explorer 8 and Google Chrome.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)