Upload Files using reactiveForms and FileUpload component angular

Question

I am using primeng for template. And I am using p-fileupload component, but I need to use it in reactive form, so I want to know where to put formControlName as I don't get any input or something label to add.

I only see it with input and put a identifier on it, but i want to know if it is possible on this component.

Any suggestions?

Thanks, in advice!!

Perry · Accepted Answer · 2023-08-31 20:47:10Z

17

First create your formGroup (reactive form)

this.form = new FormGroup({
  title: new FormControl(""),
  image: new FormControl(null)
});

image is your image component (upload). So then inside your html:

<input type="file" #filePicker (change)="onImagePicked($event)">

So you can hide your input and simulate a click on it. But the onImagePicked function is important. Then back to the code behind:

onImagePicked(event: Event) {
  const file = (event.target as HTMLInputElement).files[0]; // Here we use only the first file (single file)
  this.form.patchValue({ image: file});
}

And yes, that's all! You can use validators as well. All as normal FormControls.

edited Aug 31, 2023 at 20:47

Perry

3,90326 gold badges40 silver badges51 bronze badges

answered Dec 1, 2022 at 18:05

Flo

3,3022 gold badges15 silver badges29 bronze badges

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

3 Comments

maurice Over a year ago

What purpose does the template variable filePicker serve here?

Flo Over a year ago

If you hide the input (display: none) you can create a custom button and then call filePicker.click() to start handling the file upload.

Aphax Nov 12 at 15:46

patchValue doesn't work for me : TS2322: Type File is not assignable to type null | undefined I had to use the UntypedFormGroup so I could initiate will a null value

Collectives™ on Stack Overflow

Upload Files using reactiveForms and FileUpload component angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related