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

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

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

  1. Pam says:

    Hello,

    I’d appreciate if you can give me some feedback on our iphone app iLightFarts

    http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=317429824&mt=8

    I realize that you are iphone app guru 🙂 It’d be swell if you can place an honest review of our app.

    Thank you,
    Pam

  2. Profitez des MMO Gratuits…

    […]Using IFrames for multiple file uploads and using jquery to communicate between main document and iframes « Sushantp’s Weblog[…]…

  3. Local Businesses…

    […]Using IFrames for multiple file uploads and using jquery to communicate between main document and iframes « Sushantp’s Weblog[…]…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Who am I what am I doing?

Who am I what am I doing?

%d bloggers like this: