RadAsyncUpload auto fire selection of files

[Jon]

I am working on my own styling of this control because I want it displayed in a small form center of the screen.

Formatting the "select" button is a little limited and therefore I want to have my own button outside of the actual control itself to fire the selection of files.

The idea is that when my button is clicked it triggers the RadAsyncUpload control to fire up a dialog to select files using the File Explorer.

I can't see a method that I can call on the client side for this.

Is this even possible?

I have tried styling the button with an image but it is irratic, the div doesnt extend to show the larger image and it all looks a mess.

If I localise the value to something longer than the word "select" then it flows outside the standard button.

can anyone offer a suggest as to how to either trigger the selection of files from my own button or substantially style the RAD button to something larger and perhaps image based?

 thanks

jON

 

[Peter Filipov]

Hi Jon,

Please test the following styles:

<style>

    html .RadUpload_Default .ruButton.ruButtonFocus.ruButtonHover {

        background-position: 0 0;

    }

 

    html .RadUpload_Default .ruButton {

        background-image: url('http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png');

        color: #000;

        width:200px;

        height:200px;

    }

 

   html .ruFileWrap.ruStyled {

        width:200px;

        height:200px;

    }

</style>




Here is the markup:

<telerik:RadScriptManager runat="server" ></telerik:RadScriptManager>

<telerik:RadAsyncUpload runat="server" HideFileInput="true" ID="Async1"></telerik:RadAsyncUpload>

Regards,
Peter Filipov
Telerik

[Jon]

Thanks Peter,

I can see that hides the select files button ... its still rendered just invisible.

I wonder whether I might be overworking this ... the issue I am having is that the "select" button is far right of the AsyncUploadrow0 element. This div scrolls way top the left of the browser viewport and therefore all attempts to center the button are proving impossible. I have removed the file name input box and simply want the "select files" button centered in my Div.

Is there a clever way to render the async control "select" button in my div centered horizontally?

thanks,

jON

 

[Peter Filipov]

Hi Jon,

The control does not support such rendering out of the box. You will need to apply custom styles to change its default appearance. 

Regards,
Peter Filipov
Telerik