multiple files

[sadeghhp]

Hi,
What about multiple file upload?

[Donistivanov]

Here is WIP for my use case that you can take a look at and see if it helps yours @sadeghhp.

export class FileUploadComponent implements ControlValueAccessor {

  files: File[];
  onChange: (_) => void;

  @HostListener('change', ['$event.target.files']) emitFiles(fileList: FileList) {
    this.files = Array.from(fileList);
    this.onChange(this.files);
  }

  constructor(private host: ElementRef<HTMLInputElement>) { }

  writeValue(value: null) {
    // clear file input
    this.host.nativeElement.value = '';
    this.files = [];
  }

  registerOnChange(cb) {
    this.onChange = cb;
  }

  registerOnTouched(cb) { }

}

export function requiredFileTypes(allowedTypes: string[]) {
  return (control: FormControl) => {
    const files: File[] = control.value;
    if (files) {
      // Is it enough to check the mime type string?
      const doAllFileTypesRefenceAnAllowedType = files.every(file => allowedTypes.some(allowedType => file.type.includes(allowedType)));
      if (!doAllFileTypesRefenceAnAllowedType) {
        return {
          requiredFileType: true
        };
      }

      return null;
    }

    return null;
  };
}

  <span class="fake-btn">Choose files</span>
  <span class="file-msg">{{ files.length ? 'File(s) selected' : 'or drag and drop file here' }}</span>
  <input class="file-input" type="file" multiple>