CODEWITHSUNDEEP
ionic-frameworkionic2
Manikanta Dornala
Manikanta Dornala

Reputation: 1101

Ionic2: Translating the File-Chooser uri to File path

Ionic native provides the File Chooser and File plugin separately. The File plugin requires the absolute path of the file to read, but provides no way to pick the file.

In order to pick the file, I used File Chooser, which returns a URI. 

import { FileChooser } from '@ionic-native/file-chooser';

constructor(private fileChooser: FileChooser) { }

...

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

The uri looks something like this

content://com.android.providers.media.documents/document/image%3A68

The File Plugin can read a file by utilizing the path.

import { File } from '@ionic-native/file';

constructor(private file: File) { }

...

this.file.readAsText(this.file.dataDirectory, 'myFile')
.then((content) =>
       console.log(this.file.dataDirectory + 'myFile');
       console.log(content)
).catch( err => 
       console.log('File doesnt exist')
);

The path looks like this. 

file:///data/data/com.myapp.myappmobile/files/myFile

How do I utilize both the components. Pick a file using FileChooser and Then read it with in Ionic 2.

Upvotes: 3

Views: 9613

Answers (2)

Eber
Eber

Reputation: 179

Using FilePath:

import { File } from '@ionic-native/file';
import { FileChooser } from '@ionic-native/file-chooser';

constructor(
    private fileChooser: FileChooser,
    private filePath: FilePath
) {

}

private captureFile(): Promise<any> {
        return new Promise((resolve, reject) => {
            this.fileChooser.open().then((uri) => {

                this.filePath.resolveNativePath(uri)
                    .then((filePath) => {
                        alert(filePath)                      
                    }, (err) => {
                        reject(err);
                    })
            }, (err) => {
                reject(err);
            });

        });

    }

Upvotes: 0

Raja Yogan
Raja Yogan

Reputation: 918

Kindly install the FilePath plugin to get the native path. Then use the below code. Say for example you are choosing an image file.

nativepath: any;
uploadfn(){
   this.fileChooser.open().then((url) => {
  (<any>window).FilePath.resolveNativePath(url, (result) => {
    this.nativepath = result;
    this.readimage();
  }
  )
})
}  

readimage() {
    (<any>window).resolveLocalFileSystemURL(this.nativepath, (res) => {
      res.file((resFile) => {
        var reader = new FileReader();
        reader.readAsArrayBuffer(resFile);
        reader.onloadend = (evt: any) => {
          var imgBlob = new Blob([evt.target.result], { type: 'image/jpeg'});
          //do what you want to do with the file
        }
      })
    })
  }

Kindly have a look here - http://tphangout.com/ionic-2-serving-images-with-firebase-storage/

(Deals with how to choose an image from the phone's filesystem and upload it onto firebase storage)

Hope this helped you. Thanks.

Upvotes: 9

Related Questions