Upload multiple file to the server


#1

hi i want to upload multiple file and send them to a server: using reactive form

this.attachmentsForm = this.formBuilder.group({
        attachmentName: ['']
 });
 <form [formGroup]="attachmentsForm">
          <ion-item>
            <ion-label floating>
              Attachment Name
            </ion-label>
            <ion-input type="text" formControlName="attachmentName"></ion-input>
          </ion-item>
          <input class="form-control" #fileInput type='file' (change)="fileChanged($event)">
        </form>
 fileChanged(event) {
    if (event.target.files && event.target.files[0]) {
      if (event.target.files[0].size > 512000) {
        this.fileValid = false;
        let toast = this.toastCtrl.create({
          message: 'the file size more than 500kb',
          duration: 3000
        });
        toast.present();
      } else {
        this.fileValid = true;
      }
    }

  }

#2

How to go about this totally depends on what format the server is expecting.


#3

thanks @rapropos i solve it for one image , i change the behaviour for each image a button ,
but it may later need multiple image in the same add button ,

fileChanged(event) {
    let reader = new FileReader();
    let file = event.target.files;
    if (file[0].size > 1000000) {
      this.fileValid = false;
      let toast = this.toastCtrl.create({
        message: 'the file size more than 1MB',
        duration: 3000
      });
      toast.present();
    } else {
      reader.onloadend = () => {
          this.fileValid = true;
      }
      reader.readAsDataURL(file[0]);
    }
  }