RadAsyncUpload show Select button and selected files separately.

[Martin]

Hi all,

Is it possible to have the RadAsyncUpload Select button and the files the user selects as two separate elements?  I would like to have the Select button displayed in one part of the screen and the selected files in a different part of the screen.

Any advice would be greatly appreciated.

Martin.

[Vessy]

Hi Martin,

You can hide the default Select button of the AsyncUpload( and the input assigned to it) and trigger the click of the ".ruFileInput" element from a custom button, which will show the File selection dialog.

For example, you can use a similar logic:

<style>
            .RadAsyncUpload .ruSelectWrap {
                display:none;
            }
        </style>
 <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1"HideFileInput="true"
 CssClass="targetAsyncUpload" Localization-Select="">
 </telerik:RadAsyncUpload>
 <div style="height: 200px"></div>
 <telerik:RadButton ID="CustomSelectButton1" runat="server" Text="Select" AutoPostBack="false" OnClientClicked="triggerSelect"></telerik:RadButton>

 <script>
            var $ = $ || $telerik.$;

            function triggerSelect() {
                $(".targetAsyncUpload .ruFileInput")[0].click();
            }
        </script>

Regards,
Vessy
Progress Telerik