Hide File List

17 posts, 0 answers
  1. Brian
    Brian avatar
    5 posts
    Member since:
    Sep 2007

    Posted 19 Apr 2011 Link to this post

    Is there a way to hide the list of files that are displayed above the fakeinput/select button?  See the attached image for the elements I want to hide/eliminate.

    I am using RadAsyncUpload in a custom DotNetNuke module.  I am developing with DotNetNuke v5.6.1 running on IIS7.5 in Integrated mode.

    I have skinned my RadAsyncUpload control so that ruFakeInput is not displayed and my ruBrowse button uses a custom image.  Here's the code for my control:

    <script language="javascript" type="text/javascript">
     
        var filesSelected = 0;
        var filesUploaded = 0;
     
        function onClientFileSelected(sender, event) {
            ++filesSelected;
        }
     
        function onClientFileUploaded(sender, event) {
            ++filesUploaded;
            if (filesUploaded == filesSelected) {
                __doPostBack('', '');
            }
        }
     
    </script>
     
    ...
     
    <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server"
        onclientfileselected="onClientFileSelected"
        onclientfileuploaded="onClientFileUploaded"
        MultipleFileSelection="Automatic"
        Skin="Custom" style="margin-bottom: 1px" Visible="True" Width="80px"
        EnableInlineProgress="False" EnableEmbeddedSkins="False">
        <Localization Select="" />
    </telerik:RadAsyncUpload>

    I created the 'Custom' skin using the Default skin as a template, changing all occurrences of 'Default' to 'Custom' and making the following changes:

    .RadUpload_Custom .ruFakeInput
    {
        display: none;
    }
     
    .RadUpload_Custom .ruBrowse
    {
        width: 70;
        height: 24;
        background-image: url('Upload/ruUpload.png');
        color: #000;
    }

    I found this post which says it hides the file list, but I could not figure out which parts of the CSS code actually hide the list - I tried implementing different parts of it but was not successful in hiding the list.

    I also found this post and was unable to get the suggested code to work.

    Any help is greatly appreciated.

    Thanks,

    Brian
  2. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 22 Apr 2011 Link to this post

    Hi Brian,

    You can use the following code, in order to hide the list of the files being uploade:

    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .ruUploadProgress, li .ruCancel, li .ruRemove
            {
                visibility:hidden;
            }
            li.ruUploading
            {
                height:1px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <script type="text/javascript">
                function selected(sender, args) {
                    $telerik.$(args.get_row()).addClass("ruUploading");
                }
            </script>
             
            <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnClientFileSelected="selected">
            </telerik:RadAsyncUpload>
            <telerik:RadProgressArea runat="server" ID="RadProgressArea1">
            </telerik:RadProgressArea>
        </div>
        </form>
    </body>

    I hope that this helps.

    All the best,
    Genady Sergeev
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Brian
    Brian avatar
    5 posts
    Member since:
    Sep 2007

    Posted 10 May 2011 Link to this post

    Hi Genady,

    Thank you for responding.  Unfortunately, your solution doesn't work as well as I would like it to.

    The class li.ruUploading attempts to hide each item in the file list by setting its height to 1px, however, this doesn't get the job done.  When the upload begins it causes the upload control to shift down on the page 1px for each file selected.  Worse yet, it doesn't actually hide the file list items, it just squishes them together.  This is evident when the files selected have long file names - see the attached pic.

    But even so, this is a bunch of hoops to jump through just to hide the file list.  In my opinion, the ability to hide the file list should be an option of the RadAsyncUpload control.  Especially when coupled with a RadProgressArea, there's really no need for the file list ...

    on another note, I could never get the Cancel button in the RadProgressArea to work - you click it and nothing happens.

    Thanks,

    Brian
  5. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 16 May 2011 Link to this post

    Hello Brian,

    With respect to the Cancel button, I confirm that this is a bug with RadProgressArea/RadAsyncUpload. I will log it and we will fix it for the Q release. Regarding the hide problem, there is an issue with Silverlight/Flash - If you make them invisible, the upload process breaks because browsers will call dispose on the <object> tag. Unfortunately the closes to workaround is to use either visibility:hidden (which preserves space) or make the height equal to  0 pixel. We will try to find a workaround and add a property to show/hide files being uploaded, however, it will take its time.

    Greetings,
    Genady Sergeev
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Ang Lim
    Ang Lim avatar
    5 posts
    Member since:
    Jun 2012

    Posted 23 Aug 2011 Link to this post

    Hi Genady, will you guy have the property to show/hide files being uploaded added to RadAsyncUpload control on the next release?

    It a pain try to hide those files name being uploaded.

  7. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 26 Aug 2011 Link to this post

    Hi,

    The feature is in our to do list, however, we are still waiting few more requests for its implementation. There are some question marks regarding this feature, however. For example, If the files list is hidden, how the async upload would notify the users when the files are uploaded. How about If one wants to remove/cancel file uploaded by mistake and so on. We would rather not proceed with implementation until we sort out these issues.

    Kind regards,
    Genady Sergeev
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  8. Andrew
    Andrew avatar
    1 posts
    Member since:
    Aug 2011

    Posted 30 Aug 2011 Link to this post

    I made some slight changes to the Telerik posted code, and this worked for me.

    I used OnClientFileUploading and modified the CSS to use display:none;


    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .ruUploadProgress, li .ruCancel, li .ruRemove
            {
                visibility:hidden;
            }
            li.ruUploading
            {
                display:none;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <script type="text/javascript">
                function uploading_file(sender, args) {
                    $telerik.$(args.get_row()).addClass("ruUploading");
                }
            </script>
               
            <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnClientFileUploading="uploading_file">
            </telerik:RadAsyncUpload>
            <telerik:RadProgressArea runat="server" ID="RadProgressArea1">
            </telerik:RadProgressArea>
        </div>
        </form>
    </body>
  9. april
    april avatar
    4 posts
    Member since:
    Oct 2010

    Posted 19 Mar 2012 Link to this post

    Has this issue been resolved? I tried the workaround posted above, but it still takes up some space initially and then hides the space. If I have like 100 files, it looks very bad on the screen? Is there a better solution? Or has this been included in the earlier releases? Thank you.
  10. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 21 Mar 2012 Link to this post

    Hello April,

    The feature is not yet implemented. I will rise its priority. I am not sure that having one hundred files in the upload is a realistic scenario though, does the problem reproduce with less files?

    Regards,
    Genady Sergeev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  11. Tim
    Tim avatar
    1 posts
    Member since:
    May 2012

    Posted 14 May 2012 Link to this post

    Add one more request for a "don't show this list" option (rather than just above/below) to the queue :).

    Thanks,
    Tim
  12. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 17 May 2012 Link to this post

    Hello TIm,

    Based on the feedback we have received we will implement this feature for the next Q release service pack.

    All the best,
    Genady Sergeev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  13. M Events
    M Events avatar
    1 posts
    Member since:
    May 2012

    Posted 30 May 2012 Link to this post

    That would be great, we just try to implement the workaround for our next release.
  14. Roy
    Roy avatar
    3 posts
    Member since:
    Apr 2011

    Posted 14 Nov 2012 Link to this post

    Is there any news on this feature? We would really like to have this as well. As the Q3 release is out now I was wondering if this was implemented.
  15. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 16 Nov 2012 Link to this post

    Hello,

    We revise your suggestions and decided not to implement it. Instead we are going to provide a working project that could be used. I am sending you a sample page as an attachment.

    Regards,
    Peter Filipov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  16. Ehsan
    Ehsan avatar
    2 posts
    Member since:
    Nov 2012

    Posted 11 Jan 2013 Link to this post

    thanks Peter
  17. Chandrashekhar
    Chandrashekhar avatar
    4 posts
    Member since:
    Dec 2012

    Posted 14 Jan 2013 Link to this post

    Hi,

    I am facing an issue with asyncupload...as below..
    maxfilescount set to 10.
    browse 5 files and after again browse for 7files (5+7).So control is accepting these files.how to restrict these new 7 files as the file count exceeded 10.

    Thanks,
    Chandra.
  18. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 15 Jan 2013 Link to this post

    Hello Chandra,

     
    Currently setting MultipleFileSelection=Automatic and MaxFileInputsCount at the same time is not supported in the same scenario with RadAsyncUpload. Please excuse us for this limitation of our control.

    Kind regards,
    Plamen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017