TextBox Hiding in AsyncUpload

[Jagat]

Hello,

I am using AsyncUpload in my project which is "TextBox + Button". I want to hide the TextBox. It means I want only SELECT Button visible for browsing the file, instead of "TextBox + Button". How does I make work?


Thanks in Advance.

[Princy]

Hi Jagat,

Try the following css to achieve your scenario.

CSS:

<style type="text/css">
 .ruFakeInput
 {
  visibility: hidden;
  width: 0;
  padding: 0;
 }
</style>

Thanks,
Princy.

[Jagat]

This is making the button also invisible. I need only the textbox that shows the path to be invisible.

[Princy]

Hi Jagat,

Unfortunately I couldn't replicate your issue. One suggestion is that you can set the css of upload button as follows.

CSS:

<style type="text/css">
   .ruFakeInput
   {
      visibility: hidden;
      width: 0;
      padding: 0;
    }
    .ruFileeInput
    {
     width: 1 !important;
     visibility:visible !important;
    }
</style>

Please provide your full code if the issue persists.

Thanks,
Princy.

[Jagat]

Princy,

This is hiding the entire control. I wont be able to upload a file if it hides the control. Please see my question ... I just need to hide the textbox and not  the button nor the entire control.

If I cannot hide the textbox, I should atleast be able to display the actual path instead of C:\\fakepath\img654.jpeg

<ASP:AsyncFileUpload   OnClientUploadComplete="uploadComplete" runat="server" ID="AsyncFileUpload1"
                                Width="300px" UploaderStyle="Modern" CompleteBackColor="White" UploadingBackColor="#CCFFFF"
                                ThrobberID="imgLoader" OnUploadedComplete="FileUploadComplete" OnClientUploadStarted="uploadStarted" />

[Princy]

Hi Jagat,

After inspecting you code I found that you are not using RadAsyncUpload. I suppose you are using AsyncFileUpload in the ajaxToolKit. Following is the sample code that I tried to hide the TextBox in the AsyncFileUpload.

CSS:

<style type="text/css">
    .FileUploadClass input[type=text]
    {
        display: none;
    }
</style>

ASPX:

<ajaxToolKit:AsyncFileUpload runat="server" ID="AsyncFileUpload1" Width="20px" UploaderStyle="Modern" CssClass="FileUploadClass" CompleteBackColor="White" UploadingBackColor="#CCFFFF" ThrobberID="imgLoader" />

Hope this helps.

Regards,
Princy.