How can I make the images uploads go with the data when I click the send button. Now I have a problem in the fact that when you select images are immediately downloaded to the server and there is a post request to api. I use Rails 5 for api gallery.component.ts

 name: string;
  uploadFile: any;
  hasBaseDropZoneOver: boolean = false;
    uploadedFiles: any[] = [];
  options: Object = {
    url: 'http://localhost:3000/galleries'
  };
  sizeLimit = 2000000;

  handleUpload(data): void {
    if (data && data.response) {
      data = JSON.parse(data.response);
      this.uploadFile = data;
      this.name = this.uploadFile.filename;
    }
  }

  fileOverBase(e:any):void {
    this.hasBaseDropZoneOver = e;
  }

  beforeUpload(uploadingFile): void {
    if (uploadingFile.size > this.sizeLimit) {
      uploadingFile.setAbort();
      alert('File is too large');
    }
  }

shop.component.ts

                  id : number;

              owner_id :number;

            submit(user){
              user.owner_id= this.authTokenService.currentUserData.id;
              this.httpService.postData(user)
              .subscribe((data) => {this.receivedUser=data; this.done=true;this.router.navigate(['/profile'])});

    }
ngOnInit() {
  this.getUserShops(this.authTokenService.currentUserData.id)
    .subscribe((ownerShops) => {
      if (ownerShops.length > 0) {
        // User has at least 1 shop
this.router.navigate(['/profile'])
        console.log(ownerShops.id);
      } else {
        // User has no shops
      }
    })
}

shop.component.html

Name

            <div class="form-group">
                <label>About</label>
                <input class="form-control" type="text" name="about" [(ngModel)]="user.about" />
            </div>
                     <div class="form-group">
                <label>opening</label>
                <input class="form-control" type="text" name="opening" [(ngModel)]="user.opening" />
            </div>
                     <div class="form-group" >
                <label>closing</label>
                <input class="form-control" type="text" name="closing" [(ngModel)]="user.closing" />
            </div>
            <app-gallery> </app-gallery>
            <div class="form-group">
                <button class="btn btn-default" (click)="submit(user)">Send</button>
            </div>

gallery.component.html

<input type="file"
   ngFileSelect
   [options]="options"
   (onUpload)="handleUpload($event)"
   (beforeUpload)="beforeUpload($event)"
   multiple>