Угловой - CSS - пользовательский тип = ввод файла, как использовать кнопку вместо метки?

Question

Я сделал специальное поле ввода type = "file", так как мне не понравилось поле по умолчанию.Чтобы добиться этого, я сделал:

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

, поэтому в основном он скрывает исходный ввод, и с помощью тега я могу открыть окно просмотра файла, нажав на иконку циновки.

Это работаетхорошо, но вместо метки я хотел использовать тег <button mat-icon-button>, чтобы иметь хороший эффект ряби на значке, но "for", используемый в метке, не работает для <button>.

ЕслиЯ обертываю mat-icon внутри тега label вышеупомянутым тегом кнопки, что бы произошло, button выглядит так, как я хочу, но когда я нажимаю, ничего не происходит, я полагаю, это потому, что button выше label, поэтому label не получает щелчок, я пытался использовать z-index, но не сработал.

Есть идеи, как решить эту проблему?

Answer 1

Добавьте эту ссылку к вашему index.html

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

К вашему app.module добавьте MatIconModule

в 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>

В ts makeonchange функция:

 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();
  }

Answer 2

.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> 

Answer 3

Просто создайте кнопку, щелчок которой запускает событие щелчка на вводе скрытого файла

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