Learn the steps to access various file formats including doc, ppt, xlsx, pdf, jpg, and png using the Ionic native file opener

Question

Learn the steps to access various file formats including doc, ppt, xlsx, pdf, jpg, and png using the Ionic native file opener

I am currently working on a Hybrid app using Ionic. My goal is to be able to open various types of files (doc, ppt, xlsx, pdf, jpg, png) from the device's internal or external storage using the Ionic Native File Opener plugin. However, I have only been successful in opening PDF files with the code below. When trying to open other file types, what should I replace 'application/pdf' with? Any assistance would be greatly appreciated. Thank you.

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

constructor(private fileOpener: FileOpener) { }

...

this.fileOpener.open('path/to/file.pdf', 'application/pdf')
  .then(() => console.log('File is opened'))
  .catch(e => console.log('Error openening file', e));

angular file ionic3

Answer 1

Answer №1

Finally found the solution!

let fileExtn = file_name.split('.').reverse()[0];
let fileMIMEType = this.getMIMEtype(fileExtn);
         this.fileOpener.open("file:///storage/emulated/0/download/" + file_name, fileMIMEType)
                .then(() => console.log('File is opened'))
                .catch(e => console.log('Error opening file', e));

Create another function for MIMEtype

getMIMEtype(extn){
  let ext = extn.toLowerCase();
  let MIMETypes ={
    'txt' :'text/plain',
    'docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    'doc' : 'application/msword',
    'pdf' : 'application/pdf',
    'jpg' : 'image/jpeg',
    'bmp' : 'image/bmp',
    'png' : 'image/png',
    'xls' : 'application/vnd.ms-excel',
    'xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    'rtf' : 'application/rtf',
    'ppt' : 'application/vnd.ms-powerpoint',
    'pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
  }
  return MIMETypes[ext];
}

Answer 2

Finally found the solution!

let fileExtn = file_name.split('.').reverse()[0];
let fileMIMEType = this.getMIMEtype(fileExtn);
         this.fileOpener.open("file:///storage/emulated/0/download/" + file_name, fileMIMEType)
                .then(() => console.log('File is opened'))
                .catch(e => console.log('Error opening file', e));

Create another function for MIMEtype

getMIMEtype(extn){
  let ext = extn.toLowerCase();
  let MIMETypes ={
    'txt' :'text/plain',
    'docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    'doc' : 'application/msword',
    'pdf' : 'application/pdf',
    'jpg' : 'image/jpeg',
    'bmp' : 'image/bmp',
    'png' : 'image/png',
    'xls' : 'application/vnd.ms-excel',
    'xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    'rtf' : 'application/rtf',
    'ppt' : 'application/vnd.ms-powerpoint',
    'pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
  }
  return MIMETypes[ext];
}

Answer 3

Answer №2

Alright, so I created a file named file-extension.ts in my provider directory which contains a variety of extensions along with their respective headers. Here's the code excerpted from Mozilla Docs (for full reference, visit here):

file-extension.ts:

export const FILE_EXTENSION_HEADERS = {
    // Extension headers listed here
};

I later imported this into my provider file and implemented a method to make these headers accessible application-wide.

APIService.ts:

import { FILE_EXTENSION_HEADERS } from './file_extension_headers';


@Injectable()
export class APIService{
  /* Additional methods */

    fetchFileHeader(extension){
        extension = extension.toLowerCase();
        return FILE_EXTENSION_HEADERS[extension] !== undefined ? FILE_EXTENSION_HEADERS[extension] : 'text/plain';// default header if none found
    }
}

Keep in mind that even with the appropriate header, some files may still require specific applications installed on your mobile device in order to open them.

Answer 4

Alright, so I created a file named file-extension.ts in my provider directory which contains a variety of extensions along with their respective headers. Here's the code excerpted from Mozilla Docs (for full reference, visit here):

file-extension.ts:

export const FILE_EXTENSION_HEADERS = {
    // Extension headers listed here
};

I later imported this into my provider file and implemented a method to make these headers accessible application-wide.

APIService.ts:

import { FILE_EXTENSION_HEADERS } from './file_extension_headers';


@Injectable()
export class APIService{
  /* Additional methods */

    fetchFileHeader(extension){
        extension = extension.toLowerCase();
        return FILE_EXTENSION_HEADERS[extension] !== undefined ? FILE_EXTENSION_HEADERS[extension] : 'text/plain';// default header if none found
    }
}

Keep in mind that even with the appropriate header, some files may still require specific applications installed on your mobile device in order to open them.

Answer 5

Answer №3

In order to correctly utilize the file:/// path, it is essential because post sdk 16, only paths without file:/// are accepted.

let path = "your path (file:///storage/emulated/0/)";
let tempVal = path.split('///');

this.fileOpener.open(tempVal[1] + this.qrImgName + '.jpg', 'image/jpeg')
  .then(() => console.log('File is opened'))
  .catch(e => console.log('Error opening file', e));

In this scenario, tempval holds the path beyond the "file:///", resembling storage/emulated/0/, while qrImgName represents the variable containing the desired image name to be opened.

Hence, the final open URL appears as "storage/emulated/0/imagename.jpg".

Answer 6

In order to correctly utilize the file:/// path, it is essential because post sdk 16, only paths without file:/// are accepted.

let path = "your path (file:///storage/emulated/0/)";
let tempVal = path.split('///');

this.fileOpener.open(tempVal[1] + this.qrImgName + '.jpg', 'image/jpeg')
  .then(() => console.log('File is opened'))
  .catch(e => console.log('Error opening file', e));

In this scenario, tempval holds the path beyond the "file:///", resembling storage/emulated/0/, while qrImgName represents the variable containing the desired image name to be opened.

Hence, the final open URL appears as "storage/emulated/0/imagename.jpg".

Learn the steps to access various file formats including doc, ppt, xlsx, pdf, jpg, and png using the Ionic native file opener

Answer №1

Answer №2

Answer №3

Similar questions

The @Hostlistener method consistently returns an 'undefined' value when passing in the @Input() value

Encountering issues during the installation of the Angular/CLI software

npm error - The module './selenium-webdriver/lib/input' cannot be located

The functionality of Angular Signal computation fails to accurately reflect the number of items contained within an array

Is there a way to have my accordion adjust automatically?

Exploring the world of Angular CLI testing and the versatility of

Building a MEAN stack application using Angular 5 and implementing passportJS for authentication

Fetching Data from Response Headers in Angular 4.3.3 HttpClient

There is a complete absence of text appearing on the html page when Angular is

Loading a view in Ionic2 with Angular2 after a successful subscription

Using Angular to dynamically access component properties

Updating validation patterns dynamically in Angular during runtime

Empty array returned on click using Angular 5 with chart.js

converting HTML values to TypeScript

The value of form.formGroup is not equivalent to the output of console.log(form)

Trouble uploading an audio blob as a base64 string using Google Drive API with the drive.files.create method - File ID could not be located

Angular input material with a stylish twist

What is the best method to calculate the total of multiple input values from various cells and display it in the final cell of an Angular table?

Guide to connecting data from the backend to the frontend in the select option feature using Angular 9

The 'append' property is not present in the 'Headers' type in Angular 2