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

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

It a pain try to hide those files name being uploaded.
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 >>

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
>

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

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


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


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.
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.
Plamen
the Telerik team