Skip to content
Edit, resize, and filter any image!
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
config change script path to the script Apr 8, 2019
examples release 1.1.7 🚀 Apr 23, 2019
projects fix problem with saving in right format Apr 23, 2019
.gitignore add build into Git repo Apr 23, 2019
.npmignore refactoring Feb 25, 2019 refactoring Feb 25, 2019
LICENSE refactoring Feb 25, 2019 release 1.1.7 🚀 Apr 23, 2019
babel.config.js refactoring Feb 25, 2019

Repository includes React version and JS wrapper for standalone usage

Release Free plan Contributions welcome License Scaleflex team


The Lounge

Filerobot Image Editor


The Filerobot Image Editor is the easiest way to integrate an easy-to-use image editor in your web application. Integrated with few lines of code, your users will be able to apply basic transformations like resize, crop, rotate and various filters to any image. Once edited, the Image Editor will return an URL to the resulting image and deliver it rocket fast over CDN all around the World.

Filerobot Image Editor


The example of Image Editor configuration using cloudimage service can be found here.


To use the plugin, you will need a Filerobot token. Don't worry, it only takes seconds to get one by registering here. Once your token is created, you can configure it as described below. This token allows you to use 25GB of image cache and 25GB of worldwide CDN traffic per month for free.

Table of contents

Standalone usage


Use latest CDNized plugin version

<script src=""></script>

Quick start

We provide easy way to integrate image editor in your applications

  const config = {
      filerobotUploadKey: '7cc1f659309c480cbc8a608dc6ba5f03',
      filerobotContainer: 'scaleflex-tests-v5a'

    const onComplete = function(url, file) {
      // do something with new url or file

    FilerobotImageEditor.init(config, onComplete);'');

edeit on codesandbox


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

Initialization of Filerobot Image Editor plugin. function

Open editor modal.

  • url: string (required) - image url to edit

FilerobotImageEditor.close(): function

Close editor modal.

FilerobotImageEditor.unmount(): function

Destroy editor

React component usage


$ npm install --save filerobot-image-editor

Quick start

We provide easy way to integrate image editor in your applications

import React, { Component } from 'react';
import { render } from 'react-dom';
import FilerobotImageEditor from 'filerobot-image-editor';

const config = {
  filerobotUploadKey: '7cc1f659309c480cbc8a608dc6ba5f03',
  filerobotContainer: 'scaleflex-tests-v5a',

class App extends Component {
  constructor() {

    this.state = {
      isShow: false,
      imgSrc: '//'

  showImageEditor = () => {
    this.setState({ isShow: true });

  onComplete = (newUrl) => {
    this.setState({ imgSrc: newUrl });

  onClose = () => {
    this.setState({ isShow: false });

  render() {
    const { imgSrc, isShow } = this.state;

    return (
        <h1>Filerobot Image Editor</h1>

          <img src={imgSrc} onClick={this.showImageEditor} alt="example image"/>


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

edeit on codesandbox


show: bool (required)

default: false

Trigger, to display the image editor widget.

config: object (required)

Image editor config.

onClose(): function (required)

Callback, triggers on close image editor widget.

onComplete(url: string, file: object): function (required)

Callback, triggers on complete processing image.


filerobotContainer: string (required)

Filerobot Container name.

filerobotContainer: 'demo'

filerobotUploadKey: string (required)

Unique upload key for Filerobot.

filerobotUploadKey: 'xxxxxxxxxxxx'

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

Filerobot UI Familiy


All contributions are super welcome!


Filerobot Image Editor is provided under the MIT License

You can’t perform that action at this time.