Я по-прежнему могу выбрать любой файл после того, как объявил, что на вход принимаются только файлы изображений

Question

Вот моя форма:

<form #optionsForm="ngForm" novalidate (ngSubmit)="saveOptions()" id="optionsForm">
  <div class="modal-body">
    <div class="form-group">
      <label for="customFile">Icon</label>
      <div class="custom-file">
        <input type="file" accept="image/*" class="custom-file-input" id="customFile" 
               name="customerFile" (change)="handleFileInput($event.target.files)" required>
        <label class="custom-file-label" for="customFile" 
               id="customerFileLabel">Select Icon</label>
      </div>
    </div>
    <div *ngIf="logo.imageInBase64" class="row">
      <label id="previewLabel">Preview:</label>
      <div class="report-logo">
        <img alt="{{logo.name}}" src="{{logo.imageInBase64}}" class="logo-image">
      </div>
    </div>
    <button type="submit" class="btn btn-secondary" aria-hidden="true" 
            [disabled]="!optionsForm.valid">
      <i class="fa fa-floppy-o"></i> Save
    </button>
  </div>
</form>

Вот как это выглядит без и с выбранным файлом:

У меня сейчас две проблемы. Сначала я попытался определить с помощью accept="image/*, что на вход должны быть приняты только изображения. Но единственное, что он делает, - это открывает файловый менеджер с фильтром изображений, но я все еще могу переключиться на все файлы и выбрать не файл изображения. Есть ли способ избежать этого?

Вторая проблема - проверка формы. Я отключаю кнопку, если форма недействительна, с помощью [disabled]="!optionsForm.valid". Я ставлю требуемый атрибут на вход, так что следует сделать недействительной форму и отключить кнопку, если вход не выбран, но в настоящее время он этого не делает. Форма остается в силе, даже если я не выбрал файл.

Answer 1

Вы также можете указать расширение с изображением, как показано ниже. Это позволит только указанное расширение для выбора файла и загрузки. Я надеюсь, что это работает для вас.

<form #optionsForm="ngForm" novalidate (ngSubmit)="saveOptions()" id="optionsForm">
  <div class="modal-body">
    <div class="form-group">
      <label for="customFile">Icon</label>
      <div class="custom-file">
        <input type="file" accept="image/x-png,image/gif,image/jpeg" class="custom-file-input" id="customFile" 
               name="customerFile" (change)="handleFileInput($event.target.files)" required>
        <label class="custom-file-label" for="customFile" 
               id="customerFileLabel">Select Icon</label>
      </div>
    </div>
    <div *ngIf="logo.imageInBase64" class="row">
      <label id="previewLabel">Preview:</label>
      <div class="report-logo">
        <img alt="{{logo.name}}" src="{{logo.imageInBase64}}" class="logo-image">
      </div>
    </div>
    <button type="submit" class="btn btn-secondary" aria-hidden="true" 
            [disabled]="!optionsForm.valid">
      <i class="fa fa-floppy-o"></i> Save
    </button>
  </div>
</form>