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;
   }
}

Dennis · Accepted Answer · 2020-10-15 14:43:53Z

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.

answered Oct 15, 2020 at 14:43

Dennis

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

mkHun · Accepted Answer · 2019-08-13 14:14:55Z

0

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;
}

edited Aug 13, 2019 at 14:14

answered Aug 13, 2019 at 12:02

mkHun

5,9479 gold badges45 silver badges96 bronze badges

1 Comment

Ayushi Verma Over a year ago

Thank-you for answering . :) Is there any way that validation can be managed in custom.validator file only, instead of using the component file?

Collectives™ on Stack Overflow

Multiple file upload using custom directive in Angular

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related