File Upload Dialog

Page 1 of 4 123 ... LastLast
  1. #1

    File Upload Dialog

    <P align=left>Please see this post for the latest version:

    I know there's been talk about this in the forums before, but has anyone created the file upload dialog UX? The one here:

    I've been attempting to do it, but as this is my first ExtJS experience, it's slow going and I haven't made much progress. I know server controls very well (having authored multiple ones myself - include richtextboxes), but I'm still familiarizing myself w/ the ExtJS + Coolite APIs.

    I have it so I can drop in the control into the designer and it appears, but at runtime IE gives me a javascript error "Invalid source HTML for this operation." On Firefox 3.0, it appears, but the dialog is squished down. When you resize it, it takes on its correct min width/height.

    I figure this is probably a version issue since the javascript I pulled from that site is for 2.0 and ExtJS is on 2.2. However, I don't know where to begin to address the issue.

    Can anyone help? Here's the code I have so far:

    using System;
    using System.Web.UI;
    using System.Drawing;
    using System.ComponentModel;
    using Coolite.Ext.Web;
    [assembly: WebResource("ServerControls.Resources.Scripts.Ext.ux.UploadDialog.packed.js", "text/javascript")]
    [assembly: WebResource("ServerControls.Resources.Scripts.Ext.ux.UploadDialog.js", "text/javascript")]
    namespace ServerControls {
        [ToolboxData("<{0}:FileUploadDialog runat=\"server\" Title=\"Upload Files\" Collapsible=\"false\" Icon=\"None\" />")]
        [ToolboxBitmap(typeof(FileUploadDialog), "Resources.ToolboxIcons.window.bmp")]
        [Description("Specialized dialog for uploading files.")]
        [InstanceOf(ClassName = "Ext.ux.UploadDialog.Dialog")]
            Type = typeof(FileUploadDialog),
            WebResource = "ServerControls.Resources.Scripts.Ext.ux.UploadDialog.packed.js",
            WebResourceDebug = "ServerControls.Resources.Scripts.Ext.ux.UploadDialog.js"
        public class FileUploadDialog : Window {
            protected override void OnBeforeClientInit(Observable sender) {
            protected override void OnAfterClientInit(Observable sender) {
    Here's the designer code:

    using System;
    using System.ComponentModel;
    using System.ComponentModel.Design;
    using Coolite.Ext.Web;
    namespace ServerControls {
        internal class FileUploadDialogDesigner : ExtWebControlDesigner {
            public override bool AllowResize {
                get {
                    return false;
            public override string GetDesignTimeHtml() {
                if (((FileUploadDialog)this.Control).Hidden) {
                    return string.Empty;
                return base.CreatePlaceHolderDesignTimeHtml();
            private DesignerActionListCollection actionLists;
            public override DesignerActionListCollection ActionLists {
                get {
                    if (actionLists == null) {
                        actionLists = new DesignerActionListCollection();
                        actionLists.Add(new FileUploadDialogActionList(this.Component));
                    return actionLists;
        internal class FileUploadDialogActionList : WindowActionList {
            public FileUploadDialogActionList(IComponent component) : base(component) { 
            public override DesignerActionItemCollection GetSortedActionItems() {
                return base.GetSortedActionItems();
    Sample web content page:

    <%@ Page Title="File Upload Dialog" Language="C#" MasterPageFile="~/site.master" AutoEventWireup="true" CodeBehind="fileUploadDialog.aspx.cs" Inherits="Sandbox.fileUploadDialog" %>
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <%@ Register Assembly="ServerControls" Namespace="ServerControls" TagPrefix="ux" %>
    <asp:Content ID="content" ContentPlaceHolderID="content" runat="server">
        <ext:ScriptManager ID="ScriptManager" runat="server" />
        <br />
        <ux:FileUploadDialog ID="FileUploadDialog1" runat="server" Collapsible="True" Icon="Cart" Title="Upload Files" Draggable="true" Floating="true" Maximizable="True" Modal="True" ShowOnLoad="False" />
        <ext:Button ID="Button1" runat="server" Icon="ReportAdd" Text="Upload Files">
                <Click Handler="#{FileUploadDialog1}.show()" />
  2. #2

    RE: File Upload Dialog

    Hi davidhoyt,

    This FileUploadDialog UX control is a monster one to bite off. Props to you taking this one on.

    I took a quick look at the files within the .zip download and there is a .css file included which I suspect is required. That might help solve the FF3 rendering issue you mentioned.

    You can add the .css file as an embedded resource to your project then add the [ClientStyle] attribute to FileUploadDialog class, just like the [ClientScript] attribute. Please ensure you set all the resource files (.js, .css, images) as Embedded Resources from within Visual Studio.

    I'm not sure about the IE JavaScript error. If you view the page in FireFox with FireBug are there any JavaScript errors/exceptions thrown? Actually... this sounds like maybe a problem with an extra (or missing) comma within the packed version of the .js files. Confirm if the js error is being thrown with the debug version of the .js file.

    Some of the images might also be required, so you should add them as embedded resources and add the [assembly: WebResource()] attributes to FileUploadDialog.cs, just like you have done for the .js files.

    The other trick with having embedded resource images is that you have to edit the .css file and create an "-embedded" version, where you replace all the "url(../path/here.gif)" references with WebResource assembly paths, url("<%=WebResource("")%>"). See the Coolite Toolkit "ext-all-embedded.css" file for reference.

    I hope this helps solve some of the problems.
    Geoffrey McGill
  3. #3

    RE: File Upload Dialog

    Honestly, I was hoping it would be quite easy. I'm not sure about the design-time experience, but I would hope wiring everything else up would be easy.

    Using the Coolite API, how do I attach a file upload event?

    My server control days were before AJAX - and I figure you guys already have something in place to do this easily.

    It looks like all I really need to do is to be able to set the upload URL - which I'm hoping I can set to be the page the control is hosted on. And then hopefully intercept the upload.

    How are you guys approaching it for the new file upload control?

    And, by the by, please do not make it cache the entire contents of the file in memory like the current ASP.NET file upload control does. Hopefully you can create a stream or something of the sort.
  4. #4

    RE: File Upload Dialog

    Turns out some of my errors were stylesheet issues in the CSS we had defined for the site. The CSS and associated images (as embedded resources) are all downloading just fine from the assembly. I still need some help, though...

    1. How do I include something in the clientconfig without having to decorate a property with the ClientConfig attribute? (e.g. I have a config option that I want to set, but don't want it publically accessible. Do I just make the property internal/protected/private?)

    2. What are the proper design-time features for this? Should it look like a dialog at design time or what? Currently I don't do much for it.

    3. I'm still very inexperienced with ExtJS. When you click on the "Add" button and select a file, nothing happens. If you create the object outside of coolite using javascript, everything functions as intended. What could be the difference?

    4. The server control version's dialog doesn't allow it to be dragged around like the normal straight javascript version does.

    5. I still get the IE error and haven't been able to figure out what's going on. I'm using the debug version and still nothing.

    I could sure use some help. Mainly w/ #s 3-5 there. I've attached my source as an example. I welcome anyone's suggestions/aid.
  5. #5

    RE: File Upload Dialog

    Regarding #4 above - I stripped it down to nothing more than inheriting from Ext.Window and it still won't behave correctly on the page load.

    If I create it via javascript at the end of the HTML, it works and behaves correctly.

    What's going on?

    Thanks for any help you can provide! (c:
  6. #6

    RE: File Upload Dialog

    I could really use some help. Wasn't help offered in (c:

    Sorry to bug - I just don't know anyone else that can help with this. No one I know has ExtJS/Coolite API experience.

    I would be happy to add this to the UX project. I already attached my code in a previous post.

    Again, thanks for any/all help received! (c:
  7. #7

    RE: File Upload Dialog

    I was looking at #4 using the FireFox Web Developer Toolkit and see some restrictive CSS called .ext-strict that seems to prevent the window from floating down. I wasn't able to get any further because I ran out of time.
  8. #8

    RE: File Upload Dialog

    Ok, I've researched your problems some more and found a difference between the Coolite version and the raw JavaScript version. Near the end of the rendered output of the JavaScript version, the following line occurs...

    <form style="position: absolute; left: -100px; top: -100px; width: 100px; height: 100px;" action="/upload.ashx" method="post"/>
    This line isn't present in your Coolite Version because this code gets rendered to the page's 'aspnetForm' form element. Since it gets rendered to this element during the initial page load, the form element inherits ext-strict css from its parent element which has a height that resricts the control from being moved down.

    Unfortunately, traditional ASP.NET only has one form tag for the whole page. So you may have to modify the raw JavaScript for this Control to function properly in ASP.NET. Also, this may be what's causing your #5 issue.

    I hope this helps you out.

  9. #9

    RE: File Upload Dialog

    Okay, here's an almost functioning control. It needs some major design-time help, though. I'm a bit rusty in that area. I'd love it if someone had the time to do that. There are some instances where if you try to work with it in the designer it crashes VS. *doh* But if you always work in HTML (source), there's never a problem.

    I'm still working on a few Firefox bugs, but I thought I'd submit what I have so people can test it out and see if they like it.

    The file upload uses an HttpModule to catch the post and then allows you to stream it as it comes in instead of buffering it in memory. To process the file, you set the ProcessorType property on the control. Check out the Test/Default.aspx.cs code for an example of how to serialize a file stream to disk. The data is passed in as a stream so you can do anything you'd like with it (e.g. stream to a database).

    I had to make one change to the source that I've submitted back to the author and hopefully he'll include it in the next version.

    To get around the errors I had discovered before, I just used Page.ClientScript(...) to create the dialog at the end of the page. That seemed to work. Go figure...

    Anyway - enjoy!
  10. #10

    RE: File Upload Dialog

    Oh and I purposely made the HttpModule extensible in case anyone needs to customize it for their needs.

    And I apologize for the missing references - the forum imposes a file upload limit and so I had to take it out so it would fit.
Page 1 of 4 123 ... LastLast

Similar Threads

  1. [CLOSED] multiple file upload and file size at client side
    By mirwais in forum 1.x Legacy Premium Help
    Replies: 24
    Last Post: Dec 15, 2014, 5:44 AM
  2. Replies: 1
    Last Post: Jun 23, 2011, 9:37 AM
  3. [CLOSED] File Dialog on Image Click
    By jwf in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 21, 2011, 10:03 AM
  4. [CLOSED] file upload - file name is empty
    By stoque in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 11, 2011, 8:06 PM
  5. Replies: 5
    Last Post: Oct 16, 2008, 8:18 PM

Posting Permissions