Changing FileSelect appearance

[Matt]

I have two goals.

 

1) Change the button text from "Select File..." to whatever I want; in this case "Upload"

2) Display it as a normal size form control instead of the very large size that it defaults to.

 

Thanks,

Matt

[Preslava]

Hello Matt,

The built-in messages can be customized by using the CustomMessagesComponent. 

Please, check the following example:

https://stackblitz.com/edit/angular-irjeju?file=app/app.component.ts

As demonstrated in the above example, the default styles can be overwritten by setting the Angular encapsulation option to ViewEncapsulation.None.  

 

encapsulation: ViewEncapsulation.None,
styles: [`
   .k-button{
        font-size: 10px
    }
`]

 

Additionally, the styles can be overwritten globally, by adding the required custom CSS to the project root styles.css file, as demonstrated in the example below:

https://stackblitz.com/edit/angular-mszk49-85nywc?file=styles.css

Please, note that the FileSelect is an option for selecting files from the user's file system. If the goal is to do an actual upload to a server, I recommend using the Upload component.

I hope this helps. Let me know should there be further questions.

Regards,
Preslava
Progress Telerik