@filerobot/explorer

@filerobot/explorer

The file explorer and media gallery plugin of the Filerobot Media Asset Widget.

Usage

From NPM

The plugin can be installed from NPM as @filerobot/explorer

npm install --save @filerobot/explorer

then

import Explorer from '@filerobot/explorer'
...
...
...
filerobot.use(Explorer, optionsObject)

From CDN

If installed via a CDN link, the plugin is inside the Filerobot global object as Filerobot.Explorer

const Explorer = window.Filerobot.Explorer
...
...
...
filerobot.use(Explorer, optionsObject)

Plugin styles

import '@filerobot/core/dist/style.css'
import '@filerobot/explorer/dist/style.css'

or via the minified versions

import '@filerobot/core/dist/style.min.css'
import '@filerobot/explorer/dist/style.min.css'

The plugin's css file should be imported after the Core's css file for having the styles shown correctly.

Options

Multiple options are available in order to customize the plugin to address your use cases. A description of all options is available below. The required attributes for configuring the plugin are marked as (required) in the documentation below.

{
  id: 'Explorer',
  config: {
    container: 'demo',
    companyName: 'scaleflex',
    apiEndpoint: 'api',
    adminEndpoint: 'admin',
    shareEndpoint: 'share',
    sassKey: sassKey,
    dev: false,
    foldersLimit: 200,
    filesLimit: 50,
    folderPath: '/',
    tagging: {
      language: 'en',
      confidence: 60,
      key: '',
      limit: 10,
      provider: 'google',
      suggestionList: [
        'Alligator',
        'Bask',
        'Crocodilian',
        'Death Roll'
      ]
    }
  },
  inline: false,
  target: '#filerobot-container',
  trigger: '#filerobot-trigger-button',
  width: 750,
  height: 500,
  floaty: false,
  showBar: true,
  thumbnailWidth: 280,
  thumbnailHeight: 180,
  waitForThumbnailsBeforeUpload: false,
  showProgressDetails: true,
  hideUploadButton: false,
  hideRetryButton: false,
  hideCancelButton: false,
  note: null,
  closeModalOnClickOutside: false,
  closeAfterFinish: false,
  disableStatusBar: false,
  disableInformer: false,
  disableThumbnailGenerator: false,
  disablePageScrollWhenModalOpen: true,
  animateOpenClose: true,
  onRequestCloseModal: () => this.closeModal(),
  locale: default,
  browserBackButtonCloseModal: false,
  theme: 'light',
  noImgOperationsAndDownload: false,
  disableSelectionActions: false,
  topRightMenuComponentItem: undefined,
  disableExportButton: false,
  tagsInsideGeneral: false,
  viewType: 'grid',
  showFolderTree: false,
  showDetailsView: false,
  contextMenuSubTabs: {
    fileMore: ['META', 'TAGS', 'EMBED', 'VISIBILITY', 'VERSIONING', 'VARIANTS'],
    fileShare: ['SHARE_ASSETS', 'GET_LINK']
  },
  noItemsBrowser: false,
  resetAfterClose: false,
  useShareboxMode: false,
  shareboxPUID: null
}

config: object (required)

default: null

The config objects contains the main configuration for the plugin to interact with your Filerobot project:

• container (string - required): your filerobot project's container token that you obtain after creating a Filerobot account
• sassKey (string - required): authorization key for your Filerobot account
• companyName (string - optional): your company name, used when sharing assets, defaults to scaleflex
• foldersLimit (number - optional): number of folders to be retrieved and displated in the first request, defaults to 200
• filesLimit (number - optional): number of files to be retrieved and displayed in the first request, defaults to 50
• folderPath (string - optional): folder path to be used as the root folder displayed, defaults to /
• tagging (object - optional): ML-based auto-tagging configuration
  • language (string - optional): language used for generating and saving tags, defaults to 'en'
  • confidence (number - optional): confidence score from which the auto generated tags would be chosen, defaults to 60
  • limit (number - optional): number of auto-tags generated, defaults to 10
  • provider (string - optional): ML-based auto-tagging provider, defaults to google
  • suggestionList (array of strings - optional): list of suggested tags

inline: boolean (optional)

default: false

If set to true, the plugin will be displayed as inline element in the element referred by the target property. Otherwise, it will pop up in a modal upon trigger, see below.

trigger: string (optional)

default: null

The selector used for triggering the display of the plugin modal, if passed to querySelectorAll function. Available options:

• HTML tag, eg. body
• CSS selector, eg. #filerobot-trigger-button or .filerobot-trigger-button

Multiple triggers are supported as click events.

required if inline: false

target: string (required)

default: body

The selector used for displaying the plugin, if passed to querySelector function. Options:

• HTML tag, eg. body
• CSS selector, eg. #filerobot-container or .filerobot-container

width: integer|string (optional)

default: 700

Width of the plugin as a number if specified in pixels or a percentage, eg. '50%'

height: integer|string (optional)

default: 500

Height of the plugin as a number if specified in px or a percentage eg. '35%'

floaty: boolean (optional)

default: false

Set to true to configure the plugin to be floaty and stay in a fied position as you scroll the media library.

setting the floaty attribute to true has an impact on some styles and behavior, eg. bigger spacings for some elements, having close button instead of back for slided wrappers/modals, ...

showBar: boolean (optional)

default: true

If set to false, hides the top bar with Upload button, refresh icon, create folder icon and view switcher icon as well as search input field.

thumbnailWidth: integer (optional) no working

no working

default: 280

Pixel width of the asset thumbnails displayed in the gallery. Apect ratio of images is kept in case of image assets.

thumbnailHeight: integer (optional) no working

