Angular - Css - Custom Type=file Input, How To Use A Button Instead Of Label?

I made a custom input field of type='file' as I didn't like the default one. To achieve this I did: Copy

Solution 2:

Add this link to your index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

To your app.module add MatIconModule

in Html:

<input #uploadFile
            type="file"
            id="uploadFile"class="hidden-input"
            accept="image/jpeg, .jpeg, image/png, .png, image/pjpeg, .jpg, .docx, .pdf"
            />

<buttonfor="uploadFile" (click)="selectFile()"><mat-icon>folder_open</mat-icon></button>

In ts make onchange function:

files: Array<any> = [];

  selectFile() {
    const fileUpload = document.getElementById('uploadFile') asHTMLInputElement;
    fileUpload.onchange = () => {
      for (let index = 0; index < fileUpload.files.length; index++) {
        const file = fileUpload.files[index];
        this.files.push(data: file);
      }
    };
    fileUpload.click();
  }

Solution 3:

.label{padding:10px;color:#fff;}input[type="file"] {
        display:none;
    }

    .label-input{font:bold13pxArial;text-decoration:none;background-color:#2387aa;color:#EEEEEE;padding:4px79px5px66px;border-top:1pxsolid#CCCCCC;/*border-right:1pxsolid#333333; *//*border-bottom:1pxsolid#333333; */border-left:1pxsolid#CCCCCC;}<labelclass="label-input">Uploadfile<inputtype="file"id="File"></label>