How to hide uploaded file list during uploading process?

[Denius Valiant]

Hi,

I have an AsyncUpload control within a div.
I selected several files to upload.
Questons:
How to hide uploaded file list during uploading process?
How to prevent parent div from expanding by height after files ware added for uploading.overflow:hidden didn't work;
Example:

    <div  style=" overflow: hidden" >
        <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" MultipleFileSelection="Automatic"
            OnClientFilesSelected="RadAsyncUpload1_FilesSelected" OnClientFileUploaded="RadAsyncUpload1_FileUploaded"
            UploadedFilesRendering="BelowFileInput" OnClientAdded="RadAsyncUpload1_Added"
            Height="25px" OnClientFileSelected="RadAsyncUpload1_FileSelected" OnClientFileUploading="RadAsyncUpload1_FileUploading"
            OnClientFilesUploaded="RadAsyncUpload1_FilesUploaded" EnableInlineProgress="False"
            OnFileUploaded="RadAsyncUpload1_FileUploaded" PostbackTriggers="btDoZip" Width="300px">
        </telerik:RadAsyncUpload>
    </div>

Thank you in advance.

[MasterChiefMasterChef]

Hi Denius,

You can access the uploaded files by selecting list items from the list that follows the RadAsyncUploader. To select all rows of uploaded files you would do a jQuery selection on $('RadAsyncUpload1 ul li'). This example should give you a good place to start:

<script type="text/javascript">
        function RadAsyncUpload1_FilesSelected(sender, args) {
            var rows = $('#RadAsyncUpload1 ul li');
            var lastRow = rows.last();
            lastRow.hide();
        }
        function RadAsyncUpload1_FileUploaded(sender, args) {
            var uploader = $find("<%= RadAsyncUpload1.ClientID %>");
            var inputs = uploader.getUploadedFiles();
            uploader.deleteFileInputAt(0); // Javascript error in IE 9

            var rows = $('#RadAsyncUpload1 ul li');
            var lastRow = rows.last();
            lastRow.hide(); // Javascript error in IE 9
        }
        function RadAsyncUpload1_FilesUploaded(sender, args) {
            var uploader = $find("<%= RadAsyncUpload1.ClientID %>");
            uploader.deleteFileInputAt(0);
            var td2 = $('#td2');
            td2.hide();
        }
    </script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
        <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server"
                MultipleFileSelection="Automatic"
                OnClientFileUploaded="RadAsyncUpload1_FileUploaded"
                OnClientFilesSelected="RadAsyncUpload1_FilesSelected"
                OnClientFilesUploaded="RadAsyncUpload1_FilesUploaded"
                UploadedFilesRendering="AboveFileInput">
        </telerik:RadAsyncUpload>

Unfortunately,Internet Explorer limits access for all inputs of type upload, so it is likely that this functionality will not work in this specific browser.

Hopefully this helps,
Master Chief

[Denius Valiant]

Thank you very much.
I found solution.

.ruInputs
{
	overflow: hidden !important;
}

.ruUploadProgress, li .ruCancel, li .ruRemove
{
	visibility: hidden;
}