Uploading document using file chooser:

Here we learn “How to upload document using file chooser in ionic3 and ionic4“, in which we upload doc, and showing multiple doc using base64 and file chooser.

Output Example –

Follow these steps for uploading document using file chooser.

Step1:

install the file chooser plugin, Opens the file picker on Android for the user to select a file, returns a file URI.

ionic cordova plugin add cordova-plugin-filechooser 
npm install --save @ionic-native/file-chooser 
ionic cordova plugin add com-badrit-base64 
npm install --save @ionic-native/base64

Step 2:

Import the plugin in app.module.ts file and add into provider:

import { FileChooser } from '@ionic-native/file-chooser';
import {Base64} from "@ionic-native/base64";
 
   providers: [
    File,
    FileTransfer,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Camera,
    Base64,
    FileChooser, 
   ]

Step 3:

Design the html part of file

<ion-header>
    <ion-navbar color="primary">
        <ion-title>Update Document</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-card class="all_card_style">
        <ion-row *ngFor="let docs of documents,let i = index">
            <ion-col col-10>
                {{docs.document_title}}
            </ion-col>
            <ion-col col-2>
                <img src="assets/imgs/trash.png" 
                (click)="deleteDoc(docs.id)" style="width: 50%"/>
            </ion-col>
            <hr class="hr_line">
        </ion-row>
    </ion-card>
    <ion-row>
        <ion-col col-7>
            <ion-item class="input_box_class" class="item_file" 
                *ngFor="let docs of UriData">
                {{docs.name}}
            </ion-item>
        </ion-col>
        <ion-col col-5 class="col_upload">
            <button  class="blue_btn" ion-button color="secondary" 
            (click)="selectDocument()">Doc erhalten</button>
        </ion-col>
    </ion-row>
    <div align="center">
        <div *ngIf=" UriData.length > 0">
            <button ion-button (click)="uploadDoc()">Upload 
            Document</button>
        </div>
    </div>
</ion-content>

Step 4:

Now write the logic for uploading document, open .ts file

import { FileChooser } from '@ionic-native/file-chooser';
import {Base64} from "@ionic-native/base64";
 
constructor(private fileChooser: FileChooser,public base64: Base64){}
 
    selectDocument() {
       this.fileChooser.open().then((imageData) => {
            console.log('imagedata',imageData)
             <span style="color: #3366ff;"> // 
             this.signupSlider.autoHeight = true;</span>
            this.UriData.push({name: 
            imageData.substr(imageData.lastIndexOf('/') + 1)});
            console.log("Data Uri =>", this.UriData);
            this.base64.encodeFile(imageData).then((base64File:string) 
            => {        
          this.imageURI.push(base64File.substr(base64File.indexOf(',') 
          + 1));
         }, (err) => {
             console.log(err);
         });
        }, (err) => {
            console.log(err);
            alert(err);
        });
    }
 
    uploadDoc() {
        var data = {
            access_token: this.access_token,
            documents: this.imageURI
        }
        this.api_data.updateDocs(data).then(
            data => {
                this.fetchdata = data;
                let toast = this.toastCtrl.create({
                    message:  this.fetchdata.message,
                    duration: 3000,
                    position: 'top'
                });
                toast.present();
                this.navCtrl.setRoot(PageName);
            }, (err) => {
                console.log(err);
            });
    }

Important Note –

• If you using the File plugin then it requires the absolute path of the file to read but the File Chooser plugin returns a URI.
• Very often we just need the “read” access to the file system of our user and allow them to upload their files (such as images).

So we completed the tutorial which is “How to upload document using file chooser in ionic3 and ionic4“.

You can find my post on medium as well click here please follow me on medium as well.

You can find my next post here.

If have any query/issue, please feel free to ask.

Happy Coding Guys.