How to upload document using file chooser in ionic3 and ionic4

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 –

https-// - ionic image upload

Follow these steps for uploading document using file chooser.


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: [
    {provide: ErrorHandler, useClass: IonicErrorHandler},

Step 3:

Design the html part of file

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

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

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() { => {
             <span style="color: #3366ff;"> // 
             this.signupSlider.autoHeight = true;</span>
            imageData.substr(imageData.lastIndexOf('/') + 1)});
            console.log("Data Uri =>", this.UriData);
            => {        
          + 1));
         }, (err) => {
        }, (err) => {
    uploadDoc() {
        var data = {
            access_token: this.access_token,
            documents: this.imageURI
            data => {
                this.fetchdata = data;
                let toast = this.toastCtrl.create({
                    message:  this.fetchdata.message,
                    duration: 3000,
                    position: 'top'
            }, (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.

Related Post

10 Replies to “How to upload document using file chooser in ionic3 and ionic4”

  1. Because the admin of this website is working, no doubt very quickly it will be
    well-known, due to its feature contents.

  2. What’s Taking place i am new to this, I stumbled upon this I’ve discovered
    It positively helpful and it has aided me out loads.
    I hope to give a contribution & assist other users like its helped me.

    Great job.

  3. Excellent article. Keep writing such kind of info on your page.
    Im really impressed by your blog.
    Hello there, You have done an excellent job. I’ll certainly digg
    it and in my view recommend to my friends. I’m confident they will
    be benefited from this web site.

  4. When someone writes an piece of writing he/she keeps the idea of a userr in his/her brain that how a user can understand it.
    So that’s whyy this article iis perfect. Thanks!

  5. I know this web page presents quality based articles and additional stuff,
    is there any other website which offers these kinds of information in quality?

  6. Pretty! This has been an extremely wonderful article.
    Many thanks for supplying this info.

  7. You’ve made some really good points there. I looked on the internet for additional information about the issue and found most individuals will go along with your

  8. What’s up everyone, it’s my firest pay a visit
    at this web page, and post is genuinely fruitful in favor of me,
    keep up posting tgese content.

Leave a Reply

Your email address will not be published. Required fields are marked *