default: 170

Pixel height of the asset thumbnails displayed in the gallery. Apect ratio of images is kept in case of image assets.

waitForThumbnailsBeforeUpload: boolean (optional)

default: false

If set to true, delays the start of the upload process until the asset thumbnails are generated and displayed in the plugin.

showProgressDetails: boolean (optional)

default: true

If set to false, hides the upload progress bar.

hideUploadButton: boolean (optional)

default: false

If set to true, hides the Upload button at the top of the plugin.

hideRetryButton: boolean (optional)

default: false

If set to true, hides the Retry button that can be used to retry an upload in case of failing upload.

hideCancelButton: boolean (optional)

default: false

If set to true, hides the Cancel used to cancel an upload.

note: string (optional)

default: null

A custom note displayed in the upload sreen.

closeModalOnClickOutside: boolean (optional)

default: false

If set to true, plugin modal will be closed when clicking outside of the modal.

only relevant if inline: false

closeAfterFinish: boolean (optional)

default: false

If set to true, modal will close after upload is finished.

only relevant if inline: false

disableStatusBar: boolean (optional)

default: false

If set to true, disables the status-bar plugin which shows the upload/download progress.

disableInformer: boolean (optional)

default: false

If set to true, disables the informer plugin used to show warnings and errors.

disableThumbnailGenerator: boolean (optional)

default: false

If set to true, disables the thumbnail-generator plugin that generates image thumbails.

disablePageScrollWhenModalOpen: boolean (optional)

default: true

If set to true, disables scrolling for the document while the plugin modal is open.

only relevant if inline: false (optional)

onRequestCloseModal: () => undefined

default: closeModal function

Specified a custom function to be executed when trying to close the modal.

default closing modal behavior is overriden

animateOpenClose: boolean (optional)

default: true

If set to false, disable the modal's opening and closing.

only relevant if inline: false

locale: object (optional)

default: default locale file is lib/defaultLocale.js

You can override the default labels and translations by specifying an alternative locale file path here.

theme: string (optional)

default: 'light'

• light: uses the light theme
• dark: uses the dark theme
• auto: respects the user's default mode

browserBackButtonCloseModal: boolean (optional)

default: false

If set to true, the browser Back button will close the modal, otherwise it will trigger the standard back browser behavior.

only relevant if inline: false

noImgOperationsAndDownload: boolean (optional)

default: false

If set to true, hides the options following options from the asset's right-click contextual menu:

• Downlaod
• Preview
• Edit image
• Comments

disableSelectionActions: boolean (optional)

default: false

If set to true, hides the action buttons for:

• Export
• Preview
• Download
• Share
• Delete
• ...

disableExportButton: boolean (optional) no working

default: false

If set to true, hides the Export button in the top bar do download a single or multiple assets.

****topRightMenuComponentItem: React.Component (optional)

default: undefined

A react component that would be added at the top right menu of the top bar for appending/expanding some functionality.

tagsInsideGeneral: boolean (optional)

default: false

If set to true, the content of the Tags tab is moved to the General tab and the General tab renamed to General & Tags.

viewType: string (optional)

default: grid

Specified the default view for the asset list:

• grid: shows the items as cards in a grid
• list: shows the items as horizontal rows in a list (table-like)
• tiles: same as list but with larger previews

The user will be able to switch between views from the view selector icon in the top bar.

showFolderTree: boolean (optional)

default: false

If set to true, shows the folder tree will in the left bar of the plugin for the user to navigate folders. The user can show / hide the folder tree from the view switcher icon in the top bar.

showDetailsView: boolean (optional)

default: false

If set to true, shows the asset details view on the right bar of the plugin for the user to view various details about selected assets. The user can show / hide the details view switcher icon in the top bar.

contextMenuSubTabs: object (optional)

default:

{
  fileMore: ['META', 'TAGS', 'EMBED', 'VISIBILITY', 'VERSIONING', 'VARIANTS'],
  fileShare: ['SHARE_ASSETS', 'GET_LINK']
}

If you need to customize the sub tabs that are opened from the parent tabs of the context menu (the menu shown on clicking right click on the file/folder):

• fileMore (array of strings): the sub tabs for more details parent tab inside file's context menu, those are all the sub tabs available for that parent tab ['META', 'TAGS', 'EMBED', 'VISIBILITY', 'VERSIONING', 'VARIANTS'].
• fileShare (array of strings): the sub tabs for share parent tab inside file's context menu, those are all the sub tabs available for that parent tab ['SHARE_ASSETS', 'GET_LINK'].

noItemsBrowser: boolean (optional)

default: false

If set to true, hides the gallery view displaying files/folders and only allows the user to upload a single or multiple assets.

resetAfterClose: boolean (optional) no working

default: false

If set to true, resets the plugin state after closing the modal

only relevant if inline: false

useShareboxMode: boolean *no working

default: false

If set to true, activates the Sharebox mode of the widget to share a gallery of files with external, non-Filerobot users.

The shareboxPUID property from the Filerobot Asset Hub is required for using the Sharebox mode, see below.

shareboxPUID: string (optional)

default: null

Identifies a Sharebox created in the Filerobot Asset Hub with selected files / folders to be shared as part of a Sharebox with external users.

shareboxPassword: string (optional)

default: null

If enabled, the Sharebox will require this password for users to access files / folders.

videoTranscoding: object (optional)

default:

{
  resolution: 'auto',
  protocol: 'HLS'
}

Video transcoding options for post-upload video transcoding:

• resolution (string - required): target resolutions for video transcoding, defaults to auto.
• protocol (string - required): which protocol to use while transcoding, defaults to HLS.