JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 59
  • Score
    100M100P100Q42555F
  • License MIT

Select any type of files from your phone.

Package Exports

  • cs-file-chooser

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (cs-file-chooser) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

FILE CHOOSER for Ionic 3

To see this in action, checkout the example project here.

NPM NPM


Installation

Install the module via NPM

npm i --save cs-file-chooser

Import it in your app's module(s)

Import CsFileChooserModule.forRoot() in your app's main module

import { CsFileChooserModule } from 'cs-file-chooser';

@NgModule({
    ...
    imports: [
      ...
      CsFileChooserModule.forRoot()
      ],
    ...
})
export class AppModule {}

Usage

CsFileChooserController Provider

openCsFileChoooser

openCsFileChoooser(options?: ICsOptionsFile): Observable<any>

OPTIONS

(optional) Advanced configuration.

Param Type Description Default
showHiddenFiles boolean Show hidden system files. false
maxFiles number Maximum number of selectable files. 30
whiteList String[] Allow extensions. []
blackList String[] Deny extensions. []
type String Show files: 'grid', 'list'. grid
onlyDocuments boolean Show only documents files. false
previewImage boolean Show preview image. [DEV] false

Return

Object

{
  nativeURLs: [
    {
      metadata:{
        size: Number,
        typeSize: String,
        mimeType: String
      },
      nativeUrl: String
    }
  ]
}

Array of nativeURLs (ISelectedFile[])

Examples

Simple Example

import { Component } from '@angular/core';
import { CsFileChooserController } from 'cs-file-chooser';

@Component({
  selector: 'test-page',
  templateUrl: './test.html'
})

export class TestPage {

  constructor(
    private _csFileChooserCtrl: CsFileChooserController
  ) {}

  openFileChooser() {
    this._csFileChooserCtrl.openCsFileChoooser()
      .subscribe(data => {
        console.log(data);
      });
  }
}

Example with all options

import { Component } from '@angular/core';
import { CsFileChooserController } from 'cs-file-chooser';

@Component({
  selector: 'test-page',
  templateUrl: './test.html'
})

export class TestPage {

  constructor(
    private _csFileChooserCtrl: CsFileChooserController
  ) {}

  openFileChooser() {
    let options = {
      showHiddenFiles: true,
      maxFiles: 10,
      whiteList: ['png','jpg','mp4'],
      blackList: ['pdf','docx','doc'],
      type: 'list'
    };
    this._csFileChooserCtrl.openCsFileChoooser(options)
      .subscribe(data => {
        console.log(data);
      });
  }
}



Contribution

  • Having an issue? or looking for support? Open an issue and we will get you the help you need.
  • Got a new feature or a bug fix? Fork the repo, make your changes, and submit a pull request.

Support this project

If you find this project useful, please star the repo to let people know that it's reliable. Also, share it with friends and colleagues that might find this useful as well. Thank you 😄