Picker Customization - CSS, Custom Text and Languages

Customize the Web Dialog with CSS

{customCss:}

To match the look of your site, you can add custom CSS to be included along with the page. To specify a CSS file URL go to your Developer Portal. You should see a section called "Web Dialog". Here you can add the url for your custom CSS. You can also specify a css file url per dialog instance in the picker options. The URL you use to link to your CSS file must use https:// or it will be ignored.

You can find an un-minifcated version of the CSS file used for uploader dialog here. Please feel free to experiment and make the Filestack picker your own.

Custom CSS Examples:

Elegant Theme:

Link to CSS file

Flat Green Theme:

Link to CSS file

Dark Theme:

Link to CSS file

Bright Theme:

Link to CSS file

Lavender Sketchy Theme:

Link to CSS file

Language Support in the Filestack Dialog

Filestack supports many different translations of its dialog text. These translations can be used by setting the language picker option to one of the available language codes listed below.

Language
String
{language: 'es'}

Specify the filestack dialog language version. If not set, it will use language detected in browser. If the detected language is unavaliable, the default value is 'en'. Currently, the languages with complete translations are:

Supported languages:

  • Czech: 'cs'
  • German: 'de'
  • English: 'en'
  • Spanish: 'es'
  • Spanish (Mexican): 'es_mx'
  • Faroese: 'fo'
  • French: 'fr'
  • Canadian French: 'fr_ca'
  • Hebrew: 'he'
  • Italian: 'it'
  • Dutch: 'nl'
  • Danish: 'da'
  • Norwegian: 'no'
  • Polish: 'pl'
  • Portuguese: 'pt'
  • Portuguese (Brazilian): 'pt_br'
  • Russian: 'ru'
  • Swedish: 'sv'
  • Turkish: 'tr'
  • Chinese (Taiwan): 'zh_tw'
  • Greek: 'el'
  • Spanish (Argentina): 'es_ar'
  • Finnish: 'fi'
  • Indonesian: 'id'
  • Korean: 'ko'
  • Slovak: 'sk'
  • Ukrainian: 'uk'
  • Chinese: 'zh'
  • Serbian: 'sr'
  • Bulgarian: 'bg'
  • Malay: 'ms'
  • Hungarian: 'hu'
  • Vietnamese: 'vi'

If you would like to co-create the translation to any language, please contact us.

If you would like to co-create the translation to any language, please contact us.

Additionally, you can define your own translation by utilizing the customText parameter.

Custom Dialog Text
String
{customText: '//domain.com/your_json_file.json'}

Allows a user to provide their own text for the Filestack dialog. The Url of your JSON file should use https protocol and be publicly accessible. Here is a sample JSON file including the English text for the dialog that can be used as a base for your custom text: English_Dialog_Text.JSON Your custom text must include all the keys present in this file. The values can be blank if you choose. Other language files are available by using the language code to modify the url linking to this French translation file, so es.js for Spanish, ru.js for Russian, pl.js for Polish, etc. The sample French file above contains variables that look like this: __variable__, however in order to work with the customText picker option, these variables must adhere to this format: {{variable}}.