Angular 11 - How to style file input's button with Angular Material

Question

I have seen a lot of questions about this but none of them solved my issue.

What I have:

Angular 11, Angular Material 8 and a file input like this:

<div class="form-group">
    <input #myInput type="file" formControlName="fi"
                     id="fi" name="fi" (change)="postMethod($event.target.files)">
</div>

What I need:

I need to customize this button's color, text and size.

How can I customize it? Thanks.

@R3tep how can I customize the button's size, color and text with Angular Material — Iñigo, Jul 25 '19 at 08:49
Have you tried this answer https://stackoverflow.com/questions/52622061/how-to-use-input-type-file-in-angular-material — Chellappan வ, Jul 25 '19 at 08:53
You can read the doc of [Angular Material](https://material.angular.io/), And if you have any trouble on the implementation, show your effort and your issue to get help. And if you need a specific style you need to do css. — R3tep, Jul 25 '19 at 08:53

Iñigo · Accepted Answer · 2022-01-17T07:07:06.940

Finally solved this way (Valid for Angular Material and Bootstrap):

I set 3 separated components:

The button that will be visible (It can be an Angular Material one or a Bootstrap one, as seen below)
The file input
The label that will contain the file name

HTML

<div>
  <button #file class="btn btn-light">Examinate</button>
  <div style="display: inline-block">
      <input #myInput formControlName="file"
      id="file" name="file" (change)="postMethod($event.target.files)" type="file"/>
      <p>{{file}}</p>
  </div>
</div>

CSS

With CSS I force the input to be overlay the button, and I set the opacity=0 so that the button is visible.

- Button:

float:left; 
position:absolute; 
z-index:-1;

- Input:

opacity: 0; //Not visible
font-size: 0;
//Button dimensions
width: 90px; 
height: 37px; 
float: left;

- Input (Hover):

cursor: pointer;

- Label:

float: left; 
margin-left: 6px; 
margin-top: 7px;

And this is the final result:

score 2 · Answer 2 · answered Jul 26 '19 at 07:11

You simply cannot style input type file, the best approach is to create overlay element that will corespond with input type file.

With material you can style pretty much everything that has somthing to do with material, of corse you can add classes from material to custom components but that is not what material is for.

Simple example, you dont want to do that:

<div class="mat-card"></div>

If you can do this:

<mat-card></mat-card>

The same is with input, if you want it to be material style you should create somthing like this:

HTML:

<mat-card class="input-container">
  <button #file mat-flat-button color="primary">Examinar...
      <input multiple (change)="onFileSelected($event)" style="opacity: 0; position:absolute; left:0px; top:0px; width:100%; height:100%;" type="file"/>
  </button>
  {{files|json}}
</mat-card>

TS:

  files: string[] = [];
  onFileSelected(event) {
    if (event.target.files.length > 0) {
      for (let i = 0; i < event.target.files.length; i++) {
        this.files.push(event.target.files[i].name);
        console.log(event.target.files[0].name);
      }
    }
  }

CSS:

.input-container {
  position:relative;
}

Thats a simple example.

But i will still prefer to use some kind of npm package like : https://www.npmjs.com/package/ngx-dropzone

Thanks for the answer. I tried your code but when I click the button, `onSubmit()` method is triggered instead of opening the file selector which is the behaviour I need for the click event. I guess it is not possible to do what I need. — Iñigo, Jul 26 '19 at 07:57
Well without sample project its hard to say what can cause this problem. But you can check with setting opacity to 1 if input is in right place, without it beeing on top of button it wont work. — Jacek Ratajewski, Jul 26 '19 at 08:12
Seems that an input can't be inside a button [link](https://stackoverflow.com/questions/33420402/file-input-field-inside-button-doesnt-work-in-firefox). Will try to join both with css. — Iñigo, Jul 26 '19 at 08:35

Dani R · Answer 3 · 2019-07-25T09:44:44.700

In your css/scss/sass:

#fi {
  background-color: pink;
  ...
}

It is not a good approach to style a single button with Angular Material. If you want to style groups, then i recommend to read this: https://material.angular.io/guide/customizing-component-styles

Edit:

Input elements of type file aren't trivial to style.

Here is a plunkr example how it can work:

.fileContainer {
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background-color: pink;
}

.fileContainer [type=file] {
    cursor: inherit;
    display: block;
    font-size: 999px;
    filter: alpha(opacity=0);
    min-height: 100%;
    min-width: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
}

    <label class="fileContainer">
      File upload
      <input type="file"/>
    </label>

I need to style only the button of the input. Your solution styles the entire input (Incluiding the text in the image above) — Iñigo, Jul 25 '19 at 09:30

Angular 11 - How to style file input's button with Angular Material

3 Answers3

Edit: