Angular - CSS - custom type=file input, how to use a button instead of label?

Question

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

<input
            #uploadFile
            type="file"
            id="uploadFile"
            class="hidden-input"
            accept="image/jpeg, .jpeg, image/png, .png, image/pjpeg, .jpg, .docx, .pdf"
            (change)="selectFile($event.target.files[0])"
        />

     <label [matTooltip]="Upload a file" for="uploadFile">
<mat-icon>folder_open</mat-icon>
</label>

so basically it hides the original input, and with the tag I can open the browse file window by clicking on the mat-icon.

This works well, but instead of label I wanted to use the tag <button mat-icon-button> to have a nice ripple effect on the icon, but the "for" used in the label doesn't work for <button>.

If I wrap my mat-icon inside the label tag with the above button tag, what would happen is, the button looks how I want it, but when I click nothing happens, I suppose it's because the button is above the label, so the label doesn't get the click, I tried using z-index but wouldn't work.

Any ideas on how to solve this?

Ashish Ranjan · Accepted Answer · 2018-12-17 11:12:14Z

7

Just make a button whose click fires a click event on the hidden file input

<button (click)="uploadFile.click()" mat-icon-button>
 <mat-icon>arrow_upward</mat-icon>
</button>

edited Dec 17, 2018 at 11:12

answered Dec 17, 2018 at 11:04

Ashish Ranjan

13k5 gold badges32 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AJ- Over a year ago

for my case this is the best answer, I didn't know you could fire click events for other html elements like that! The above answers might take a deeper and more complete approach, but for my case this is the correct answer! thank you

prats · Accepted Answer · 2018-12-17 11:28:17Z

1

.label{
      padding: 10px;
      color: #fff;
    }



    input[type="file"] {
        display: none;
    }

    .label-input{
      font: bold 13px Arial;
      text-decoration: none;
      background-color: #2387aa;
      color: #EEEEEE;
      padding: 4px 79px 5px 66px;
      border-top: 1px solid #CCCCCC;
      /* border-right: 1px solid #333333; */
      /* border-bottom: 1px solid #333333; */
      border-left: 1px solid #CCCCCC;
    }


 <label class="label-input"> Upload file
                    <input type="file" id="File">
                </label>

answered Dec 17, 2018 at 11:28

prats

263 bronze badges

Comments

לבני מלכה · Accepted Answer · 2018-12-17 11:18:02Z

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"
            />

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

In ts make onchange function:

 files: Array<any> = [];

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

Collectives™ on Stack Overflow

Angular - CSS - custom type=file input, how to use a button instead of label?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related