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:
UIDocumentPickerViewController
Limitations
Note: I am not an expert of neigher iOS nor Android. So, please contribute if you think something you can do better :)
NS Version | nativescript-mediafilepicker version | Install command | Docs |
---|---|---|---|
^7.0.0 | ^4.0.0 | ns plugin add nativescript-mediafilepicker | This page |
^6.0.0 | ^3.0.0 | tns plugin add nativescript-mediafilepicker@^3.0.0 | Here |
ns plugin add nativescript-mediafilepicker
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.
isNeedCamera: true,
maxNumberFiles: 10
}
};
let mediafilepicker = new Mediafilepicker();
mediafilepicker.openImagePicker(options);
mediafilepicker.on("getFiles", function (res) {
let results = res.object.get('results');
console.dir(results);
});
// for iOS iCloud downloading status
mediafilepicker.on("exportStatus", function (res) {
let msg = res.object.get('msg');
console.log(msg);
});
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);
});
// for iOS iCloud downloading status
mediafilepicker.on("exportStatus", function (res) {
let msg = res.object.get('msg');
console.log(msg);
});
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);
});
Usage in Angular
mediafilepicker.on("getFiles", event => {
this._ngZone.run(() => {
// do your stuff here
// any UI changes will be reflected
});
});
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<{}>;
export interface ImagePickerOptions {
android?: {
isCaptureMood?: boolean;
isNeedCamera?: boolean;
maxNumberFiles?: number;
isNeedFolderList?: boolean;
};
ios?: {
isCaptureMood?: boolean;
isNeedCamera?: boolean;
maxNumberFiles?: number;
hostView?: View;
};
}
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
hostView?: View;
};
}
export interface AudioPickerOptions {
android?: {
isCaptureMood?: boolean;
isNeedRecorder?: boolean;
maxNumberFiles?: number;
isNeedFolderList?: boolean;
maxSize?: number;
};
ios?: {
isCaptureMood?: boolean;
maxNumberFiles?: number;
audioMaximumDuration?: number;
hostView?: View;
};
}
export interface FilePickerOptions {
android?: {
extensions: Array<string>;
maxNumberFiles?: number;
};
ios?: {
extensions: Array<string>; // https://developer.apple.com/documentation/mobilecoreservices/uttype
multipleSelection?: boolean;
hostView?: View;
};
}
Android
iOS
Apache License Version 2.0, January 2004