RadAsyncUpload show Select button and selected files separately.

1 Answer 30 Views
AsyncUpload
Martin
Top achievements
Rank 1
Martin asked on 07 Jan 2022, 11:19 AM

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.

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 11 Jan 2022, 04:26 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
AsyncUpload
Asked by
Martin
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or