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",
      });
  }
}