Skip to content
A complete file picker solution for NativeScript
TypeScript Shell JavaScript Ruby
Branch: master
Clone or download
Latest commit 814e7a7 Sep 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Update issue templates Sep 20, 2018
.vscode new implementation Sep 6, 2018
demo fix #80 #83 #32 Sep 23, 2019
publish travis fix Sep 12, 2018
screenshots resized Sep 8, 2018
src fix #80 #83 #32 Sep 23, 2019
.gitignore cli Dec 12, 2018
.travis.yml bump version Dec 5, 2018
LICENSE Initial commit Nov 13, 2017
README.md (Feature) Direct capture (#39) Oct 17, 2018
tslint.json travis more details Sep 9, 2018

README.md

npm npm npm Build Status

nativescript-mediafilepicker

A complete file picker solution for NativeScript. You will be able to pickup any types of file. Capturing image, video & audio are supported. It's a combination features of nativescript-imagepicker and nativescript-camera plugin with some extended features using following native libaries:

Old version (v1.X) can be found from this branch

Features:

  • Image, Video, Audio & custom file picker.
  • Capturing Image, Video and Audio from APP directly.
  • Custom files like pdf, text etc support. For iOS I have used UIDocumentPickerViewController
  • Single or Multiple selections.
  • More...

Limitations

  • Anything those exists in Native Library. You can check the native libaries.
  • In iOS after selecting file you may not be able to use it directly. In this case you will need to copy that file in your app directory. After using it you can delete it for reducing storage memory usage. Please check the demo for more details.
  • At present selecting iCloud file isn't supported for iOS because of Native Library limitation.

Note: I am not an expert of neigher iOS nor Android. So, please contribute if you think something you can do better :)

Installation

tns plugin add nativescript-mediafilepicker

Usage (Please check demo project for details)

Import

JavaScript:

var mPicker = require("nativescript-mediafilepicker");
var mediafilepicker = new mPicker.Mediafilepicker();

TS:

import { Mediafilepicker, ImagePickerOptions, VideoPickerOptions, AudioPickerOptions, FilePickerOptions } from 'nativescript-mediafilepicker';

Image File Picker

let options: ImagePickerOptions = {
    android: {
        isCaptureMood: false, // if true then camera will open directly.
        isNeedCamera: true,
        maxNumberFiles: 10,
        isNeedFolderList: true
    }, ios: {
        isCaptureMood: false, // if true then camera will open directly.
        maxNumberFiles: 10
    }
};

let mediafilepicker = new Mediafilepicker();
mediafilepicker.openImagePicker(options);

mediafilepicker.on("getFiles", function (res) {
    let results = res.object.get('results');
    console.dir(results);
});

mediafilepicker.on("error", function (res) {
    let msg = res.object.get('msg');
    console.log(msg);
});

mediafilepicker.on("cancel", function (res) {
    let msg = res.object.get('msg');
    console.log(msg);
});

Video File Picker

let allowedVideoQualities = [];

if (app.ios) {
    allowedVideoQualities = [AVCaptureSessionPreset1920x1080, AVCaptureSessionPresetHigh];  // get more from here: https://developer.apple.com/documentation/avfoundation/avcapturesessionpreset?language=objc
}

let options: VideoPickerOptions = {
    android: {
        isCaptureMood: false, // if true then camera will open directly.
        isNeedCamera: true,
        maxNumberFiles: 2,
        isNeedFolderList: true,
        maxDuration: 20,

    },
    ios: {
        isCaptureMood: false, // if true then camera will open directly.
        videoMaximumDuration: 10,
        allowedVideoQualities: allowedVideoQualities
    }
};

let mediafilepicker = new Mediafilepicker(); 
mediafilepicker.openVideoPicker(options);

mediafilepicker.on("getFiles", function (res) {
    let results = res.object.get('results');
    console.dir(results);
});

mediafilepicker.on("error", function (res) {
    let msg = res.object.get('msg');
    console.log(msg);
});

mediafilepicker.on("cancel", function (res) {
    let msg = res.object.get('msg');
    console.log(msg);
});

Audio File Picker

