Options
All
  • Public
  • Public/Protected
  • All
Menu

The FilePicker application renders contents of the server-side public directory. This app allows for navigating and uploading files to the public path.

param [options={}]

Options that configure the behavior of the FilePicker

Hierarchy

Index

Constructors

Properties

request: string

The full requested path given by the user

sources: any

The file sources which are available for browsing

activeSource: string

Track the active source tab which is being browsed

callback: Function

A callback function to trigger once a file has been selected

results: any

The latest set of results browsed from the server

type: string

The general file type which controls the set of extensions which will be accepted

field: HTMLElement

The target HTML element this file picker is bound to

button: HTMLElement

A button which controls the display of the picker UI

displayMode: string

The display mode of the FilePicker UI

extensions: string[]

The current set of file extensions which are being filtered upon

_loaded: boolean
result: any
options: any

The options provided to this application upon initialization

appId: number

The application ID is a unique incrementing integer which is used to identify every application window drawn by the VTT

_element: jQuery

An internal reference to the HTML element this application renders

position: any

Track the current position and dimensions of the Application UI

_dragDrop: DragDrop[]

DragDrop workflow handlers which are active for this Application

_tabs: Tabs[]

Tab navigation handlers which are active for this Application

_searchFilters: SearchFilter[]

SearchFilter handlers which are active for this Application

_minimized: boolean

Track whether the Application is currently minimized

_scrollPositions: any

Track the most recent scroll positions for any vertically scrolling containers

_state: number

The current render state of the Application

see

{Application.RENDER_STATES}

_priorState: number

The prior render state of this Application. This allows for rendering logic to understand if the application is being rendered for the first time.

see

{Application.RENDER_STATES}

LAST_BROWSED_DIRECTORY: string = ""

Record the last-browsed directory path so that re-opening a different FilePicker instance uses the same target

LAST_TILE_SIZE: number = null

Record the last-configured tile size which can automatically be applied to new FilePicker instances

LAST_DISPLAY_MODE: string = "list"

Record the last-configured display mode so that re-opening a different FilePicker instance uses the same mode.

DISPLAY_MODES: string[] = ...

Enumerate the allowed FilePicker display modes

S3_BUCKETS: any[] = null

Cache the names of S3 buckets which can be used

RENDER_STATES: Readonly<{ CLOSING: -2; CLOSED: -1; NONE: 0; RENDERING: 1; RENDERED: 2; ERROR: 3 }> = ...

The sequence of rendering states that track the Application life-cycle.

