I’m new to ionic, i’m using ionic 3 trying to browse file while clicking a button but i’m facing lot of issues here can anyone help me with any github link for browsing file in browser.
<ion-item>
<ion-label>Upload Doc
</ion-label>
<ion-input disabled type="text" name="inputName" [(ngModel)]="inputName" formControlName="document"></ion-input>
<button item-right ion-button round outline color="dark" (click)="uploadFile()">
<ion-icon name="star"> </ion-icon> Browse</button>
</ion-item>
import { Component } from '@angular/core';
import { NavController, LoadingController, ToastController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
import { FileChooser } from "@ionic-native/file-chooser";
import { FilePath } from "@ionic-native/file-path";
import { FileOpener } from "@ionic-native/file-opener";
import { File } from '@ionic-native/file';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
formgroup: FormGroup;
path: AbstractControl;
name: AbstractControl;
document: AbstractControl;
inputName: string;
constructor(public navCtrl: NavController, public formbuilder: FormBuilder,
private fileChooser: FileChooser, private fileOpener: FileOpener, private filePath: FilePath, file:File
) {
this.formgroup = formbuilder.group({
path: ['', Validators.required,],
name: ['', Validators.required],
document: ['', Validators.required]
});
this.path = this.formgroup.controls['path'];
this.name = this.formgroup.controls['name'];
this.document = this.formgroup.controls['document'];
}
uploadFile() {
console.log("Hi");
this.fileChooser.open().then(file => {
this.filePath.resolveNativePath(file).then(resolvedFirePath => {
this.fileOpener.open(resolvedFirePath, 'application/pdf/html/doc/docx/xlx/js/gz').then(value => {
console.log(value);
}).catch(err => {
alert(JSON.stringify(err));
});
});
});
}
}
import { BrowserModule } from ‘@angular/platform-browser’;
import { ErrorHandler, NgModule } from ‘@angular/core’;
import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;
import { FileTransfer, FileTransferObject } from ‘@ionic-native/file-transfer’;
import { File } from ‘@ionic-native/file’;
import { FileChooser } from “@ionic-native/file-chooser”;
import { FilePath } from “@ionic-native/file-path”;
import { FileOpener } from “@ionic-native/file-opener”;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { FormsModule} from ‘@angular/forms’;
import { MyApp } from ‘./app.component’;
import { HomePage } from ‘…/pages/home/home’;
@NgModule({
declarations: [
MyApp,
HomePage,
],
imports: [
BrowserModule,
FormsModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
FileChooser,
FileOpener,
FilePath,
File,
{provide: ErrorHandler, useClass: IonicErrorHandler},
]
})
export class AppModule {}
> ERROR: Uncaught (in promise): Error: StaticInjectorError[FileChooser]:
StaticInjectorError[FileChooser]:
NullInjectorError: No provider for FileChooser!
Error: StaticInjectorError[FileChooser]:
StaticInjectorError[FileChooser]:
NullInjectorError: No provider for FileChooser!