ionic 2: Uploading docs, pdf to server in forms

Question

I have created a form in ionic 2 where I have a field to upload resume which will be of type .docs or .pdf. I tried by adding as below,

<form [formGroup]="myForm">

<ion-list>
            <ion-item>

                <input type="file" formControlName="upresume_one" name="upresume_one"/>
                <p>Supported formats .doc,.docs and .pdf[Max file size: 500KB]</p>
            </ion-item>
       <div class="text-right">
                <button ion-button style="background-color: #16a085;color: white;" color="secondary" (click)="save(myForm.value)">Submit</button>
            </div>

        </ion-list>


</form>

My .ts file is as below:

myForm: FormGroup;
  private myData: any;

constructor(public navCtrl: NavController, 
      public navParams: NavParams, 
      private builder: FormBuilder, 
      private userProfileService: UserProfileService,
      private progressDialog: ProgressDialog) {

this.myForm = builder.group({
 'upresume_one': ['', Validators.required]
})

on for submission I'm calling save function which is as below,

save(formData) {
console.log('Form data is ', formData);
}

In consoel.log I'm getting null even after valid files is being selected. Can some one please suggest me what is the best way to integrate input type file inside form in ionic 2.

Answer 1

I Finally found answer for this question. You must have a separate API that can be used for uploading the file. Below is the detailed step to upload file in ionic 2:

1. First install ionic file chooser plugin into your app.https://ionicframework.com/docs/native/file-chooser/

   2. keep this code inside some function which you can trigger from a button which says upload resume or some file.

this.fileChooser.open()
  .then(uri => console.log(uri))
  .catch(e => console.log(e));

1. Then install transfer plugin into your application from here: https://ionicframework.com/docs/native/transfer/ this can be used to upload the file into your server.

2. The complete code that I used for taking picture from gallery or from camera and uploading it via API is here: https://gist.github.com/coolvasanth/ab61fc337e6561be4559171b74221b1a

3. For uploading .pdf, .docs kind of file please refer this: https://gist.github.com/coolvasanth/b266c5bb382ddbfc60ca1c0f7c9f33c0

4. To capture video from phone and upload it to server via API please use this : https://gist.github.com/coolvasanth/8d0b6a4cea480bc7017bce0ba3ec5bdb

5. To choose a file other than media (ex .pdf, .doc) in iOS you can refer below link. https://gist.github.com/coolvasanth/d042a26deda75f5e390b42b87995f30d. In case if you want to choose a file from iCloud then please enable this service in xcode. You will find it in Project -> Capabilities -> iTune.