Skip to content
The Filerobot Uploader is a multi-function Uploader that will make uploads super easy on your web and mobile applications. With few lines of code, you will get a state of the art Uploader and enable your users to upload media, files and any assets via Filerobot's reverse CDN. Files are stored into scalable and flexible Cloud storage, optimized a…
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config refactoring May 30, 2019
examples
projects add initial searchPhrase Jul 2, 2019
.gitignore
.npmignore
Changelog.md
LICENSE
README.md
babel.config.js
package.json

README.md

Repository includes React version and JS wrapper for standalone usage

Release Free plan Contributions welcome License Scaleflex team

Tweet

The Lounge

Filerobot Uploader

DocsDemoCodeSandbox

The Filerobot Uploader is a multi-function Uploader that will make uploads super easy on your web and mobile applications. With few lines of code, you will get a state of the art Uploader and enable your users to upload media, files and any assets via Filerobot's reverse CDN. Files are stored into scalable and flexible Cloud storage, optimized and delivered over CDN to your end users rocket fast. Features include inline image editing, auto-tagging, auto-cropping and many more.

The Lounge

Demo

Table of contents

Standalone usage

Installation

Use latest CDNized plugin version

<script src="https://cdn.scaleflex.it/plugins/filerobot-uploader/2.2.0/filerobot-uploader.min.js"></script>

You may also use major version number instead of fixed version to have the latest version available.

<script src="https://cdn.scaleflex.it/plugins/filerobot-uploader/2/filerobot-uploader.min.js"></script>

Quick start

To use the Filerobot Uploader in your application, you need to first create a free Filerobot account here. Once registered, you will obtain your container name and filerobotUploadKey to configure the Uploader in your application:

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

  uploader.open();
</script>

edeit on codesandbox

Methods

window.FilerobotUploader.init(config: {}, uploadHandler: callback): function

Initialization of Filerobot Uploader plugin.

uploadHandler(files: file[], info: {}): function

Function to handle uploaded files.

  • files: file[] - array of uploaded files

example response:

[{
  "uuid": "a955877f-c79d-5b7c-8f70-18e7a2950000",
  "name": "Screen Shot 2019-02-28 at 10.03.43 PM.png",
  "type": "image/png",
  "size": 102069,
  "sha1": "a91c1e7aea6aed05a22b42bc3f46326820e4275e",
  "meta": { "img_type": "PNG", "img_h": 320, "img_w": 816 },
  "url_permalink": "https://scaleflex-tests-v5a.api.airstore.io/v1/get/_/a955877f-c79d-5b7c-8f70-18e7a2950000/Screen Shot 2019-02-28 at 10.03.43 PM.png",
  "url_public": "https://scaleflex-tests-v5a.airstore.io/demo_filerobot_en/Screen Shot 2019-02-28 at 10.03.43 PM.png",
  "properties": {
    "description": "",
    "tags": ["Text", "Blue", "Font", "White", "Logo", "Azure", "Line", "Product", "Aqua", "Brand"],
    "lang": "en",
    "search": " Text Blue Font White Logo Azure Line Product Aqua Brand"
  },
  "overwrite": false
}]
  • info: {} - additional information on upload

  • info.stage: string (upload|edit|select) - stage on which uploadHandler was triggered

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: {} (optional) - options for tabs

  • options.file: {} (optional) - open Uploader to Tag or Edit specified file

  • options.closeOnEdit: bool (optional) - close Uploader on complete Tagging or Editing

window.FilerobotUploader.close(): function

Close uploader modal.

window.FilerobotUploader.unmount(): function

Destroy uploader

React component usage

Installation

$ npm install --save filerobot-uploader

Quick start

We provide easy way to integrate image uploader in your applications

import React, { Component } from 'react';
import { render } from 'react-dom';
import FilerobotUploader from 'filerobot-uploader';


