How to customize defualt servoy file upload dialog ?

Classic Servoy
1

Hi All ,

I want to customize the default servoy file upload dialog in webclient . Iam downloading and changing the “servoy_web_client_default” css . This is customizing the file upload dialog . But how can I customize the “Choose file” button . Suppose I want to increase its height . How can I do it ? . I could not able to change it . Here it is the css for it

.media-upload-choose-btn{ /*'choose file' button container*/
   width:100px;
   height:40px;
   position:relative;
   background-image: url(/servoy-webclient/templates/lafs/kunststoff/images/button/secondary-enabled.gif);
}
 
.media-upload-choose-btn input{ /*'choose file button'*/
   width:100px;
   height:40px;
   position:absolute;
   cursor:pointer;
}

But this is not working . Please provide your suggestion on this .

2

Hi Ashutos,

Assuming that this is the correct CSS class and there are 2 stylesheets using this class you can let one override the other by using the !important property after the value you want to override.
So your CSS would look like this:

.media-upload-choose-btn{ /*'choose file' button container*/
   width:100px;
   height:40px !important;
   position:relative;
   background-image: url(/servoy-webclient/templates/lafs/kunststoff/images/button/secondary-enabled.gif);
}
 
.media-upload-choose-btn input{ /*'choose file button'*/
   width:100px;
   height:40px !important;
   position:absolute;
   cursor:pointer;
}

Hope this helps.

3

Hi Robert ,

Thanks for your reply . I have one style sheet “servoy_web_client_default” css . and I am using this css class

.media-upload-choose-btn{ /*'choose file' button container*/
   width:100px;
   height:40px !important;
   position:relative;
   background-image: url(/servoy-webclient/templates/lafs/kunststoff/images/button/secondary-enabled.gif);
}

But this is not working . The height is not 40px. Please provide some suggestion for this.

4

Hi Ashutos,

Can you see,using the web browser’s built-in inspector, if your stylesheet is indeed loaded?

5

Hi Robert ,

Yes the style sheet is loaded . All the other changes to the css file is reflecting . Suppose I want to increase the height of the “upload” button . That is reflecting . But cannot increase the height of the “choose file” button . Please provide your suggestion on this .

6

Hi Ashutos,

I looked into this and the INPUT generates the button and the text which is all one object. So the INPUT is not the button itself. You can set the height of the INPUT but that only affects the whole box it is in.
As you can see in this screenshot where I added the style manually in the tag (using the Inspector view). To make it clear I added a border property.

What most web developers do is place this INPUT tag in the (web)form and set the visibility to false. And then use a regular button with a javascript to trigger the upload field. I guess this is a bit hard to do since the upload dialog is hardcoded into Servoy I believe.
Unless someone knows how to edit this.

7

Hi robert ,

Thanks for your reply .

8

Hi ,

I have one more query . When I change the Servoy default css file , I can customize the servoy default file upload dialog . Can I add the css change from the solution level ? . can I add css class in solution internal style sheet ? . Please provide your suggestion on this .

9

Hi Ashutos,

Please don’t cross post. You already posted this question in another thread.
I posted an answer there.

10

is this really about the “choose file” button?
By default i think this can’t be styled, it is fully controlled by the browser.

11

besides file upload is its own iframe:

https://support.servoy.com/browse/SVY-8487