Question: The company I work for wants a file uploader. The file uploader not only has to upload files, but it also has to prevent certain files from being uploaded. The company contracted another company to build this site. I am a Mobile Developer learning Angular. How do I prevent certain files from being uploaded? 

Here is a copy of the HTML file.

```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: 
You need to use the accept attribute of HTML element. You will pass a string of comma separated file types.

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

```

Use this for the accept attribute guide - <https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept>

And for ngng2FileDrop (Credit goes to Z. Bagley)

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

```

where supportedFileTypes is an array of file types.

Documentation link - <https://github.com/leewinder/ng2-file-drop>
Two things to note: first, in a normal input upload you can utilize the `accept` parameter: <https://www.w3schools.com/tags/att_input_accept.asp>. Second, you can't actually completely prevent uploads like this from the front, but you can disable them using the package you have used. If you want to completely disable (not just make it harder for front-end users) you will also need to handle this on the back-end.

Example, as taken from <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
  }
}

```

You are specifically looking to add the `[ng2FileDropSupportedFileTypes]="supportedFileTypes"` in your HTML, and then create a list of accepted file types in your TypeScript Component: `supportedFileTypes: string[] = ['image/png', 'image/jpeg', 'image/gif'];`