Click here to Skip to main content
Click here to Skip to main content
Articles » Web Development » Ajax » Samples » Downloads
 
Add your own
alternative version

Professional file uploads with the MultiUpload and ImageList server controls

, 19 Dec 2007
A professional AJAX GUI for uploading files using the server controls in the Memba Velodoc XP Edition.
proupload_src.zip
ProUpload
App_Data
Bin
Memba.WebControls.XP.dll
images
upload.gif
scripts
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Memba.WebControls.XP" Namespace="Memba.WebControls" TagPrefix="mbui" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Professional File Upload</title>
<style  type="text/css">
<!--
.cssList
{
    overflow:auto;
    width:99.7%;
    height:92px;
    border:1px solid #0F0000;
    background-color:white;
}
.cssItem
{
    position:relative;
    width:70px;
    height:70px;
    padding:5px;
    margin:5px;
    text-align:center;
    border:1px solid white;
    float:left;
}
.cssItemHover
{
    position:relative;
    width:70px;
    height:70px;
    padding:5px;
    margin:5px;
    text-align:center;
    border:1px dotted black;
    background-color:whitesmoke;
    float:left;
}
.cssImage
{
    border:0;
}
.cssText
{
    font-family:Calibri, Arial, Helvetica, sans-serif;
    font-size:10px;
    white-space:normal;
}
.cssRemove
{
    position:absolute;
    top:64px;
    left:64px;
    z-index:10;
    cursor:pointer;
}
.cssMultiUpload
{
    white-space:nowrap;
    text-decoration:none;
}
.cssMultiUploadHover
{
    white-space:nowrap;
    text-decoration:underline;
}
//-->
</style>
</head>
<body>
<form id="form1" runat="server" enctype="multipart/form-data">
<asp:ScriptManager ID="ScriptManager" runat="server">
    <Scripts>
        <asp:ScriptReference Path="~/scripts/Memba.Utils.js" />
    </Scripts>
</asp:ScriptManager>
<!-- MultiUpload2 -->
<mbui:MultiUpload2 ID="MultiUpload" runat="server"
    Text="Choose file..."
    Width="100px"
    CssClass="cssMultiUpload"
    HoverCssClass="cssMultiUploadHover">
</mbui:MultiUpload2>
<!-- MultiUpload2 -->
<!-- ImageList -->
<mbui:ImageList ID="ImageList" runat="server"
    CssClass="cssList"
    ItemCssClass="cssItem"
    ItemHoverCssClass="cssItemHover"
    ImageCssClass="cssImage"
    TextCssClass="cssText"
    RemoveCssClass="cssRemove"
    RemoveTooltip="Remove from selection"
    LinesOfText="2"
    Height="92px"
    Width="420px"></mbui:ImageList>
<!-- ImageList -->
<input type="button" id="ClearButton" value="Clear" onclick="onClear();" />
<asp:Button ID="SubmitButton" runat="server" Text="Submit" OnClick="SubmitButton_Click" />
<br /><br />Trace:<br />
<textarea id="TraceConsole" cols="100" rows="20"></textarea>
</form>
<script type="text/javascript">
<!--
// Declare global variables for the various controls
var g_MultiUpload;
var g_ImageList;
//pageLoad function of ASP.NET Ajax Extensions framework
function pageLoad()
{
    //Get a reference to the MultiUpload control and
    //add en event handler for the browse event
    g_MultiUpload = $find("<%= MultiUpload.ClientID %>");
    if(g_MultiUpload)
        g_MultiUpload.add_browse(onBrowse);
    //Get a reference to the ImageList control and
    //add en event handler for the browse event
    g_ImageList = $find("<%= ImageList.ClientID %>");
    if(g_ImageList)
        g_ImageList.add_remove(onRemove);   
}
//pageLoad function of ASP.NET Ajax Extensions framework
function pageUnload()
{
    if(g_MultiUpload)
        g_MultiUpload.remove_browse(onBrowse);
    if(g_ImageList)
        g_ImageList.remove_remove(onRemove);    
}
//Event handler for the browse (click) event of the MultiUpload control
function onBrowse(sender, args)
{
    if((g_ImageList) && (g_MultiUpload))
    {
        //Search for the item in the Imagelist
        if (g_ImageList.find_item(args.get_value()).length > 0)
        {
            alert("file already in list");
            //The item already exists, we can remove the duplicate INPUT in the MultiUpload control
            g_MultiUpload.removeInput(args.get_id());
        }
        else
        {
            //Since the item is not found in the ImageList, create a new item
            var item = new Memba.WebControls.ImageListItem(
                Memba.Utils.newGuid(),
                '<%= this.ResolveClientUrl("~/images/upload.gif") %>',
                args.get_value(),
                args.get_value(),
                args.get_id()
            );
            //Add the new item to the ImageList
            g_ImageList.add_item(item);
        }
        //We can do some tracing which will display in the TraceConsole textarea 
        Sys.Debug.trace(g_ImageList.get_count() + " files in image list, and " + g_MultiUpload.get_count() + " files in MultiUpload control");
    }
}
//Event handler for the remove event of the ImageList control
function onRemove(sender, args)
{
    if((g_ImageList) && (g_MultiUpload))
    {   
        //Upon clicking the remove icon in the ImageList, remove the corresponding INPUT in the MultiUpload control
        g_MultiUpload.removeInput(args.get_tag());
        //We can do some tracing which will display in the TraceConsole textarea 
        Sys.Debug.trace(g_ImageList.get_count() + " files in image list, and " + g_MultiUpload.get_count() + " files in MultiUpload control");
    }
}
//Event handler for the click event of the clear button
function onClear()
{
    if(g_MultiUpload)
        g_MultiUpload.clear();
    if(g_ImageList)
        g_ImageList.clear();
}
//-->
</script>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)

About the Author

jlchereau
Other Memba
United Kingdom United Kingdom

Other Articles:

My work at Memba

You can check what Memba does at our corporate web site.
 
I am currently working on two projects:
- VELODOC, a file transfer online service and software product which you can try at http://www.velodoc.net;
- CITADOC, a knowledge base/wiki online service and software product which can be managed and edited in Microsoft Office and which will be released in the second half of 2008.
 
The XP edition of these projects is the open source core released under the GPL license.
 

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 20 Dec 2007
Article Copyright 2007 by jlchereau
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid