Angular sample code : POST form data

This example only showing how to post the data to Argos API with the following conditions.

  • By using Argos API, submit the KYC/AML data
  • We did not include email confirmation, (The email must belong to the owner of the email. You should include 2fa for this.)
  • KYC Level 1
  • Showing minimum requirement only.
  • You should hanlde the errors and do lots of data verification before post data.
  • In this case, we are using L1, which should have 1 synced transaction with 3 http post requests.
  • Used bootstrap 4.1.x for the form

HTML

Ok, lets make simple form. This form has 2 input of file upload and a few text input data.

<div class="jumbotron">
  <div class="container">
      <div class="row">
          <div class="col-md-6 offset-md-3">
              <h3>Argos form demo</h3>
              <br><br>
              <form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
                  <div class="form-group">
                      <label for="email">Email</label>
                      <input type="text" class="form-control" name="email" [(ngModel)]="model.email" #email="ngModel" [ngClass]="{ 'is-invalid': f.submitted && email.invalid }" required email />
                      <div *ngIf="f.submitted && email.invalid" class="invalid-feedback">
                          <div *ngIf="email.errors.required">Email is required</div>
                          <div *ngIf="email.errors.email">Email must be a valid email address</div>
                      </div>
                  </div>
                  <div class="form-group">
                      <label for="firstName">First Name</label>
                      <input type="text" class="form-control" name="firstName" [(ngModel)]="model.firstName" #firstName="ngModel" [ngClass]="{ 'is-invalid': f.submitted && firstName.invalid }" required />
                      <div *ngIf="f.submitted && firstName.invalid" class="invalid-feedback">
                          <div *ngIf="firstName.errors.required">First Name is required</div>
                      </div>
                  </div>
                  <div class="form-group">
                      <label for="lastName">Last Name</label>
                      <input type="text" class="form-control" name="lastName" [(ngModel)]="model.lastName" #lastName="ngModel" [ngClass]="{ 'is-invalid': f.submitted && lastName.invalid }" required />
                      <div *ngIf="f.submitted && lastName.invalid" class="invalid-feedback">
                          <div *ngIf="lastName.errors.required">Last Name is required</div>
                      </div>
                  </div>
                  <div class="form-group">
                      <label for="photoid">Passport</label><br>
                      <input type="file" name="photoid" (change)="onFilePhotoId($event)" >
                  </div>
                  <div class="form-group">
                      <label for="selfie">Selfie</label><br>
                      <input type="file" name="selfie" (change)="onFileSelfie($event)" >
                  </div>
                  <div class="form-group">
                      <button class="btn btn-primary">Submit</button>
                  </div>
              </form>
          </div>
      </div>
  </div>
</div>

TypeScript

Import http module to use http post.

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

  constructor(private http: HttpClient) {

  }

When user select the file, lets get the file data from so we can actually use it later. photoIdFile, photoSelfieFile should be declared before. Following code will retrieve the file data of 2 input.

  onFilePhotoId(event){
    console.log(event.target.files[0]);
    this.photoIdFile = event.target.files[0];
  }

  onFileSelfie(event){
    console.log(event.target.files[0]);
    this.photoSelfieFile = event.target.files[0];
  }

The following interface is the format of Argos image upload return.

interface uploadRes {
  created_at: string;
  filehash:string;
  filetype:string;
  id:string;
};

when click submit button, let's do file upload 2 times then when both are success get the filehash return data then use it as input of formdata post to Argos API.

  onSubmit() {

    // 0. data validation
    // do whatever validation needed

    // 1. upload id
    const header = new HttpHeaders()
      .set('x-api-key', 'YOUR_API_KEY');
      // it might be a good idea that you need to use this as environment variable. I would not put the api key in the code.

    const httpOptions = {
      headers: header
      };

    const fd = new FormData();
    fd.append('file', this.photoIdFile);
    fd.append('type', 'passport'); // lets say this is passport

    this.http.post<uploadRes>('https://api.argos-solutions.io/v2/submissions/upload', fd, httpOptions)
      .subscribe(res => {
        console.log(res);
        //get the file hash
        this.photoIdHash = res.filehash;

        // 2. upload selfie
        const header = new HttpHeaders()
          .set('x-api-key', 'YOUR_API_KEY');

        const httpOptions = {
          headers: header
          };

        const fd = new FormData();
        fd.append('file', this.photoSelfieFile);
        fd.append('type', 'selfie'); // lets say this is passport

        this.http.post<uploadRes>('https://api.argos-solutions.io/v2/submissions/upload', fd, httpOptions)
          .subscribe(res => {
            console.log(res);
            this.photoSelfieHash = res.filehash;

            // 3. post form data
            // this is only sample. you need to get the data from the actual FORM of your site
            const params = new HttpParams()
            .set('email', this.model.email)
            .set('first_name', this.model.firstName)
            .set('last_name', this.model.lastName)
            .set('nationality', 'South Korea, KOR')
            .set('date_of_birth', '1980-01-01')
            .set('gender', 'male')
            .set('id_type', 'passport')
            .set('photoid_res', this.photoIdHash)
            .set('selfie_res', this.photoSelfieHash)
            .set('kyc_level', 'L1')
            .set('wallet_address', '0xAAA')
            .set('estimated_amount', '100')
            .set('contribution_type', 'ETH'); 

            const header = new HttpHeaders()
            .set('x-api-key', 'YOUR_API_KEY');
  
            const httpOptions = {
              headers: header
              };
  
            this.http.post('https://api.argos-solutions.io/v2/submissions', params, httpOptions)
              .subscribe(event => {
                // done
                console.log(event);

                // get the ID and save it into your database for future use.
                // ex) email: "test@argos-solutions.io",  id: "18olf81jn3w5mun"
                
              });
          });
      });
  }

Download sample

Sample code download