Filerobot Uploader plugin

Click on "Upload Image" to upload from your computer, link, or find image in free galleries

placeholder
  • File name: placeholder
  • Size: 2.2 KB
  • First Uploaded: -
  • Last Modified: -

Table of content

Install

Use latest CDNized plugin version

<script src="https://js.filerobot.com/filerobot-uploader.last.js"></script>

Quick start

We provide easy way to integrate image uploader in your applications.

<script>
  let options = {
    container: 'example',
    filerobotUploadKey: '0cbe9ccc4f164bf8be26bd801d53b132',
    openpixKey: 'xxxxxxxxxxxxxxx',
    onUpload: (files) => {
      console.log('files: ', files);
      alert('Files uploaded successfully! check the console to see the uploaded files');
    }
  };

  let uploader = FilerobotUploader.init(options);

  uploader.open();
</script>

Config params

container: string (required)

Filerobot Container name.

let options = {
    ...,

    container: 'example'
  };
filerobotUploadKey: string (required)

Unique upload key for Filerobot.

let options = {
    ...,

    filerobotUploadKey: 'xxxxxxxxxxxx'
  };
openpixKey: string (required)

Key for Openpix. Required if you are using "ICONS_GALLERY", "IMAGES_GALLERY"

let options = {
    ...,

    openpixKey: 'xxxxxxxxxxxx'
  };
language: string

default: 'en'

Language of uploader

available languages: en, fr, de, ru

let options = {
    ...,

    language: 'en'
  };
folderBrowser: bool

default: true

Aside menu to browse folders in your container

let options = {
    ...,

    folderBrowser: true
  };
modules: string[]

default: ["UPLOAD", "MY_GALLERY", "ICONS_GALLERY", "IMAGES_GALLERY"]

Modules (tabs) in file uploader modal.

Available modules: UPLOAD, MY_GALLERY, ICONS_GALLERY, IMAGES_GALLERY, TAGGING, IMAGE_EDITOR

let options = {
    ...,

    modules: ['UPLOAD', 'ICONS_GALLERY', 'TAGGING']
  };
uploadParams: object see documentation

> dir: string (default: '/') - specify the folder where you want to upload the file. If the folder doesn't exist, it will be created.

let options = {
    ...,

    uploadParams: {
      dir: '/folder_name',
      ...
    }
  };
initialTab: string

default: 'UPLOAD'

Allow to choose the initial tab. Should be one of enabled modules.

let options = {
    ...,

    initialTab: 'UPLOAD'
  };
tagging: object

> key: string (require) - key to use image recognition technology

> executeAfterUpload: bool - will automatically generate tags on upload image based on image recognition technology

> autoTaggingButton: bool - add button which will automatically generate tags based on image recognition technology

> provider: string [google|imagga] - recognition provider

> confidence: number [0..100] - confidence of recognition

> limit: number - limit of tags generated by image recognition technology

let options = {
    ...,

    tagging: {
      executeAfterUpload: false,
      autoTaggingButton: true,
      provider: 'google',
      confidence: 60,
      limit: 10,
      key: 'xxxxx'
    }
  };
colorScheme: object

> active: string (default: 'default')- active theme scheme

> custom: object - custom color scheme

> custom.mainBackground: color - main background

> custom.navBackground: color - nav background

> custom.buttonBackground: color - button background

> custom.hoverButtonBackground: color - button background on hover

> custom.inputBackground: color - search field background

> custom.inputOutlineColor: color - search field outline

> custom.activeTabBackground: color - current nav tab background

> custom.text: color - text

> custom.title: color - title

> custom.inputTextColor: color - search field text

> custom.tabTextColor: color - nav tab text

> custom.activeTabTextColor: color - current nav tab text

> custom.buttonTextColor: color - button text

> custom.border: color - draggable boundaries border

let options = {
    ...,

    colorScheme: {
      active: 'custom',

      custom: {
        mainBackground: '#f5f5f5',
        navBackground: '#181830',
        buttonBackground: '#00707C',
        hoverButtonBackground: '#096868',
        inputBackground: '#fff',
        inputOutlineColor: '#4d90fe',
        activeTabBackground: '#40545b',
        text: '#5d636b',
        title: '#1e262c',
        inputTextColor: '#555555',
        tabTextColor: '#c0c1c1',
        activeTabTextColor: '#fff',
        buttonTextColor: '#fff',
        border: '#d8d8d8'
      }
    }
  };

Callbacks

onUpload(files: file[]): function (required)

Function to handle uploaded files.

let options = {
    ...,

    onUpload: (files) => {
      // do something
    }
  };

Methods

window.FilerobotUploader.init(options: {}): function

Initialization of Filerobot Uploader plugin.

window.FilerobotUploader.init(options);
window.FilerobotUploader.open(tab : string, options: {}): function

Open uploader modal.

tab :string (optional, default: 'UPLOAD') - allow to choose the initial tab (should be one of enabled modules)

options :{}

- options for tabs 
window.FilerobotUploader.open();
window.FilerobotUploader.close(): function

Close uploader modal.

window.FilerobotUploader.close();
window.FilerobotUploader.unmount(): function

Destroy uploader

window.FilerobotUploader.unmount();

Full features config example


    <script>
      let options = {
        modules: ['UPLOAD', 'MY_GALLERY', 'ICONS_GALLERY', 'IMAGES_GALLERY', 'TAGGING', 'IMAGE_EDITOR'],
        uploadParams: {
          dir: '/your_root_folder'
        },
        filerobotUploadKey: '0cbe9ccc4f164bf8be26bd801d53b132',
        container: 'example',
        openpixKey: 'xxxxxxxxxxxxxxx',
        initialTab: 'UPLOAD',
        folderBrowser: true,
        tagging: {
          executeAfterUpload: true,
          autoTaggingButton: true,
          provider: 'google',
          confidence: 60,
          limit: 10,
          key: 'aaaa'
        },
        language: 'en',

        colorScheme: {
          active: 'custom',
          custom: {
            mainBackground: '#f5f5f5',
            navBackground: '#181830',
            buttonBackground: '#00707C',
            hoverButtonBackground: '#096868',
            inputBackground: '#fff',
            inputOutlineColor: '#4d90fe',
            activeTabBackground: '#40545b',
            text: '#5d636b',
            title: '#1e262c',
            inputTextColor: '#555555',
            tabTextColor: '#c0c1c1',
            activeTabTextColor: '#fff',
            buttonTextColor: '#fff',
            border: '#d8d8d8'
          }
        },

        onUpload: (files) => {
          console.log('files: ', files);
          alert('Files uploaded successfully! check the console to see the uploaded files');
        }
      };

      let uploader = FilerobotUploader.init(options);
      let button = document.createElement('button');

      button.onclick = () => { uploader.open(); }
      button.innerText = 'Open Uploader';
      document.body.appendChild(button);
    </script>