const config = {
  modules: ['UPLOAD', 'MY_GALLERY', 'ICONS_GALLERY', 'IMAGES_GALLERY', 'TAGGING', 'IMAGE_EDITOR'],
  uploadParams: { dir:"/demo_filerobot_en" },
  filerobotUploadKey: '7cc1f659309c480cbc8a608dc6ba5f03',
  container: 'scaleflex-tests-v5a'
}

class App extends Component {
  constructor() {
    super();

    this.state = {
      isShow: false
    }
  }

  render() {
    return (
      <div>
        <h1>React Example</h1>
        <button onClick={() => { this.setState({ isShow: true }); }}>Click</button>
        <FilerobotUploader
          opened={this.state.isShow}
          config={config}
          onClose={() => { this.setState({ isShow: false }); }}
          onUpload={(img) => { console.log(img); }}
        />
      </div>
    )
  }
}

render(<App/>, document.getElementById('app'));

edeit on codesandbox

Methods/Properties

opened: bool (required)

default: false

Trigger to display the uploader widget.

initialTab: string (optional)

default: 'UPLOAD'

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

config: object (required)

Uploader config.

options: object (optional)

  • options.closeOnEdit: bool (optional) - close Uploader on complete Tagging or Editing

onClose(): function (required)

Close uploader widget.

onUpload(files: file[], info: {}): function (required)

Function to handle uploaded files.

  • files: file[] - array of uploaded files

example response:

[{
  "uuid": "a955877f-c79d-5b7c-8f70-18e7a2950000",
  "name": "Screen Shot 2019-02-28 at 10.03.43 PM.png",
  "type": "image/png",
  "size": 102069,
  "sha1": "a91c1e7aea6aed05a22b42bc3f46326820e4275e",
  "meta": { "img_type": "PNG", "img_h": 320, "img_w": 816 },
  "url_permalink": "https://scaleflex-tests-v5a.api.airstore.io/v1/get/_/a955877f-c79d-5b7c-8f70-18e7a2950000/Screen Shot 2019-02-28 at 10.03.43 PM.png",
  "url_public": "https://scaleflex-tests-v5a.airstore.io/demo_filerobot_en/Screen Shot 2019-02-28 at 10.03.43 PM.png",
  "properties": {
    "description": "",
    "tags": ["Text", "Blue", "Font", "White", "Logo", "Azure", "Line", "Product", "Aqua", "Brand"],
    "lang": "en",
    "search": " Text Blue Font White Logo Azure Line Product Aqua Brand"
  },
  "overwrite": false
}]
  • info: {} - additional information on upload

  • info.stage: string (upload|edit|select) - stage on which uploadHandler was triggered

Configuration

container: string (required)

Filerobot Container name.

config.container: 'example';

filerobotUploadKey: string (required)

Unique upload key for Filerobot.

config.filerobotUploadKey: 'xxxxxxxxxxxx';

openpixKey: string (required)

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

config.openpixKey: 'xxxxxxxxxxxx';

language: string

default: 'en'

Language of uploader

available languages: en, fr, de, ru

config.language: 'en';

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

config.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.
config.uploadParams: {
    dir: '/folder_name',
    ...
};

initialTab: string

default: 'UPLOAD'

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

config.initialTab: 'UPLOAD';

preUploadImageProcess: bool

default: false

Pre-upload process which allows to transform images before uploading them to a server. Available operations: "smart crop", "face detection", "resize"

config.preUploadImageProcess: true;

folderBrowser: bool

default: true

Aside menu to browse folders in your container.

config.folderBrowser: true;

tagging: object

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

  • autoTaggingButton: bool - adds 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

config.tagging: {
    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 config = {
    ...,

    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'
       }
    }
};

Full features config example

<script>
  let config = {
    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'
      }
    }
  };
  let onUpload = (files) => {
    console.log('files: ', files);
    alert('Files uploaded successfully! check the console to see the uploaded files');
  };
  let uploader = FilerobotUploader.init(config, onUpload);
  let button = document.createElement('button');

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

Filerobot UI Familiy

Contributing!

All contributions are super welcome!

License

Filerobot Uploader is provided under the MIT License

You can’t perform that action at this time.