How to hide uploaded file list during uploading process?

3 posts, 0 answers
  1. Denius Valiant
    Denius Valiant avatar
    9 posts
    Member since:
    Jan 2013

    Posted 14 Feb 2013 Link to this post

    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.
  2. MasterChiefMasterChef
    MasterChiefMasterChef avatar
    152 posts
    Member since:
    Jan 2013

    Posted 14 Feb 2013 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Denius Valiant
    Denius Valiant avatar
    9 posts
    Member since:
    Jan 2013

    Posted 15 Feb 2013 Link to this post

    Thank you very much.
    I found solution.

    .ruInputs
    {
    	overflowhidden !important;
    }

    .ruUploadProgressli .ruCancelli .ruRemove
    {
    	visibilityhidden;
    }
Back to Top