Skip to main content
Version: Next

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
import PageSampleDesign from "generated/pages/pageSample";
import { Route, Router } from "@smartface/router";
import Application from "@smartface/native/application";
import Button from "@smartface/native/ui/button";
import DocumentPicker from "@smartface/native/device/documentpicker";

//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
myButton: Button;
constructor(private router?: Router, private route?: Route) {
super({});
}

// The page design has been made from the code for better
// showcase purposes. As a best practice, remove this and
// use WYSIWYG editor to style your pages.
centerizeTheChildrenLayout() {
this.dispatch({
type: "updateUserStyle",
userStyle: {
flexProps: {
flexDirection: 'ROW',
justifyContent: 'CENTER',
alignItems: 'CENTER'
}
}
})
}

onShow() {
super.onShow();
const { headerBar } = this;
Application.statusBar.visible = false;
headerBar.visible = false;

}

onLoad() {
super.onLoad();
this.centerizeTheChildrenLayout();

this.myButton = new Button({
text: "Button",
onPress: () => {
DocumentPicker.pick({
page: this,
type: [DocumentPicker.Types.ALLFILES],
onSuccess: (file) => {
console.log("onSuccess : ", file.path);
},
onFailure: function () {
console.log("onFailure");
},
onCancel: () => {
console.log("onCancel");
},
});
},
});
this.addChild(this.myButton, "myButton", ".sf-button", {
width: 100,
height: 50,
textColor: "#000000",
backgroundColor: "#00A1F1",
});
}
}