BuyLog In
Ticket Q493822
Visible to All Users
Duplicate

We have closed this ticket because another page addresses its subject:

ASPxUploadControl - Provide the capability to call a file select dialog without clicking the "Browse" button or input field

ASPxUploadControl - How to call the "Browse" method via JavaScript

created 12 years ago

I'd like to use an ASPxUploadControl in the following way:

* User clicks an ASPxButton
* User is prompted to select a single file
* File is automatically uploaded to server and processed

What I'd really like is to simulate clicking the "Browse" button on the ASPxUploadControl from the "Click" client-side event on the ASPxButton - so the user would click the ASPxButton, which would be essentially the same as clicking "Browse…". The file is then selected, and then the TextChanged or FileInputCountChanged events could be used to automatically trigger an .Upload().

However, I can't find any way of invoking the "Browse…" process client-side. Is this possible?

Alternatively, is it possible to hide the selected files name in the ASPxUploadControl? All I really want is the "Browse…" button; the user doesn't need to see the name of the file they've selected.

Sign in to comment on this post

Answers approved by DevExpress Support

created 12 years ago (modified 12 years ago)

Hi Kenny,
I am afraid the ASPxUploadControl does not provide a way to call the "Browse" method via JavaScript.
However, since the ASPxUploadControl uses the <input type="file"> element internally, use the solution from this link:
How to link an input button to a file select window?
The only difficulty is that you will need to learn the name of the internal input element. You can do this only manually (View Source code of a rendered page).
For example:

JavaScript
function Browse() {  
     document.getElementById("ASPxUploadControl1_TextBoxT_Input").click();  
}  
ASPx
<dx:ASPxUploadControl ID="ASPxUploadControl1" runat="server" Width="280px">  
</dx:ASPxUploadControl>
    Comments (3)
    KA KA
    Kenny Anderson 12 years ago

      I'm afraid this doesn't work: with my ASPxButton like …
        <dx:ASPxButton ID="btn_fromfile" runat="server" Text="Upload file …" AutoPostBack="False" Width="100%" Theme="Glass">
                           <ClientSideEvents Click="function(s, e) {
      document.getElementById("ASPxRoundPanel1_uploadcontrol_TextBoxT_Input").click();
       }" />
      … clicking the button does bring up the file dialog. However, selecting the file in the dialog doesn't do anything - the text field in the ASPxUploadControl doesn't populate, and the client-side event TextChanged doesn't fire either.

      DevExpress Support Team 12 years ago

        Kenny,
        Please give us time to check whether it is possible to implement your scenario with the ASPxUploadControl.

        R R
        Ruslan (DevExpress) 12 years ago

          Hi Kenny,
          I've created a sample project with a possible solution for you.
          Please see it in the attachment.

          Sign in to comment on this post

          Other Answers

          created 9 years ago (modified 9 years ago)

          hi,

          Use the below clientside code to trigger AspxUploadControl Browse button

          JavaScript
          $('.dxTI')[1].click();

          Thank you

          Happy Coding :-)

            Sign in to comment on this post

            Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

            Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.