Ionic 2: Uploading docs, pdf to server in forms

Ionic Framework ionic-v3
1

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.

2

Hello,

I will split my answer in 2 for better understanding.

  1. Like I did recently I’d suggest you to use a combo of array variables with auto index, that will allow you to easily grasp many documents in the same page.

  2. Also, for this kind of use, I suggest you use the cordova file plugin, as it allows you to work better with arrays, lists of files, their storage location, so on. But not the purpose of this answer.

I will help you to solve the multiple document issue, not the upload part.

To start, in your .ts file for this view, make sure your pdfDocs variable is instanced as an array. For example:

ngOnInit() {
this.pdfdDocs = [];
}

Then, build the view for these multiple docs (if you need to grab them from the local directory, like the user one with album, you would like to call the file or album plugin).

<ion-card>
  <ion-card-content>
    <h2>Docs</h2>
    <button ion-button type="submit" block (click)="savePdF()"><ion-icon name="document"></ion-icon>Add new doc</button>

    <p>Last docs:</p>

    <ion-col *ngFor="let pdfdoc of pdfdocs; let id = index">
      <ion-card class="block">
        <ion-item *ngIf="pdfdoc" />
      </ion-card>
  </ion-col>

  </ion-card-content>
</ion-card>

So in your .ts file, that would like:

this.pdfDocs = your data binding; etc, maybe http with the local value of file, no idea...

And for the bindings, Now this array can be parsed, so that you upload it to anywhere, as long as the pdfDoc is an array, you can parse and sort by documentId, while fetching the view.

Main idea is to auto create an id for each file, while in the view:

    <ion-col *ngFor="let doc of docs; let id = index">
      <ion-card class="block">
        <ion-item name="doc" *ngif="doc"> Path to pdf file</ion-item>
      </ion-card>
  </ion-col>

And then you can call this id index in any class aka:

 deleteDoc(index) {
     let confirm = this.alertCtrl.create({
         title: 'Sure you want to delete this doc? There is NO undo!',
         message: '',
         buttons: [
           {
             text: 'No',
             handler: () => {
               console.log('Disagree clicked');
             }
           }, {
             text: 'Yes',
             handler: () => {
               console.log('Agree clicked');
               this.docs.splice(index, 1);
             }
           }
         ]
       });
     confirm.present();
   }

Not sure I’m clear, but hope it helps, this is a technique I use in my app and works fine :slight_smile:

3

Hi FrancoisIonic,

My main concern was , how to upload a file from mobile into server with the help of server API’s. I have an API that takes .docs or .pdf as an argument to save it in server. I’m facing difficulty in how to pass that from mobile. It is one of the list item in my form. Can you please help me out on same .

6

Solution!
For who's that still looking for a way.
This is a good approach on Stackoverflow.

7

thx @TomCosta, every approach is welcome

8

can you explain please, how to push my doc from my internal storage?

9

This is the answer by me(one who posted this question) in Stackoverflow. I had forgotten to share it in ionicforum. I thank you for sharing it and helping other people.

2 Likes