iframe

Create An Ajax Style File Upload

Kazi Manzur Rashid — Tue, 31 Jul 2007 21:36:58 GMT

If you visit Asp.net Ajax Forum, you will find hundreds of request on File Upload Control that it does not give Ajax version of the page when it is placed in an UpdatePanel. Certainly, it is not possible, as the XMLHTTPRequest object that is used internally to post the form does not support file upload. In this post I will show you how to create Ajax like version of the file upload. The trick is very simple, I will use an Iframe to upload the file so the whole page does not get refreshed and when the post is in progress it will show a dummy progress. The following shows you the screenshots of the solutions:

Now lets discuss the implementation part, starting with the Main page markup.

<fieldset>
    <legend>Photo Upload Demo</legend>
    <div id="divFrame">
        <iframe id="ifrPhoto" onload="initPhotoUpload()" scrolling="no" frameborder="0" hidefocus="true" 
style="text-align:center;vertical-align:middle;border-style:none;margin:0px;width:100%;height:55px" src="PhotoUpload.aspx"></iframe>
    </div>
    <div id="divUploadMessage" style="padding-top:4px;display:none"></div>
    <div id="divUploadProgress" style="padding-top:4px;display:none">
        <span style="font-size:smaller">Uploading photo...</span>
        <div>
            <table border="0" cellpadding="0" cellspacing="2" style="width:100%">
                <tbody>
                    <tr>
                        <td id="tdProgress1">&nbsp; &nbsp;</td>
                        <td id="tdProgress2">&nbsp; &nbsp;</td>
                        <td id="tdProgress3">&nbsp; &nbsp;</td>
                        <td id="tdProgress4">&nbsp; &nbsp;</td>
                        <td id="tdProgress5">&nbsp; &nbsp;</td>
                        <td id="tdProgress6">&nbsp; &nbsp;</td>
                        <td id="tdProgress7">&nbsp; &nbsp;</td>
                        <td id="tdProgress8">&nbsp; &nbsp;</td>
                        <td id="tdProgress9">&nbsp; &nbsp;</td>
                        <td id="tdProgress10">&nbsp; &nbsp;</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</fieldset>

As you see that we are using few divs to show and hide the upload form and the progress bar. The important thing is we are binding the initPhotoUpload in the frame load event. Now let us check the iframe source page markup.

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

The iframe source page contains only a file upload control and a button to post the form. Now lets get back to the main page initPhotoUpload function and lets check how it is implemented:

function initPhotoUpload()
{
    _divFrame = document.getElementById('divFrame');
    _divUploadMessage = document.getElementById('divUploadMessage');
    _divUploadProgress = document.getElementById('divUploadProgress');
    _ifrPhoto = document.getElementById('ifrPhoto');

    var btnUpload = _ifrPhoto.contentWindow.document.getElementById('btnUpload');

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

        //Baisic validation for Photo
        _divUploadMessage.style.display = 'none';

        if (filPhoto.value.length == 0)
        {
            _divUploadMessage.innerHTML = '<span style=\"color:#ff0000\">Please specify the file.</span>';
            _divUploadMessage.style.display = '';
            filPhoto.focus();
            return;
        }

        var regExp = /^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.jpg|.JPG|.gif|.GIF|.png|.PNG|.bmp|.BMP)$/;

        if (!regExp.test(filPhoto.value)) //Somehow the expression does not work in Opera
        {
            _divUploadMessage.innerHTML = '<span style=\"color:#ff0000\">Invalid file type. Only supports jpg, gif, png and bmp.</span>';
            _divUploadMessage.style.display = '';
            filPhoto.focus();
            return;
        }

        beginPhotoUploadProgress();
        _ifrPhoto.contentWindow.document.getElementById('photoUpload').submit();
        _divFrame.style.display = 'none';
    }
}

Once the iframe is loaded we are setting few module level variables (All module level variables are prefixed with _ (underscore) character in this example) to DOM elements, we are also getting the reference of the Upload button which is in the iframe and creating its click handler. In the click handler first we are doing few basic validation such as the file upload control is not empty or the file that is specified has a valid image file extension. Once the validation qualifies then we are calling the beginPhotoUploadProgress function (discussed next) and submitting the iframe form. The beginPhotoUploadProgress function is the first of three functions which are used to show the dummy progress bar. Let us see how these functions are written:

function beginPhotoUploadProgress()
{
    _divUploadProgress.style.display = '';
    clearPhotoUploadProgress();
    _photoUploadProgressTimer = setTimeout(updatePhotoUploadProgress, PROGRESS_INTERVAL);
}

