Updated: Click here for an updated Drag and Drop File upload how to.

Here's a quick AJAX FileUpload written for ASP.NET WebForms that I use every now and then using the old tried and true method of an iframe.

It needs to support several things: It needs to know the directory in which to save the file and it should allow for multiple file upload controls per page. I'll just be putting the basics on this one, nothing too fancy. Plenty of room for customization later on from a UI/UX standpoint.,

Create a new WebForm with the FileUpload control

This will be the page that we end up iframing into whichever page we're adding controls to. It will house the actual FileUpload control and most of the logic.

1. Right click and add a new Web Form. No MasterPage or anything else required.

Multiple AJAX FileUpload in ASP.NET

2. Add the following markup to your new FileUpload.aspx page.

Front-end (quick and painless)


<form id="photoUpload" enctype="multipart/form-data" runat="server">
    <div>
        <input id="filPhoto" type="file" runat="server"/>
    </div>
    <div id="divUpload">
        <input id="btnUpload" type="button" value="Upload Photo" />
    </div>

We should now have just a single file upload control on our page. You can style the control in any which way that you please.

Multiple AJAX FileUpload in ASP.NET

3. For the code-behind, I'm going to do a standard upload using the built in SaveAs method of the FileUpload object.

4. Copy and paste the following into your code behind, and I'll explain along the way.

Code Behind

    string strCallback = string.Empty;

    protected void Page_Load(object sender, EventArgs e)
    {
        strCallback = Request["callback"];
        if (IsPostBack)
            UploadPhoto();
    }

This isn't required, but will help us down the line if we ever need to change the callback function that our upload will make once completed.


    private void UploadPhoto()
    {
        // this script will be injected onto our page to notify of completion
        string script = string.Empty;
        string strFile = string.Empty;
        string function = strCallback.Length > 0 ? strCallback : "fileUploadComplete";

        string strTemplate = "<script type=\"text/javascript\">window.parent." + function + "('{0}', {1}, '{2}');" + "</script>";

        if ((file.PostedFile != null) && (file.PostedFile.ContentLength > 0))
        {
            string strGuid = Guid.NewGuid().ToString();
            strFile = strGuid + Path.GetExtension(file.PostedFile.FileName).ToLower();
            file.PostedFile.SaveAs(Server.MapPath("~/images/" + strFile));
        }
        else
        {
            script = string.Format(strTemplate, "Please specify a valid file.", "true", "");
        }

        if (string.IsNullOrEmpty(script))
        {
            script = string.Format(strTemplate, "Photo uploaded.", "false", strFile);
        }

        //Now inject the script which will fire when the page is refreshed.
        ClientScript.RegisterStartupScript(this.GetType(), "uploadNotify", script);
    }

To explain a bit. I'm doing a standard file upload save to the server. And along the away I'm building up a JavaScript 'script' that I will inject onto the page once the post is complete.

So that's it for our web form page. The only thing left is to iframe it onto our client pages. And that will look something like the following.

Usage


    <iframe id="iframe1" onload="initFileUpload('iframe1')" scrolling="no" frameborder="0" hidefocus="true" 
    style="text-align:center;vertical-align:middle;border-style:none;margin:0px;width:100%;height:150px" src='<%=ResolveUrl("~/testing/multifileupload.aspx?callback=callback1") %>'></iframe>
    <br />
    
     <iframe id="iframe2" onload="initFileUpload('iframe2')" scrolling="no" frameborder="0" hidefocus="true" 
    style="text-align:center;vertical-align:middle;border-style:none;margin:0px;width:100%;height:150px" src='<%=ResolveUrl("~/testing/multifileupload.aspx?callback=callback2") %>'></iframe>

5. You can place these on any page, and in any quantity that you'd like.

Multiple AJAX FileUpload in ASP.NET

6. There's one last step. We have to set up the "Upload File" buttons to trigger when they are click. And if you notice the above iframe declarations, they call the initFileUpload function onload, which you can see down below.


function initFileUpload(frame) {
    var _ifrPhoto = document.getElementById(frame);
    var _divUploadMessage = _ifrPhoto.contentWindow.document.getElementById('uploadmessage');
    var btnUpload = _ifrPhoto.contentWindow.document.getElementById('btnUpload');

    _divUploadMessage.innerHTML = '';
    btnUpload.onclick = function(event) {
        var filPhoto = _ifrPhoto.contentWindow.document.getElementById('file');

        if (filPhoto.value.length == 0) {
            _divUploadMessage.innerHTML = 'Please specify the file.';
            filPhoto.focus();
            return;
        }

        _ifrPhoto.contentWindow.document.getElementById('upload_form').submit();
    }
}

    function callback1(message, isError, image) {
        console.log('callback1');
    }

    function callback2(message, isError, image) {
        console.log('callback2');
    }

The callback function is set through the querystring parameters in each iframe. It essentially gets carried from your client page, to the iframe, and back to the client page through the injected script.

And for your copy and paste pleasure, feel free to click here.

Suggest the next blog post

Walter Guevara

Walter G. is a software engineer with over 10 years of professional experience. When he isn't blogging or being a CTO he enjoys coding randomly complex things that he hopes many people will get a chance to use one day.

Question or comment?

No comments posted yet

Add a comment

Send me your weekly newsletter filled with awesome ideas
Start
Score: 0
Use the following controls:
snake left
snake up
snake down
snake right