Multiple file upload using custom directive in Angular

Question

I am trying to create a custom directive to validate multiple file upload.But in custom Directive, control is just returning the last file's details instead of array.

Below is the code :

File-upload.html :

<form [formGroup]="validateDocumentForm">
<input formControlName="document"  style="display: none" type="file" multiple (change)="onFileChanged($event)" #fileInput accept="application/pdf"  class="form-control">
<button class="btn upload-doc-btn" (click)="fileInput.click()"><span><i class="material-icons">vertical_align_top</i> Upload File</span></button>

file-upload.ts

ngOnInit() {
this.validateDocumentForm = this.formBuilder.group({
  document: this.formBuilder.array(['', [
    CustomValidator.uploadDocument
  ]]),
});

}

Custom-validator.ts:

export class CustomValidator {
    static uploadDocument(control: AbstractControl): 
    ValidationErrors | null {
      console.log(control); // only last file's details instead of 
                               array of selected files.
      console.log(control.value);
      return  null;
   }
}

Answer 1

Regarding the question wether you can implement a CustomValidator inside a seperate file I found this tutorial: https://dev.to/angular/implement-file-upload-with-firebase-storage-in-our-angular-app-the-simple-way-1ofi

Basicly you are binding a method as a validator inside the component holding your form and this calls a seperate method in your validation file.

I hope this late answer could help someone.

Answer 2

Actually you should not use the formArray for the file upload. If you are using the formArray, you have iterate in the loop in the html file.( FormArray )

ngOnInit() {
    this.validateDocumentForm = this.formBuilder.group({
        'document':[''] 
    })
})

Selected files it won't be available in the value instead you have to use the files from the target.

onFileChanged(event) {
    for (const x of event.target.files) {
        console.log(x);
        // do the validation here
    }
}

Try to do the validation inside the component file not in the custom.validator file

EDIT

We have to store the files in the formcontrol so you can do something like this, in the component file

ngOnInit() {
    this.validateDocumentForm = this.formBuilder.group({
        'document':['', uploadDocument] 
    })
})

onFileChanged(event) {
    this.validateDocumentForm['controls']['document']['files'] = event.target.files;
}

and in the custom.validators file

export function uploadDocument(c: AbstractControl) {
    console.log(c);
if (c['target'] && 'files' in c['target']) {
    for (const x of c['target'].files) {
        if (/*do your condition*/) {
            return {
                'fileNotValid': true
            };
        }
    }
 }
    return null;
}