function clearPhotoUploadProgress()
{
    for (var i = 1; i <= _maxLoop; i++)
    {
        document.getElementById('tdProgress' + i).style.backgroundColor = 'transparent';
    }

    document.getElementById('tdProgress1').style.backgroundColor = PROGRESS_COLOR;
    _loopCounter = 1;
}

function updatePhotoUploadProgress()
{
    _loopCounter += 1;

    if (_loopCounter <= _maxLoop)
    {
        document.getElementById('tdProgress' + _loopCounter).style.backgroundColor = PROGRESS_COLOR;
    }
    else 
    {
        clearPhotoUploadProgress();
    }

    if (_photoUploadProgressTimer)
    {
        clearTimeout(_photoUploadProgressTimer);
    }

    _photoUploadProgressTimer = setTimeout(updatePhotoUploadProgress, PROGRESS_INTERVAL);
}

As we can see we are basically using the timer (window.setTimeout) to show the dummy progress in these functions. Now lets see what happens in the server side when the iframe page posts.

private const string SCRIPT_TEMPLATE = "<" + "script " + "type=\"text/javascript\">window.parent.photoUploadComplete('{0}', {1});" + "<" + "/script" + ">";

private void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack)
    {
        //Sleeping for 10 seconds, fake delay, You should not it try at home.
        System.Threading.Thread.Sleep(10 * 1000);
        UploadPhoto();
    }
}

