DocumentPicker
API Reference: Device.DocumentPicker
DocumentPicker component allows you to select a file from your device to the application. While picking documents you can restrict the selection with following file types; Pdf, Audio, Image, Plain Text and All Files.

File selector:

Files are selected from file explorer/manager app. Please notice that if there is no file explorer app installed on the device, then the picker operation may fail.
TypeScript
1
import PageSampleDesign from 'generated/pages/pageSample';
2
import FlexLayout from '@smartface/native/ui/flexlayout';
3
import Application from '@smartface/native/application';
4
import Button from '@smartface/native/ui/button';
5
import DocumentPicker from '@smartface/native/device/documentpicker';
6
7
8
//You should create new Page from UI-Editor and extend with it.
9
export default class Sample extends PageSampleDesign {
10
11
myButton: Button;
12
13
constructor() {
14
super();
15
// Overrides super.onShow method
16
this.onShow = onShow.bind(this, this.onShow.bind(this));
17
// Overrides super.onLoad method
18
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
19
20
this.layout.flexDirection = FlexLayout.FlexDirection.COLUMN;
21
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
22
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
23
}
24
}
25
26
/**
27
* @event onShow
28
* This event is called when a page appears on the screen (everytime).
29
* @param {function} superOnShow super onShow function
30
* @param {Object} parameters passed from Router.go function
31
*/
32
function onShow(superOnShow: () => void) {
33
const { headerBar } = this;
34
superOnShow();
35
Application.statusBar.visible = false;
36
headerBar.visible = false;
37
}
38
39
/**
40
* @event onLoad
41
* This event is called once when page is created.
42
* @param {function} superOnLoad super onLoad function
43
*/
44
function onLoad(superOnLoad: () => void) {
45
superOnLoad();
46
47
this.myButton = new Button({
48
text: "Button",
49
onPress: () => {
50
DocumentPicker.pick({
51
page: this,
52
type: [DocumentPicker.Types.ALLFILES],
53
onSuccess: (file) => {
54
console.log("onSuccess : ", file.path);
55
},
56
onFailure: function () {
57
console.log("onFailure");
58
},
59
onCancel: () => {
60
console.log("onCancel");
61
}
62
});
63
}
64
});
65
this.layout.addChild(this.myButton, "myButton", ".sf-button", {
66
width: 100,
67
height: 50,
68
textColor: "#000000",
69
backgroundColor: "#00A1F1"
70
});
71
72
}
73
Copied!
Last modified 2mo ago
Copy link