This is a migrated thread and some comments may be shown as answers.

Hide File List

16 Answers 452 Views

AsyncUpload

This is a migrated thread and some comments may be shown as answers.

Brian asked on 19 Apr 2011, 08:43 PM

4-19-2011-2-10-16-PM.png

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

16 Answers, 1 is accepted

answered on 22 Apr 2011, 11:30 AM

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.

answered on 10 May 2011, 09:00 PM

5-10-2011-2-53-56-PM.png

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

answered on 16 May 2011, 05:57 PM

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

answered on 26 Aug 2011, 11:19 AM

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 >>

answered on 30 Aug 2011, 05:26 PM

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>

answered on 16 Nov 2012, 01:25 PM

HideUploadingList.zip

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Hide File List

16 Answers, 1 is accepted