let options: AudioPickerOptions = {
    android: {
        isCaptureMood: false, // if true then voice recorder will open directly.
        isNeedRecorder: true,
        maxNumberFiles: 2,
        isNeedFolderList: true,
        maxSize: 102400 // Maximum size of recorded file in bytes. 5900 = ~ 1 second
    },
    ios: {
        isCaptureMood: false, // if true then voice recorder will open directly.
        maxNumberFiles: 5,
        audioMaximumDuration: 10,
    }
};

let mediafilepicker = new Mediafilepicker(); 
mediafilepicker.openAudioPicker(options);

mediafilepicker.on("getFiles", function (res) {
    let results = res.object.get('results');
    console.dir(results);
});

mediafilepicker.on("error", function (res) {
    let msg = res.object.get('msg');
    console.log(msg);
});

mediafilepicker.on("cancel", function (res) {
    let msg = res.object.get('msg');
    console.log(msg);
});

Custom File Picker

let extensions = [];

if (app.ios) {
    extensions = [kUTTypePDF, kUTTypeText]; // you can get more types from here: https://developer.apple.com/documentation/mobilecoreservices/uttype
} else {
    extensions = ['txt', 'pdf'];
}

let options: FilePickerOptions = {
    android: {
        extensions: extensions,
        maxNumberFiles: 2
    },
    ios: {
        extensions: extensions,
        multipleSelection: true
    }
};

let mediafilepicker = new Mediafilepicker(); 
mediafilepicker.openFilePicker(options);

mediafilepicker.on("getFiles", function (res) {
    let results = res.object.get('results');
    console.dir(results);
});

mediafilepicker.on("error", function (res) {
    let msg = res.object.get('msg');
    console.log(msg);
});

mediafilepicker.on("cancel", function (res) {
    let msg = res.object.get('msg');
    console.log(msg);
});

All Methods

openImagePicker(params: ImagePickerOptions): void;
openVideoPicker(params: VideoPickerOptions): void;
openAudioPicker(params: AudioPickerOptions): void;
openFilePicker(params: FilePickerOptions): void;

// iOS only
copyPHImageToAppDirectory(rawData: PHAsset, fileName: any): Promise<{}>;
copyPHVideoToAppDirectory(asset: AVURLAsset, fileName: any): Promise<{}>;
convertPHImageToUIImage(rawData: PHAsset): Promise<{}>;
copyUIImageToAppDirectory(image: UIImage, fileName: any): Promise<{}>;
copyMPMediaFileToAPPDirectory(mediaItem: MPMediaItem, filename: any): Promise<{}>;    

All options

export interface ImagePickerOptions {
    android?: {
        isCaptureMood?: boolean;
        isNeedCamera?: boolean;
        maxNumberFiles?: number;
        isNeedFolderList?: boolean;
    };
    ios?: {
        isCaptureMood?: boolean;
        maxNumberFiles?: number;
    };
}
export interface VideoPickerOptions {
    android?: {
        isCaptureMood?: boolean;
        isNeedCamera?: boolean;
        maxNumberFiles?: number;
        isNeedFolderList?: boolean;
        maxDuration?: number;
        videoQuality?: number;
    };
    ios?: {
        isCaptureMood?: boolean;
        maxNumberFiles?: number;
        videoMaximumDuration?: number;
        allowedVideoQualities?: Array<string>; // https://developer.apple.com/documentation/avfoundation/avcapturesessionpreset?language=objc
    };
}
export interface AudioPickerOptions {
    android?: {
        isCaptureMood?: boolean;
        isNeedRecorder?: boolean;
        maxNumberFiles?: number;
        isNeedFolderList?: boolean;
        maxSize?: number;
    };
    ios?: {
        isCaptureMood?: boolean;
        maxNumberFiles?: number;
        audioMaximumDuration?: number;
    };
}
export interface FilePickerOptions {
    android?: {
        extensions: Array<string>;
        maxNumberFiles?: number;
    };
    ios?: {
        extensions: Array<string>; //  https://developer.apple.com/documentation/mobilecoreservices/uttype
        multipleSelection?: boolean;
    };
}

Screenshots

Android

Android Android Android Android Android Android

iOS

ios ios ios ios ios

License

Apache License Version 2.0, January 2004

You can’t perform that action at this time.