Как предотвратить загрузку определенных типов файлов в Angular?

Question

Компания, в которой я работаю, хочет загрузить файл. Загрузчик файлов должен не только загружать файлы, но и предотвращать загрузку определенных файлов. Компания заключила контракт с другой компанией на создание этого сайта. Я являюсь мобильным разработчиком и изучаю Angular. Как я могу предотвратить загрузку определенных файлов?

Вот копия файла HTML.

<div [hidden]="documentation.get('uploadMethod').value !== 'upload'">
    <div ng2FileDrop [uploader]="uploader">
      <span [hidden]="uploader.queue.length > 0 || (documentation.controls['fileUpload'].errors?.required && documentation.controls['fileUpload'].touched)">Drag Files Here</span><br>
      <table>
        <tbody>
          <tr *ngFor="let item of uploader.queue">
            <td>{{item.file.name}}</td>
            <td>
              {{item.file.size / 1024 >= 1000 ? (item.file.size / 1024 / 1024).toFixed(2) : (item.file.size / 1024).toFixed(2)}}
              {{item.file.size / 1000 >= 1000 ? 'mb' : 'kb'}}</td>
            <td>
              <button mat-raised-button (click)="removeItem(item)">Remove</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div>
      <button mat-button (click)="saveDocumentation()">Upload all</button>
      <button mat-button (click)="removeAll()">Remove all</button>
      <div
        [hidden]="uploader.progress < 1 || !(uploader.progress <= 100 && uploader.progress >= 0)">
        <div>{{uploader.progress}}</div>
      </div>
    </div>

  </div>

Answer 1

Вам необходимо использовать атрибут accept элемента HTML. Вы передадите строку типов файлов, разделенных запятыми.

<input type="file" id="profile_pic" name="profile_pic"
          accept=".jpg, .jpeg, .png">

Используйте это для руководства по атрибутам принятия - https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept

И для ngng2FileDrop (Кредит переходит к Z. Bagley)

<div ng2FileDrop [uploader]="uploader"
     [ng2FileDropSupportedFileTypes]="supportedFileTypes">
</div>

, где supportFileTypes - массив типов файлов.

Ссылка на документацию - https://github.com/leewinder/ng2-file-drop

Answer 2

Обратите внимание на две вещи: во-первых, при обычной загрузке ввода вы можете использовать параметр accept: https://www.w3schools.com/tags/att_input_accept.asp. Во-вторых, вы не можете полностью запретить такие загрузки с передней стороны, но вы можете отключить их, используя пакет, который вы использовали. Если вы хотите полностью отключить (а не только усложнить для пользователей переднего плана), вам также нужно будет обработать это на внутреннем сервере.

Пример, взятый из https://github.com/leewinder/ng2-file-drop:

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'my-custom-component',

  template: `<!-- my_custom.component.html -->
             <!-- Set criteria for only image types under 1MB in size-->
             <div ng2FileDrop class="custom-component-drop-zone"

                [ng2FileDropSupportedFileTypes]="supportedFileTypes"
                [ng2FileDropMaximumSizeBytes]="maximumFileSizeInBytes"

                (ng2FileDropFileAccepted)="dragFileAccepted($event)"
             </div>`

  styles: [`
    .custom-component-drop-zone {
      width: 300px;
      height: 300px;
    }
  `]
})
export class MyCustomComponent {

  // Required criteria for all files (only image types under 1MB in size)
  private supportedFileTypes: string[] = ['image/png', 'image/jpeg', 'image/gif'];
  private maximumFileSizeInBytes: number = 1e+6;

  // File being dragged has been dropped and is valid
  private dragFileAccepted(acceptedFile: Ng2FileDropAcceptedFile) {
    // Any files passed through here will have met the requested criteria
  }
}

Вы специально хотите добавить [ng2FileDropSupportedFileTypes]="supportedFileTypes" в HTML, а затем создать список допустимых типов файлов в вашем компоненте TypeScript: supportedFileTypes: string[] = ['image/png', 'image/jpeg', 'image/gif'];