How to hide Default uploading table

Last post 10-05-2011, 7:25 AM by cutechat. 2 replies.
Sort Posts: Previous Next
  •  10-04-2011, 9:30 AM 70279

    How to hide Default uploading table

    Hi, I'm having problems hiding the default uploading table, I'm creating a custom upload table based on your online examples, the javascript code is on prototype format and the handlers are correctly created and assigned (the component works as expected).
     
    The problem is that I just want my custom table to show but when I upload multiple files the default table always appear, this isn't happening on single file upload.
     
    Could you please help me?
     
    This is how it looks like with multiple files uploading (Note the default uploading table above my custom table):
     
     
    This doesn't happen with one file (and this is my desired behavior with multiple files also)
     
     
     Here is the declarative code:
    <table width="100%" style="height:100%;">
                    <tr>
                        <td>
                            <div id="queuediv" runat="server" style="display: none;">
                                <div id="queuedivtablecontainer" runat="server">
                                </div>
                            </div>
                        </td>
                    </tr>            
                    <tr>
                        <td>                       
                            <asp:Button runat="server" ID="SelectFilesButton" Text="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Select File..." 
                                                style="background-image:url('../../Rlib2/UploadProcess/images/upload.png'); background-color:Transparent; background-repeat: no-repeat; text-align: center; 
                                                       background-position: 4px -1px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border:2px solid #94928C; font-family:Arial Narrow;
                                                       height:20px;" />
                            <CuteWebUI:UploadAttachments runat="server"
                                ID="Uploader1" InsertButtonID="SelectFilesButton"
                                OnFileUploaded="Uploader1_FileUploaded" ManualStartUpload="false"
                                ShowRemoveButtons="false" ShowTableHeader="false" ShowCheckBoxes="False" 
                                ShowProgressBar="false" ShowProgressInfo="false" ShowActionButtons="false" UploadType="Auto"                                        
                                onfilevalidating="Uploader1_FileValidating1" OnPreRender="Uploader1_PreRender" UploadAddonButtonShowText="false"
                                CancelButtonStyle-CssClass="AjaxUploaderCancelButton" UploadingMsg="" CancelUploadMsg="" > 
                                <TableStyle BackColor="Transparent" BorderStyle="none" />                            
                            </CuteWebUI:UploadAttachments>   
                        </td>
                    </tr>                
                </table>
     
    and here is the JS code:
     
     
    Type.registerNamespace('NOS.RAF.Web.RLib2.Views.UploadProcess');
    NOS.RAF.Web.RLib2.Views.UploadProcess.UploaderUC = function(element) {
        this._Uploader = null;
        this._cancelButtonClientId = null;
        this._saveButtonClientId = null;
        this._multipleFilesUpload = null;
        this._queuediv = null;
        this._queuedivtablecontainer = null;
        this._SelectFilesButton = null;
        NOS.RAF.Web.RLib2.Views.UploadProcess.UploaderUC.initializeBase(this, [element]);
    }
    NOS.RAF.Web.RLib2.Views.UploadProcess.UploaderUC.prototype =
    {
        initialize: function() {
            NOS.RAF.Web.RLib2.Views.UploadProcess.UploaderUC.callBaseMethod(this, 'initialize');
            var handlerStart = $createDelegate(this._uploadStarted, this);
            $get(this._Uploader).handlestart = handlerStart;
            var handlerOnSelect = $createDelegate(this._filesSelected, this);
            $get(this._Uploader).handleselect = handlerOnSelect;
            var handleOnPostBack = $createDelegate(this._onPostBack, this);
            $get(this._Uploader).handlepostback = handleOnPostBack;
            var handlestop = $createDelegate(this._filesStop, this);
            $get(this._Uploader).handlestop = handlestop;
            var handlequeue = $createDelegate(this._fileQueue, this);
            $get(this._Uploader).handlequeueui = handlequeue;
            var handleProgress = $createDelegate(this._filesProgress, this);
            $get(this._Uploader).handleprogress = handleProgress;
        },
        dispose: function() {
            NOS.RAF.Web.RLib2.Views.UploadProcess.UploaderUC.callBaseMethod(this, 'dispose');
        },
        _resizeWidget: function(height) {
            if (typeof ($dashboards) != "undefined") {
                $dashboards.fireWidgetResized(height);
            }
            else {
                var win = getRadWindow();
                if (win && !win.errorSized) {
                    var currentSize = win.get_height();
                    win.set_height(currentSize + 80);
                    win.center();
                    win.errorSized = true;
                }
            }
        },
        _cancelalltasks: function() {
            $get(this._Uploader).cancelall();
            var win = getRadWindow();
            if (win)
                win.errorSized = false;
        },
        _uploadStarted: function() {
            // Hide 'Select Files' button,
            this._resizeWidget(30);
            $get(this._Uploader).internalobject.insertBtn.style.display = "none";
            $get(this._SelectFilesButton).style.display = "none";
            var cancelButtonClient = $get(this._cancelButtonClientId);
            if (cancelButtonClient)
                cancelButtonClient.disabled = true;
            var saveButtonClient = $get(this._saveButtonClientId);
            if (saveButtonClient)
                saveButtonClient.disabled = true;
        },
        _filesSelected: function(files) {
            // Hide 'Select Files' button,        
            this._resizeWidget(30);
            $get(this._Uploader).internalobject.insertBtn.style.display = "none";
            $get(this._SelectFilesButton).style.display = "none";
            var cancelButtonClient = $get(this._cancelButtonClientId);
            if (cancelButtonClient)
                cancelButtonClient.disabled = true;
            var saveButtonClient = $get(this._saveButtonClientId);
            if (saveButtonClient)
                saveButtonClient.disabled = true;
            var hidden = this;
            //change the files array would take no effect.
            var name = files[0].FileName;
            var size = files[0].FileSize // (or -1)
            var queuetable = this;
            //return false to cancel it..
        },
        _onPostBack: function() {
            var cancelButtonClient = $get(this._cancelButtonClientId);
            if (cancelButtonClient)
                cancelButtonClient.disabled = false;
            var saveButtonClient = $get(this._saveButtonClientId);
            if (saveButtonClient)
                saveButtonClient.disabled = false;
        },
        _filesStop: function() {
            $get(this._Uploader).internalobject.insertBtn.style.display = "";
            $get(this._SelectFilesButton).style.display = "";
            var cancelButtonClient = $get(this._cancelButtonClientId);
            if (cancelButtonClient)
                cancelButtonClient.disabled = false;
            var saveButtonClient = $get(this._saveButtonClientId);
            if (saveButtonClient)
                saveButtonClient.disabled = false;
        },
        _filesProgress: function(enable, filename, begintime, uploadedsize, totalsize) {
            var hidden = this;
            var progress = document.getElementById(filename);
            if (enable) {
                if (totalsize) {
                    progress.innerHTML = "    " + Math.floor(100 * uploadedsize / totalsize) + '%' + "    "
                }
                else {
                }
            }
            else {
            }
            return false; //hide the default UI.
        },
        _fileQueue: function(list) {
            if (this._multipleFilesUpload == "false") {
                $get(this._Uploader).internalobject.insertBtn.style.display = "none";
                $get(this._SelectFilesButton).style.display = "none";
            }
            
            $get(this._queuediv).style.display = "";
            var container = $get(this._queuedivtablecontainer);
            container.innerHTML = "";
            allsize = 0;
            var table = document.createElement("table");
            table.style.borderCollapse = "collapse";
            table.cellSpacing = 3;
            table.cellPadding = 3;
            for (var i = 0; i < list.length; i++) {
                var name = list[i].FileName
                var size = list[i].FileSize // (or -1)
                var stat = list[i].Status // Finish|Error|Upload|Queue
                var func = list[i].Cancel;
                var row = table.insertRow(-1);
                row.insertCell(-1).innerHTML = "<img src=\"../../Rlib2/UploadProcess/images/paperclip.png\" />";
                row.insertCell(1).innerHTML = name.substring(0, 20) + " (" + size + ")";
                var last = row.insertCell(-1);
                if (stat == "Queue") {
                    var btn = document.createElement("A");
                    btn.href = "BLOCKED SCRIPTvoid(0)";
                    btn.onclick = func;
                    btn.innerHTML = "<img src=\"../../Rlib2/UploadProcess/images/x2.png\" />";
                    last.appendChild(btn);
                }
                else if (stat == "Upload") {
                    var t = document.createElement("B");
                    t.innerHTML = "<img src=\"../../Rlib2/UploadProcess/images/snake_transparent.gif\" />";
                    t.style.width = "100px";
                    last.appendChild(t);
                    // show progress
                    var prg = document.createElement('div');
                    prg.setAttribute("id", name);
                    last.appendChild(prg);
                    // show Cancel
                    var btn = document.createElement("A");
                    btn.href = "BLOCKED SCRIPTvoid(0)";
                    btn.onclick = func;
                    btn.innerHTML = "Cancel";                
                    last.appendChild(btn);
                    // Set td width properly, to avoid wrapping
                }
                else if (stat == "Finish") {
                    var fin = document.createElement("C");
                    fin.innerHTML = "<img src=\"../../Rlib2/UploadProcess/images/chkmrk.png\" />";
                    last.appendChild(fin);
                    // show progress
                    var prg = document.createElement('div');
                    prg.setAttribute("id", name);
                    last.appendChild(prg);
                }
                else if (stat == "Error") {
                    var err = document.createElement("err");
                    err.innerHTML = "<img src=\"../../Rlib2/UploadProcess/images/chkmrk.png\" />";
                    last.appendChild(err);
                }
                container.appendChild(table);
            }        
            return false; //hide the default queue table;
        }
    }
    NOS.RAF.Web.RLib2.Views.UploadProcess.UploaderUC.registerClass('NOS.RAF.Web.RLib2.Views.UploadProcess.UploaderUC', NOS.RAF.Web.Shell.MM.RAFUserControl);
    if (typeof (Sys) != 'undefined') {
        Sys.Application.notifyScriptLoaded();
    }
    function getRadWindow() {
        if (window.radWindow) {
            return window.radWindow;
        }
        if (window.frameElement && window.frameElement.radWindow) {
            return window.frameElement.radWindow;
        }
        return null;
    }
     
    Thanks in advance for your kind help.
     
    Note: Seems like both of my images didn't reach the post, but i think the problem is quite clear. 
     
    Best regards. 
     
  •  10-04-2011, 2:47 PM 70285 in reply to 70279

    Re: How to hide Default uploading table

    Just found my solution, just put this lines on your style sheet:
     
     .AjaxUploaderQueueTable {display: none !important;}
     
    And solved, the table is no longer showing.
     
    Good luck!! 
  •  10-05-2011, 7:25 AM 70291 in reply to 70285

    Re: How to hide Default uploading table

    Hi,
     
    Please check this topic to customize the table.
     
     
    in handlequeueui event , return false will hide the default table.
     
    Regards,
    Terry
View as RSS news feed in XML