Using IFrames for multiple file uploads and using jquery to communicate between main document and iframes

May 11, 2009

In this post we will look into how we can use iframes to do multi file upload and also how we can use jQuery to communicate between the main document and a specific iframe (among many iframes).

So, the scenario here is we have a page with multiple file upload depending upon some data. We will use a repeater to deal with the data and hence we get ‘n’ rows of file upload depending upon the datasource. The iframe elements are kept inside repeater as shown below. Here we will see how we can trigger specific iframe events and then try to do validations and data communication between the main page and an iframe using jQuery. The communication is done with the help of accessing current pages elements and then setting the iframes hidden element with the values we got on the current page. The set values are then used by code behind of the iframe file upload page or the javascript of that page. So, in another way we achieve both file upload and parameter passing in this type of scenario.

multiple file uploads

multiple file uploads

Code Example1: Page = Main.aspx

<asp:Repeater runat="server" ID="rptAdData" OnItemDataBound="rptAdData_ItemDataBound">
    <asp:Label CssClass="flHeight" ID="flHeight" runat="server"></asp:Label>
                                <asp:Label CssClass="flWidth" ID="flWidth" runat="server"></asp:Label>
                                <asp:Label CssClass="flCrTypeName" ID="flCrTypeName" runat="server"></asp:Label>
                                <asp:Label CssClass="lblAds" ID="lblAdIDs" runat="server"></asp:Label>
                                <asp:Label CssClass="lblSkus" ID="lblSkuIDs" runat="server"></asp:Label>
                                <asp:Label CssClass="lblCrSize" ID="lblCrSizeID" runat="server"></asp:Label>
                                <asp:Label CssClass="lblCrType" ID="lblCrTypeID" runat="server"></asp:Label>
    <div id="divFrameOuter" style="margin-top: 5px;">
                                    
    </div>
</asp:Repeater>

Code Example 2: Page = Main.aspx, Code = jQuery

<script type="text/javascript">
        $(document).ready(function() {
         $('iframe').load(function() {
                var parent = $(this).parent();
                var lblHeightIframe = $(this).contents().find("body .lblHeightInner");  //Finding the height element in iframe page -- the value will be set with this pages label element 
                var lblWidthIframe = $(this).contents().find("body .lblWidthInner");
                var lblTypeNameIframe = $(this).contents().find("body .lblTypeNameInner");
                var lblCampaignIdIframe = $(this).contents().find("body .lblCampaignIdInner");

                lblWidthIframe.attr('value', parent.children('.flWidth').text().trim());
                lblHeightIframe.attr('value', parent.children('.flHeight').text().trim());
                lblTypeNameIframe.attr('value', parent.children('.flCrTypeName').text().trim());
                lblCampaignIdIframe.attr('value', campaignId);
            });
 });
</script>

Code Example 3: Page = Photoupload.aspx

<%@ Page Language="C#"  AutoEventWireup="true"  CodeFile="PhotoUpload.aspx.cs" Inherits="PhotoUpload" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
</head>
<body style="margin:0px" onload="initPhotoUpload()">
<form id="photoUpload" enctype="multipart/form-data" encoding="multipart/form-data" runat="server">
      <div id="uploadBlock" style="float: left; width: 30%;">
          <div id="divFrame">
              <div>
                <input id="filPhoto" type="file" runat="server"/>
            </div>
            <div id="divUpload" style="padding-top:4px">
                <input type="hidden" id="lblHeight" class="lblHeightInner" value="" runat="server" />
                <input type="hidden" id="lblWidth" class="lblWidthInner" value="" runat="server" />
                <input type="hidden" id="lblTypeName" class="lblTypeNameInner" value="" runat="server" />                
                <input type="hidden" id="lblCampaignId" class="lblCampaignIdInner" value="" runat="server" />
                <input id="btnUpload" type="button" class="btnSimple" value="Upload Creative" />
            </div>
          </div>
</form>
</body>
</html>

There is some javascript too in the photoupload.aspx and it depends on how you want your particular file uplaod to work or else you can write me for that. In the code behind I have done thumbnailing and also taken care of reuploading new file using the same fileupload button.

So, once we are done with file upload in the Main.aspx I can write an event for ‘btnUpload’ button of photoupload.aspx page so that the event is catched at the parent page and some sort of validations like atleast on file is upload or so etc can be done and appropriate error message can be shown.

I hope this will be helpful to you. You can write to me at sushant.pandey@gmail.com in case of any queries or source code.

bye for now.

-Thanks

Advertisements

Who am I what am I doing?

Who am I what am I doing?