How to add value to a key in FormGroup in Angular 4

Question

I want to submit a form which contains a file. So I am using ng2-file-upload npm for file upload

component.html is-

<input type="file" ng2FileSelect [uploader]="uploader" (onFileSelected)="onFileSelected($event)">

and my component.ts is -

public uploader: FileUploader = new FileUploader({});

  uploadForm: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private userService: UserServiceService
  ) {
  }

  ngOnInit() {

    this.uploadForm = this.formBuilder.group({
      branch         : ['cs', Validators.required],
      document       : [null, Validators.required],
      semester       : ['3', Validators.required],
    });


  }


  //////////// File Converted into base64/////////////////


  onFileSelected(event: EventEmitter<File[]>) {
    const file: File = event[0];

    readBase64(file)
      .then(function(data) {
         console.log(data);

        this.uploadForm.patchValue({  // Showing error -- Potentially invalid reference access to a class field via 'this.' 
          document: data
        });
      });

  }

I am generating base64 of file in onFileSelected() function and then I want to add that base64 to document key in my formGroup. But when I am trying to use this.uploadForm.patchValue(), It is showing an error

Potentially invalid reference access to a class field via 'this.'

I just want to add that data in my document key of uploadForm

Stop using anonymous functions. Use arrow functions: `then(data => { ... })` — JB Nizet, Aug 10 '18 at 21:33
@JBNizet, Thnx perfect , But I think `.then(function(data) {..});` and `.then(data => { ... });` both are same — Rupesh, Aug 10 '18 at 21:39
Well you might think that if you want, but it's wrong. Read the duplicate I linked to. One doesn't bind the function to this, and the other does. — JB Nizet, Aug 10 '18 at 21:40
@JBNizet Thanx for the reference, It works well, But when I am submitted the form only half of `base64` string is reaching to nodejs server — Rupesh, Aug 10 '18 at 21:44
There must be another error somewhere then. But you haven't posted the relevant code, so... — JB Nizet, Aug 10 '18 at 21:47
I already asked that question in https://stackoverflow.com/questions/51763117/i-am-getting-half-of-base64-string-of-pdf-file-in-my-nodejs-from-angular-service?noredirect=1#comment90489059_51763117 — Rupesh, Aug 10 '18 at 21:50

score 0 · Accepted Answer · answered Aug 10 '18 at 21:34

0

Either

  .then(function(data) {
     this.whateva
    }.bind(this)); //here is the trick

or

  .then(data=> {//here is the trick
     this.whateva
    });

I didn't read rest of the code.

answered Aug 10 '18 at 21:34

Antoniossss

31,590
6
57
99

It works well, But when I am submitted the form only half of `base64` url is reaching to nodejs server – Rupesh Aug 10 '18 at 21:43
thats a different story (multipart upload). Ask another question with more details. Accept if it helped for described issue. – Antoniossss Aug 10 '18 at 21:45
I already asked that question here but did not get any solution https://stackoverflow.com/questions/51763117/i-am-getting-half-of-base64-string-of-pdf-file-in-my-nodejs-from-angular-service?noredirect=1#comment90489059_51763117 – Rupesh Aug 10 '18 at 21:51

How to add value to a key in FormGroup in Angular 4

1 Answers1