ionic 3 multiple file upload type



input type file angular2 ionic2-4 typescript (2)

that's a simple look of my code, just i want to know how to submit a form data with the file. Imagine that i have a button "submit" and when i click on this button i will call a function that will send all the data of the form include the file.

    <form [formGroup]="basicInformationForm">
            <ion-input type="text" formControlName="username"></ion-input>
            <input class="form-control"#fileInput type='file' (change)="fileChanged($event)">
    </form>

---typescript-----

this.basicInformationForm = formBuilder.group({
   username: ['']
    });

private fileValid: boolean = false

fileChanged(event) {
    if (event.target.files && event.target.files[0]) {
      if (event.target.files[0].size > 512000) {
        console.log('the file size more than 500kb');
        this.fileValid = false;
      } else {
        console.log('the file size less than 500kb');
        this.fileValid = true;
      }
    }

---html---

<button ion-button full color="primary" (click)="submit()"
              [disabled]="!fileValid">

and i want to check that will be less than 500kb, and required, it means the button will be disabled if the file is empty and if is more than 500kb.

https://ffff65535.com


You can use the below method to upload image in any type of form.

Expose one change method to your control.

<input class="form-control" type="file" name="avatar" (change)="imageUpload($event)">
<img [src]="imageUrl" />

Add below logic in your class.

 // Declare the variable. 
  imageUrl: any;

   //method definition in your class 
    imageUpload(e) {
        let reader = new FileReader();
        //get the selected file from event
        let file = e.target.files[0];
        reader.onloadend = () => {
          //Assign the result to variable for setting the src of image element
          this.imageUrl = reader.result;
        }
        reader.readAsDataURL(file);
      }
    }

Once the image is uploaded you can use the this.imageUrl to update your form model. For uploading the image or file to server you can take the reference from the below link.

How to upload file in Angular2

Let me know if this solution is working for you.


How to include a file upload control in an Angular2 reactive form?

Simple answer can be found here. https://devblog.dymel.pl/2016/09/02/upload-file-image-angular2-aspnetcore/

The HTML

    <input #fileInput type="file"/>
    <button (click)="addFile()">Add</button>

Component.ts

@ViewChild("fileInput") fileInput;

addFile(): void {
let fi = this.fileInput.nativeElement;
if (fi.files && fi.files[0]) {
    let fileToUpload = fi.files[0];
    this.uploadService
        .upload(fileToUpload)
        .subscribe(res => {
            console.log(res);
        });
    }
}

The service.ts

upload(fileToUpload: any) {
    let input = new FormData();
    input.append("file", fileToUpload);

    return this.http.post("/api/uploadFile", input);
}