Appearance of RadAsyncUpload

[Michael]

Hello,

How do I retain the initial appearance of the RadAsyncUpload after you select the file to upload?   I have the max count at 1 and I want the control to appear with the textbox of the filename (if the filename is long then that textbox should not expand) and the Select button should remain.

Basically, I dont want to see the control to change appearance to the little green dot and red X remove after you select the filename to upload.

Thanks...

[Bozhidar]

Hello Michael,

You can use some custom javascript and the OnClientFileUploaded event. Here's what the handler function should look like:

function fileUploaded(upload, args) {
    if (upload.getUploadedFiles().length > 1) {
        upload.deleteFileInputAt(0)
    }
    upload.addFileInput();
    $telerik.$(".ruFakeInput", upload.get_element()).val(args.get_fileName());
    $telerik.$(".ruInputs li:first").hide();
}

 
Kind regards,
Bozhidar
the Telerik team

[Michael]

Thanks for your help.  I did see a flicker when it changes back to the original layout.  Is there a way to avoid that?

Also, I have this control in a table cell, and its taking up alot of room, I'm trying to figure out how to shrink the left side of white space that appears to the left of the textbox. See my attached picture.  I highlighted the white space in red.  That cell is only 8% of the table that is defined to be 98% of the screen. 

I was looking at CSS:

.RadAsyncUpload

 

 

, .RadUpload, .RadUpload_Default

 

{

 

 

float: right !important;

 

 

 

text-align: right !important;

 

 

 

vertical-align:bottom !important;

 

 

 

max-width: inherit !important;

 

}

Do I need to adjust anything here?

Thanks...

[Bozhidar]

Hi Michael,

Thank you for getting back to us.

That flicker you see is the loading indicator showing the progress of the upload. If you hide it, you won't have any indication of when the upload is finished, and this can cause problems. For instance if you try to upload another file, while the first one is still uploading, the logic will break.

To prevent that, and still keep to your specifications, I've modified the code, so that when you select a file, the Upload is disabled until the file is uploaded, thus preventing anyone from trying to upload 2 files at once. This time I use the OnClientFileSelected and OnClientFileUploaded events. Here's what the functions look like:

function fileUploaded(upload, args) {
    upload.set_enabled(true);
}

function fileSelected(upload, args) {
    if (upload.getUploadedFiles().length == 1) {
        upload.deleteFileInputAt(0)
    }
    $telerik.$(".ruInputs li:first", upload.get_element()).addClass('hidden');
    upload.addFileInput();
    $telerik.$(".ruFakeInput", upload.get_element()).val(args.get_fileName());
    upload.set_enabled(false);
}

You should also add the following CSS:

.hidden
{
    display: none !important;
}

As for the spacing issue, since it is a styling problem, it highly depends on your design and I'm not able to provide you with a proper response without a sample page I can test locally. Could you try to isolate the problem in such page and send it back to me?
 
Hope this was helpful.

Kind regards,
Bozhidar
the Telerik team

[Michael]

Hello,

Thanks for the quick response.  I do not currently have a need to upload more than 2 files at one time.  When I implemented your new code, I saw two radupload controls.  I do not want this effect.  I just wanted to avoid the flicker of the green button, red x remove, etc.

For the spacing issue, here is my html:

 

 

 

 

<table style="width: 98%">

 

 

 

<tr>

 

 

 

 

 

 

 

 

<td align="left" style="width: 35%; padding-left:7px">

 

 

 

 

 

 

 

 

<asp:CheckBox ID="chkInfo" runat="server" Text=" Information included in worksheet"

 

 

 

 

 

 

 

 

AutoPostBack="True" OnCheckedChanged="chkInfo_CheckedChanged" />

 

 

 

 

 

 

 

 

</td>

 

 

 

 

 

 

 

 

<td align="center" style="width: 28%">

 

 

 

<asp:Repeater ID="rptrDocs" OnItemDataBound="rptrDocs_ItemDataBound" runat="server">

 

 

 

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

 

 

 

<div style="text-align:left">

 

 

 

 

 

 

 

 

<asp:HyperLink ID="lnkView" Text='<%# Eval("Document") %>' runat="server"></asp:HyperLink>

 

 

 

 

 

 

 

 

</div>

 

 

 

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

 

 

 

<SeparatorTemplate>

 

 

 

 

 

 

 

 

</SeparatorTemplate>

 

 

 

 

 

 

 

 

</asp:Repeater>

 

 

 

 

 

 

 

 

</td>

 

 

 

 

 

 

 

 

<td align="right" style="width: 21%">

 

 

 

<asp:LinkButton ID="btnWorksheet" runat="server" Text="Excel Worksheet" OnClick="btnWorksheet_Click"></asp:LinkButton><asp:Label

 

 

 

 

 

 

 

 

ID="lblNoWorksheet" runat="server" ForeColor="Red" Text="No worksheet attached"

 

 

 

 

 

 

 

 

Visible="false"></asp:Label>

 

 

 

 

 

 

 

 

</td>

 

 

 

 

 

 

 

 

<td align="center" style="width: 8%">

 

 

 

<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnFileUploaded="RadAsyncUpload1_FileUploaded"

 

 

 

OnClientFileUploadFailed="onUploadFailed" OnClientFileSelected="onFileSelected" MultipleFileSelection="Disabled"

 

 

 

MaxFileInputsCount="1" OnClientFileUploaded="onFileUploaded" OnClientFileUploadRemoved="onClientFileUploadRemoved" />

 

 

 

 

 

 

 

 

</td>

 

 

 

 

 

 

 

 

<td align="right" style="width: 6%; padding-left:2px">

 

 

 

 

 

 

 

 

<div id="divbtnAttach" style="display:none; padding-top:3px" runat="server">

 

 

 

 

 

 

 

 

<asp:ImageButton ID="btnAttach" runat="server" src="../images/ico_Add.GIF"

 

 

 

OnClientClick="ToggleLoadingOn();AttachWorksheetPostBack();"

 

 

 

ToolTip="Attach External Document" Width="16px" CausesValidation="False" ></asp:ImageButton></div>

 

 

 

 

 

 

 

 

<div id="divbtnAttach1" style="display:block; padding-top:3px" runat="server">

 

 

 

 

 

 

 

 

<asp:ImageButton ID="btnAttach1" runat="server"

 

 

 

src="../images/ico_Add_Disabled.GIF" Enabled="false"

 

 

 

ToolTip="Attach External Document" Width="16px" CausesValidation="False" ></asp:ImageButton></div>

 

 

 

 

 

 

 

 

</td>

 

 

 

 

 

 

 

 

</tr>

 

 

 

 

 

 

 

 

</table>

 

[Michael]

Hi, I was able to get the width properly set by using the server side implementation:

uploadControl.Width=Unit.Pixel(500);

Thanks. 

[Bozhidar]

Hi Michael,

Thank you for getting back to us.

Unfortunately I can't reproduce the issue with the 2 upload controls showing at the same time. I've attached the sample page I used to test your issue. Could you run it and verify that the problem reproduces?
 
Regards,
Bozhidar
the Telerik team