Methods

  • _inferCurrentDirectory(target: string): string[]
  • Given a current file path, determine the directory it belongs to

    Parameters

    • target: string

      The currently requested target path

    Returns string[]

    An array of the inferred source and target directory path

  • getData(options?: {}): Promise<{ bucket: any; canGoBack: boolean; canUpload: boolean; canSelect: boolean; cssClass: string; dirs: any; displayMode: string; extensions: string[]; files: any; isS3: boolean; noResults: boolean; selected: string; source: any; sources: any; target: string; tileSize: any; user: User; submitText: string }>
  • override

    Parameters

    • options: {} = {}

      Returns Promise<{ bucket: any; canGoBack: boolean; canUpload: boolean; canSelect: boolean; cssClass: string; dirs: any; displayMode: string; extensions: string[]; files: any; isS3: boolean; noResults: boolean; selected: string; source: any; sources: any; target: string; tileSize: any; user: User; submitText: string }>

    • browse(target: string, options?: any): Promise<any>
    • Browse to a specific location for this FilePicker instance

      Parameters

      • target: string
      • options: any = {}

      Returns Promise<any>

    • render(force: any, options: any): any
    • Render the Application by evaluating it's HTML template against the object of data provided by the getData method If the Application is rendered as a pop-out window, wrap the contained HTML in an outer frame with window controls

      Parameters

      • force: any

        Add the rendered application to the DOM if it is not already present. If false, the Application will only be re-rendered if it is already present.

      • options: any

        Additional rendering options which are applied to customize the way that the Application is rendered in the DOM.

      Returns any

      The rendered Application instance

    • activateListeners(html: any): void
    • After rendering, activate event listeners which provide interactivity for the Application. This is where user-defined Application subclasses should attach their event-handling logic.

      Parameters

      • html: any

      Returns void

    • _onChangeTab(event: any, tabs: any, active: any): void
    • _canDragStart(selector: any): boolean
    • _canDragDrop(selector: any): boolean
    • _onDragStart(event: any): void
    • _onDrop(event: any): Promise<any>
    • _onSearchFilter(event: any, query: any, rgx: any, html: any): void
    • _onSubmit(ev: any): any
    • inheritdoc

      Parameters

      • ev: any

      Returns any

    • activateTab(tabName: string, options?: { group: string; triggerCallback: boolean }): void
    • Change the currently active tab

      Parameters

      • tabName: string

        The target tab name to switch to

      • options: { group: string; triggerCallback: boolean } = {}

        Options which configure changing the tab

        • group: string

          A specific named tab group, useful if multiple sets of tabs are present

        • triggerCallback: boolean

          Whether to trigger tab-change callback functions

      Returns void

    • bringToTop(): void
    • Bring the application to the top of the rendering stack

      Returns void

    • close(options?: any): Promise<void>
    • Close the application and un-register references to it within UI mappings This function returns a Promise which resolves once the window closing animation concludes

      Parameters

      • options: any = {}

      Returns Promise<void>

      A Promise which resolves once the application is closed

    • minimize(): Promise<void>
    • Minimize the pop-out window, collapsing it to a small tab Take no action for applications which are not of the pop-out variety or apps which are already minimized

      Returns Promise<void>

      A Promise which resolves once the minimization action has completed

    • maximize(): Promise<void>
    • Maximize the pop-out window, expanding it to its original size Take no action for applications which are not of the pop-out variety or are already maximized

      Returns Promise<void>

      A Promise which resolves once the maximization action has completed

    • setPosition(position?: { left: number; top: number; width: number; height: string | number; scale: number }): void | { left: number; top: number; width: number; height: number; scale: number }
    • Set the application position and store its new location. Returns the updated position object for the application containing the new values.

      Parameters

      • position: { left: number; top: number; width: number; height: string | number; scale: number } = {}

        Positional data

        • left: number

          The left offset position in pixels

        • top: number

          The top offset position in pixels

        • width: number

          The application width in pixels

        • height: string | number

          The application height in pixels

        • scale: number

          The application scale as a numeric factor where 1.0 is default

      Returns void | { left: number; top: number; width: number; height: number; scale: number }

      |void}

    • _render(force?: boolean, options?: any): Promise<void>
    • An asynchronous inner function which handles the rendering of the Application

      Parameters

      • force: boolean = false

        Render and display the application even if it is not currently displayed.

      • options: any = {}

        Additional options which update the current values of the Application#options object

      Returns Promise<void>

      A Promise that resolves to the Application once rendering is complete

    • _saveScrollPositions(html: jQuery): void
    • Persist the scroll positions of containers within the app before re-rendering the content

      Parameters

      • html: jQuery

        The HTML object being traversed

      Returns void

    • _restoreScrollPositions(html: jQuery): void
    • Restore the scroll positions of containers within the app after re-rendering the content

      Parameters

      • html: jQuery

        The HTML object being traversed

      Returns void

    • _renderOuter(): Promise<jQuery>
    • Render the outer application wrapper

      Returns Promise<jQuery>

      A promise resolving to the constructed jQuery object

    • _activateCoreListeners(html: jQuery): void
    • Activate required listeners which must be enabled on every Application. These are internal interactions which should not be overridden by downstream subclasses.

      Parameters

      • html: jQuery

      Returns void

    • _onDragOver(event: DragEvent): void
    • Callback actions which occur when a dragged element is over a drop target.

      Parameters

      • event: DragEvent

        The originating DragEvent

      Returns void

    • _getExtensions(type: string): string[]
    • Get the valid file extensions for a given named file picker type

      Parameters

      • type: string

      Returns string[]

    • _onChangeDisplayMode(event: MouseEvent): void
    • Handle a click event to change the display mode of the File Picker

      Parameters

      • event: MouseEvent

        The triggering click event

      Returns void

    • _onRequestTarget(event: KeyboardEvent): Promise<any>
    • Handle user submission of the address bar to request an explicit target

      Parameters

      • event: KeyboardEvent

        The originating keydown event

      Returns Promise<any>

    • _onLazyLoadImages(...args: any[]): any
    • Handle requests from the IntersectionObserver to lazily load an image file

      Parameters

      • Rest ...args: any[]

      Returns any

    • _onPick(event: Event): Promise<any>
    • Handle file or folder selection within the file picker

      Parameters

      • event: Event

        The originating click event

      Returns Promise<any>

    • _onClickDirectoryControl(event: PointerEvent): any
    • Handle backwards navigation of the folder structure.

      Parameters

      • event: PointerEvent

        The triggering click event

      Returns any

    • _createDirectoryDialog(source: any): Promise<any>
    • Present the user with a dialog to create a subdirectory within their currently browsed file storage location.

      Parameters

      • source: any

        The data source being browsed

      Returns Promise<any>

    • _onChangeBucket(event: Event): Promise<any>
    • Handle changes to the bucket selector

      Parameters

      • event: Event

        The S3 bucket select change event

      Returns Promise<any>

    • _onUpload(ev: Event): Promise<any>
    • Handle file upload

      Parameters

      • ev: Event

        The file upload event

      Returns Promise<any>

    • matchS3URL(url: string): RegExpMatchArray
    • Test a URL to see if it matches a well known s3 key pattern

      Parameters

      • url: string

        An input URL to test

      Returns RegExpMatchArray

      A regular expression match

    • browse(source: string, target: string, options?: { bucket: string; extensions: string[]; wildcard: boolean }): Promise<any>
    • Browse files for a certain directory location

      Parameters

      • source: string

        The source location in which to browse. See FilePicker#sources for details

      • target: string

        The target within the source location

      • options: { bucket: string; extensions: string[]; wildcard: boolean } = {}

        Optional arguments

        • bucket: string
        • extensions: string[]
        • wildcard: boolean

      Returns Promise<any>

      A Promise which resolves to the directories and files contained in the location

    • configurePath(source: string, target: string, options?: any): Promise<any>
    • Configure metadata settings regarding a certain file system path

      Parameters

      • source: string

        The source location in which to browse. See FilePicker#sources for details

      • target: string

        The target within the source location

      • options: any = {}

        Optional arguments which modify the request

      Returns Promise<any>

    • createDirectory(source: string, target: string, options?: any): Promise<any>
    • Create a subdirectory within a given source. The requested subdirectory path must not already exist.

      Parameters

      • source: string

        The source location in which to browse. See FilePicker#sources for details

      • target: string

        The target within the source location

      • options: any = {}

        Optional arguments which modify the request

      Returns Promise<any>

    • upload(source: string, path: string, file: File, body?: any, [options]?: { notify: boolean }): Promise<any>
    • Dispatch a POST request to the server containing a directory path and a file to upload

      Parameters

      • source: string

        The data source to which the file should be uploaded

      • path: string

        The destination path

      • file: File

        The File object to upload

      • body: any = {}
      • [options]: { notify: boolean } = {}

        Additional options to configure how the method behaves

        • notify: boolean

      Returns Promise<any>

      The response object

    • Bind the file picker to a new target field. Assumes the user will provide a HTMLButtonElement which has the data-target and data-type attributes The data-target attribute should provide the name of the input field which should receive the selected file The data-type attribute is a string in ["image", "audio"] which sets the file extensions which will be accepted

      Parameters

      • button: HTMLButtonElement

        The button element

      Returns FilePicker

    • _manageFiles(data: any, options: any): Promise<any>
    • General dispatcher method to submit file management commands to the server

      Parameters

      • data: any

        Request data dispatched to the server

      • options: any

        Options dispatched to the server

      Returns Promise<any>

      The server response

    Accessors

    • get title(): string
    • override

      Returns string

    • get source(): any
    • Return the source object for the currently active source

      Returns any

    • get target(): string
    • Return the target directory for the currently active source

      Returns string

    • get canUpload(): boolean
    • Return a flag for whether the current user is able to upload file content

      Returns boolean

    • get id(): string
    • Return the CSS application ID which uniquely references this UI element

      Returns string

    • get element(): jQuery
    • Return the active application element, if it currently exists in the DOM

      Returns jQuery

    • get template(): string
    • The path to the HTML template file which should be used to render the inner content of the app

      Returns string

    • get popOut(): boolean
    • Control the rendering style of the application. If popOut is true, the application is rendered in its own wrapper window, otherwise only the inner app content is rendered

      Returns boolean

    • get rendered(): boolean
    • Return a flag for whether the Application instance is currently rendered

      Returns boolean

    • get uploadURL(): string
    • Return the upload URL to which the FilePicker should post uploaded files

      Returns string