How to send Zip file in angular

Question

I have a form with 1 input (file type) and I want to send zip file to serve, in server i cannot get any update in my database nor any file in my storage.

Code

Form

<form class="ion-padding" [formGroup]="distributorForm" (ngSubmit)="approveDistributor()">
      <ion-row class="ion-padding">
        <ion-col size="12">
          <ion-input type="file" formControlName="coDoc" placeholder="Company documents"></ion-input>
          <small [innerHTML]="'VERIFY.tipTwo' | translate"></small>
        </ion-col>

        <ion-col size="12">
            <ion-button class="ion-margin-top" type="submit" expand="full" color="success" [disabled]="!distributorForm.valid">{{ 'VERIFY.send' | translate }}</ion-button>
        </ion-col>
      </ion-row>
</form>

Controller

public distributorForm: FormGroup;

constructor(
    public formBuilder: FormBuilder,
  ) {
    this.distributorForm = this.formBuilder.group({
      coDoc: ['', Validators.required]
    });
  }

approveDistributor() {
    const distributorForm = this.distributorForm.value;
    // tslint:disable-next-line: max-line-length
    this.verifyService.distributorForm(distributorForm.coDoc).subscribe(
      data => {
        this.alertService.presentToast('Sent successfully.');
      },
      error => {
        this.alertService.presentToast(error.message);
      },
      () => {

        this.Mainstorage.ready().then(() => {

          this.Mainstorage.get('token').then(
            data => {
              this.alertService.presentToast('Your data is in process after approve you'll be able to work with software.');
            },
            error => {
              console.log(error);
            }
          );

        });

      }
    );
  }

Service

distributorForm(
    coDoc
    ) {
      const formData = new FormData();
      formData.append('coDoc', coDoc);
      console.log(formData.get('coDoc'));

      const headers = new HttpHeaders({
        Authorization : this.token.token_type + ' ' + this.token.access_token,
        Accept: 'application/json, text/plain',
        'Content-Type': 'application/json'
      });

      return this.http.post(this.env.companyDocs,
      {
        formData
      }, { headers }
    );
}

Any idea?

Answer 1

Solved

Thanks for all down votes with no solution providing! here is how i solved my issue hope it help those in need:

View

<ion-input type="file" formControlName="zipFiles" (change)="zipFilesUpload($event)" placeholder="Zip Files"></ion-input>

Controller

zipFiles: File = null;

zipFilesUpload(event) {
  this.zipFiles = <File>event.target.files[0];
}

approveDistributor() {
    const distributorForm2 = this.distributorForm.value;

    const fd = new FormData();
    fd.append('files', this.zipFiles, this.zipFiles.name);

    // tslint:disable-next-line: max-line-length
    this.verifyService.distributorForm(fd).subscribe(
      data => {
        this.alertService.presentToast('Sent successfully.');
      },
      error => {
        this.alertService.presentToast('The given data was invalid.');
      },
      () => {

        //
      }
    );
}

Service

distributorForm(fd) {
  const headers = new HttpHeaders({
    Authorization : this.token.token_type + ' ' + this.token.access_token
  });

  return this.http.post(this.env.companyDocs, fd, { headers });
}

Now I can send binary data to backend and store data in both database and file storage.