README
@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
The Explorer supports multiple options to customize the plugin according to your needs. Required attributes are marked with (required).
An example configuration is provided below:
{
config: {
companyName: 'scaleflex',
foldersLimit: 200,
filesLimit: 50,
rootFolderPath: '/',
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,
thumbnailWidth: 280,
thumbnailHeight: 180,
waitForThumbnailsBeforeUpload: false,
showProgressDetails: true,
hideUploadButton: false,
hideSearch: false,
hideRetryButton: false,
hideCancelButton: false,
note: null,
closeModalOnClickOutside: false,
closeAfterFinish: false,
closeUploadPanelAfterFinish: false,
disableStatusBar: false,
disableInformer: false,
disableThumbnailGenerator: false,
disablePageScrollWhenModalOpen: true,
animateOpenClose: true,
onRequestCloseModal: () => this.closeModal(),
locale: default,
browserBackButtonCloseModal: false,
theme: 'light',
viewType: 'grid',
showFolderTree: false,
showDetailsView: false,
contextMenuSubTabs: {
fileMore: ['META', 'TAGS', 'EMBED', 'VISIBILITY', 'VERSIONING', 'VARIANTS'],
fileShare: ['SHARE_ASSETS', 'GET_LINK']
},
resetAfterClose: false
}
(required) config: object
default: null
The config objects contains the main configuration for the plugin to interact with your Filerobot project:
- 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
- rootFolderPath (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
(optional) inline: boolean
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.
(optional) trigger: string
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
(required) target: string
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
(optional) width: integer|string
default: 700
Width of the plugin as a number if specified in pixels or a percentage, eg. '50%'
(optional) height: integer|string
default: 500
Height of the plugin as a number if specified in px
or a percentage eg. '35%'
(optional) thumbnailWidth: integer
default: 280
Pixel width of the asset thumbnails displayed in the gallery. Apect ratio of images is kept in case of image assets.
(optional) thumbnailHeight: integer
default: 170
Pixel height of the asset thumbnails displayed in the gallery. Apect ratio of images is kept in case of image assets.
(optional) waitForThumbnailsBeforeUpload: boolean
default: false
If set to true
, delays the start of the upload process until the asset thumbnails are generated and displayed in the plugin.
(optional) showProgressDetails: boolean
default: true
If set to false
, hides the upload progress bar.
(optional) hideUploadButton: boolean
default: false
If set to true
, hides the Upload button at the top of the plugin.
(optional) hideSearch: boolean
default: false
If set to true
, hides Search field at the top of the plugin.
(optional) hideRetryButton: boolean
default: false
If set to true
, hides the Retry button that can be used to retry an upload in case of failing upload.
(optional) hideCancelButton: boolean
default: false
If set to true
, hides the Cancel used to cancel an upload.
(optional) note: string
default: null
A custom note displayed in the upload screen.
(optional) closeModalOnClickOutside: boolean
default: false
If set to true
, plugin modal will be closed when clicking outside of the modal.
only relevant if
inline: false
(optional) closeAfterFinish: boolean
default: false
If set to true
, modal will close after upload is finished.
(optional) closeUploadPanelAfterFinish: boolean
default: false
If set to true
, the upload panel will be closed automatically and explorer would be shown.
only relevant if
inline: false
(optional) onClickDoneButton: function
default: () => {}
A callback function that would be triggered when the user clicks on done button that is shown in the top left buttons of topbar after finish uploading
Only relevant if closeAfterFinish: false` to be able to see the done button.
(optional) disableStatusBar: boolean
default: false
If set to true
, disables the status-bar plugin which shows the upload/download progress.
(optional) disableInformer: boolean
default: false
If set to true
, disables the informer plugin used to show warnings and errors.
(optional) disableThumbnailGenerator: boolean
default: false
If set to true
, disables the thumbnail-generator plugin that generates image thumbails.
(optional) disablePageScrollWhenModalOpen: boolean
default: true
If set to true
, disables scrolling for the document while the plugin modal is open.
only relevant if
inline: false
(optional)
(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
(optional) animateOpenClose: boolean
default: true
If set to false
, disable the modal's opening and closing.
only relevant if
inline: false
(optional) locale: object
default: locales from filerobot's backend then default locale file with all labels is under lib/defaultLocale.js
.
You can override some labels by specifying a translation object here, such as:
{
strings: {
baseFolderTitle: 'Root' // overrides the default Home value to Root
}
}
(optional) theme: string
default: 'light'
- light: uses the light theme
- dark: uses the dark theme
- auto: respects the user's default mode
(optional) browserBackButtonCloseModal: boolean
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
(optional) viewType: string
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.
(optional) showFolderTree: boolean
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.
(optional) showDetailsView: boolean
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.
(optional) contextMenuSubTabs: object
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']
.
(optional) videoTranscoding: object
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
.
(optional) imagePreviewBackground: object
default:
{
type: 'solid',
color: 'auto'
},
Image preview background options for adding background to images :
- type (string - required): type of background image used
solid | blur
, defaults tosolid
. - color (string - required): To tint the background and value is color code or name, defaults to
auto
. - blur (number - required): Applies Gaussian blur to the image and value is the kernel size of the filter in pixels, used
only if type is
blur