private void UploadPhoto()
{
    string script = string.Empty;

    if ((filPhoto.PostedFile != null) && (filPhoto.PostedFile.ContentLength > 0))
    {
        if (!IsValidImageFile(filPhoto))
        {
            script = string.Format(SCRIPT_TEMPLATE, "The uploaded file is not a valid image file.", "true");
        }
    }
    else
    {
        script = string.Format(SCRIPT_TEMPLATE, "Please specify a valid file.", "true");
    }

    if (string.IsNullOrEmpty(script))
    {
        //Uploaded file is valid, now we can do whatever we like to do, copying it file system,
        //saving it in db etc.

        //Your Logic goes here

        script = string.Format(SCRIPT_TEMPLATE, "Photo uploaded.", "false");
    }

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

private static bool IsValidImageFile(HtmlInputFile file)
{
    try
    {
        using (Bitmap bmp = new Bitmap(file.PostedFile.InputStream))
        {
            return true;
        }
    }
    catch (ArgumentException)
    {
        //throws exception if not valid image
    }

    return false;
}

In the server side we are first doing some basic validation such as the file upload control has file and the file is a valid image file. Once the validation is done we are injecting some javascript which will be executed when the page is loaded in the browser. The javascript calls the main page photoUploadComplete function which shows the success/failure or the validation message of the upload. Lets see the javascript function photoUploadComplete of the main page.

function photoUploadComplete(message, isError)
{
    clearPhotoUploadProgress();

    if (_photoUploadProgressTimer)
    {
        clearTimeout(_photoUploadProgressTimer);
    }

    _divUploadProgress.style.display = 'none';
    _divUploadMessage.style.display = 'none';
    _divFrame.style.display = '';

    if (message.length)
    {
        var color = (isError) ? '#ff0000' : '#008000';

        _divUploadMessage.innerHTML = '<span style=\"color:' + color + '\;font-weight:bold">' + message + '</span>';
        _divUploadMessage.style.display = '';

        if (isError)
        {
            _ifrPhoto.contentWindow.document.getElementById('filPhoto').focus();
        }
    }
}

The function simply hides the progress bar and shows the upload control then it shows the message in colored text which is sent from the server.

I hope you can easily implment it in Ajax UpdatePanel, if not please let me know, I will show it in next post.

Download : Complete Solution

Cross Domain Iframe Resize

Kazi Manzur Rashid — Sat, 13 Jan 2007 17:40:00 GMT

Recently I was trying to set an iframe height which is hosted in another domain. But could not able to get its height from its hosting window - It always throws security exception. I searched Google and found a interesting example on Iframe cross domain messaging, here is the link. Based upon it I have created a small solution which finally does the job. Here are files, you can also download these files from this link:

// FrameManager.js -- Must be added in Hosting window
var FrameManager =
{
    currentFrameId : '',
    currentFrameHeight : 0,
    lastFrameId : '',
    lastFrameHeight : 0,
    resizeTimerId : null,

    init : function()
    {
        if (FrameManager.resizeTimerId == null)
        {
            FrameManager.resizeTimerId = window.setInterval(FrameManager.resizeFrames, 500);
        }
    },

    resizeFrames : function()
    {
        FrameManager.retrieveFrameIdAndHeight();

        if ((FrameManager.currentFrameId != FrameManager.lastFrameId) ||
            (FrameManager.currentFrameHeight != FrameManager.lastFrameHeight))
        {
            var iframe = document.getElementById(FrameManager.currentFrameId.toString());

            if (iframe == null) return;

            iframe.style.height = FrameManager.currentFrameHeight.toString() + "px";

            FrameManager.lastFrameId = FrameManager.currentFrameId;
            FrameManager.lastFrameHeight = FrameManager.currentFrameHeight;
            window.location.hash = '';
        }
    },

    retrieveFrameIdAndHeight : function()
    {
        if (window.location.hash.length == 0) return;

        var hashValue = window.location.hash.substring(1);

        if ((hashValue == null) || (hashValue.length == 0)) return;

        var pairs = hashValue.split('&');

        if ((pairs != null) && (pairs.length > 0))
        {
            for(var i = 0; i < pairs.length; i++)
            {
                var pair = pairs[i].split('=');

                if ((pair != null) && (pair.length > 0))
                {
                    if (pair[0] == 'frameId')
                    {
                        if ((pair[1] != null) && (pair[1].length > 0))
                        {
                            FrameManager.currentFrameId = pair[1];
                        }
                    }
                    else if (pair[0] == 'height')
                    {
                        var height = parseInt(pair[1]);

                        if (!isNaN(height))
                        {
                            FrameManager.currentFrameHeight = height;
                            FrameManager.currentFrameHeight += 15;
                        }
                    }
                }
            }
        }
    },

    registerFrame : function(frame)
    {
        var currentLocation = location.href;
        var hashIndex = currentLocation.indexOf('#');

        if (hashIndex > -1)
        {
            currentLocation = currentLocation.substring(0, hashIndex);
        }

        frame.contentWindow.location = frame.src + '?frameId=' + frame.id + '#' + currentLocation;
    }
};

window.setTimeout(FrameManager.init, 300);

<!--Host.html-Where the Target iframe resides-->
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>IFrame Resize Sample</title>
    <script type="text/javascript" src="FrameManager.js"></script>
</head>
<body>
    <div>The Following is an iframe:</div>
    <iframe id="ifrSample1" scrolling="no" frameborder="0" src="Frame.html" style="margin:0px;width:330px;height:100px" onload="FrameManager.registerFrame(this)"></iframe>
</body>
</html>

// Frame.js -- Must be added in iframe window
function publishHeight()
{
    if (window.location.hash.length == 0) return;

    var frameId = getFrameId();

    if (frameId == '') return;

    var actualHeight = getBodyHeight();
    var currentHeight = getViewPortHeight();

    if  (Math.abs(actualHeight - currentHeight) > 15)
    {
        var hostUrl = window.location.hash.substring(1);

        hostUrl += "#";
        hostUrl += 'frameId=' + frameId;
        hostUrl += '&';
        hostUrl += 'height=' + actualHeight.toString();

        window.top.location = hostUrl;
    }
}

function getFrameId()
{
    var qs = parseQueryString(window.location.href);
    var frameId = qs["frameId"];

    var hashIndex = frameId.indexOf('#');

    if (hashIndex > -1)
    {
        frameId = frameId.substring(0, hashIndex);
    }

    return frameId;
}

function getBodyHeight()
{
    var height;
    var scrollHeight;
    var offsetHeight;

    if (document.height)
    {
        height = document.height;
    }
    else if (document.body)
    {
        if (document.body.scrollHeight)
        {
            height = scrollHeight = document.body.scrollHeight;
        }
        if (document.body.offsetHeight)
        {
            height = offsetHeight = document.body.offsetHeight;
        }

        if (scrollHeight && offsetHeight)
        {
            height = Math.max(scrollHeight, offsetHeight);
        }
    }

    return height;
}

function getViewPortHeight()
{
    var height = 0;

    if (window.innerHeight)
    {
        height = window.innerHeight - 18;
    }
    else if ((document.documentElement) && (document.documentElement.clientHeight))
    {
        height = document.documentElement.clientHeight;
    }
    else if ((document.body) && (document.body.clientHeight))
    {
        height = document.body.clientHeight;
    }

    return height;
}

function parseQueryString(url)
{
    url = new String(url);
    var queryStringValues = new Object();
    var querystring = url.substring((url.indexOf('?') + 1), url.length);
    var querystringSplit = querystring.split('&');

    for (i = 0; i < querystringSplit.length; i++)
    {
        var pair = querystringSplit[i].split('=');
        var name = pair[0];
        var value = pair[1];

        queryStringValues[name] = value;
    }

    return queryStringValues;
}

<!--Frame.html-Will reside in another domain-->
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Page In IFrame</title>
    <script type="text/javascript" src="Frame.js"></script>
    <script type="text/javascript">
        window.onload = function(event)
        {
            window.setInterval(publishHeight, 300);
        }
    </script>
</head>
<body>
    <div>
        <div style="padding:4px;border:solid 1px #cccccc;width:300px">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce in tortor sit amet sem luctus ornare. Nam sed augue id erat commodo gravida. Nulla in pede. Nunc sed elit non pede aliquam eleifend. Cras varius. Sed non lorem eget ipsum accumsan suscipit. Donec bibendum enim. Phasellus a ligula. Fusce turpis diam, ultricies at, ullamcorper a, consectetuer et, mauris. Pellentesque neque felis, scelerisque non, vestibulum at, luctus quis, velit. Quisque sit amet mi sed sem facilisis ornare. In leo ante, hendrerit nec, lobortis eget, feugiat ac, orci.
        </div>
        <div style="padding:4px;border:solid 1px #cccccc;width:300px">
            Maecenas ullamcorper ornare urna. Sed ornare leo vel lorem pretium ornare. Sed vitae lacus eu pede molestie venenatis. Morbi vestibulum. Proin tincidunt, sem sit amet semper volutpat, nulla ante pulvinar turpis, ut porta turpis augue sit amet magna. Nam in mauris. In mauris. Nunc metus. Duis eget diam. Sed vulputate lacus eget ipsum. Etiam ultricies bibendum ligula. Mauris semper, magna nec posuere pretium, quam lectus ultricies magna, ac pharetra risus ligula at dui. Integer volutpat sagittis ipsum.
        </div>
        <div style="padding:4px;border:solid 1px #cccccc;width:300px">
            Cras pretium. Morbi condimentum. Morbi leo dui, hendrerit non, rhoncus vitae, ultrices sed, quam. Praesent sit amet quam non turpis pellentesque egestas. Aliquam odio lacus, condimentum eu, tempus eget, porta ac, ipsum. Phasellus sit amet mauris at nisl lobortis aliquet. Suspendisse fringilla metus porta lacus. Nam aliquet. Sed vestibulum tellus ac leo. Nunc sed metus vel nisl ultricies fermentum. Maecenas aliquam ligula quis est venenatis mattis. Suspendisse sollicitudin aliquet leo. Quisque condimentum felis ac nisl. Curabitur bibendum, pede et venenatis ornare, massa justo ullamcorper velit, a rutrum tellus mi et ligula. Maecenas nibh libero, faucibus vel, lacinia ac, laoreet nec, odio. Quisque dui quam, vestibulum sit amet, convallis eget, fermentum nec, mauris. Vivamus et massa ut orci pellentesque consectetuer. Proin dolor arcu, ornare non, iaculis eu, aliquam sed, quam. Morbi volutpat semper ipsum.
        </div>
        <div style="padding:4px;border:solid 1px #cccccc;width:300px">
            Suspendisse potenti. Praesent eu turpis. Nullam nulla sem, sollicitudin lacinia, laoreet rhoncus, commodo nec, nisl. Nam pharetra porta justo. Etiam faucibus, turpis eu dapibus varius, felis nibh tempus justo, sed faucibus metus dolor nec leo. Sed rutrum, sapien eget placerat accumsan, enim quam porttitor leo, ac aliquam felis elit non enim. Sed dapibus nonummy massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean sagittis, metus et hendrerit aliquam, ligula turpis nonummy diam, id interdum risus ligula et magna. Phasellus vel nibh in lorem pretium iaculis.
        </div>
        <div style="padding:4px;border:solid 1px #cccccc;width:300px">
            Proin mattis pharetra libero. Morbi varius, nunc laoreet blandit porttitor, pede augue condimentum felis, ac varius libero nibh eu est. Mauris condimentum arcu eget dolor. Phasellus vitae ipsum vel tellus feugiat lacinia. Quisque leo diam, porta id, commodo quis, ornare vitae, massa. In cursus dictum ante. In hac habitasse platea dictumst. Donec volutpat sem nec mauris. Donec venenatis lorem eget quam. Curabitur vitae ipsum sit amet augue dignissim ultricies. Maecenas eget velit. Donec nec tellus at lectus rhoncus ultricies.
        </div>
    </div>
</body>
</html>