![\"edeit](\"https://codesandbox.io/static/img/play-codesandbox.svg\")
\r\n\t
\r\n\t\r\n\t\tDocs\r\n\t\t•\r\n\t\tDemo\r\n\t\t•\r\n\t\tCodeSandbox\r\n\t\r\n
\r\n\r\nThe 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.\r\n\r\n\r\n\t\r\n\t\t
\r\n\r\n### Methods\r\n\r\n#### `window.FilerobotUploader.init(config: {}, uploadHandler: callback)`: function\r\n\r\nInitialization of Filerobot Uploader plugin.\r\n\r\n#### `uploadHandler(files: file[], info: {})`: function\r\n\r\nFunction to handle uploaded files.\r\n\r\n* **files**: file[] - array of uploaded files\r\n\r\nexample response:\r\n\r\n```json\r\n[{\r\n \"uuid\": \"a955877f-c79d-5b7c-8f70-18e7a2950000\",\r\n \"name\": \"Screen Shot 2019-02-28 at 10.03.43 PM.png\",\r\n \"type\": \"image/png\",\r\n \"size\": 102069,\r\n \"sha1\": \"a91c1e7aea6aed05a22b42bc3f46326820e4275e\",\r\n \"meta\": { \"img_type\": \"PNG\", \"img_h\": 320, \"img_w\": 816 },\r\n \"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\",\r\n \"url_public\": \"https://scaleflex-tests-v5a.airstore.io/demo_filerobot_en/Screen Shot 2019-02-28 at 10.03.43 PM.png\",\r\n \"properties\": {\r\n \"description\": \"\",\r\n \"tags\": [\"Text\", \"Blue\", \"Font\", \"White\", \"Logo\", \"Azure\", \"Line\", \"Product\", \"Aqua\", \"Brand\"],\r\n \"lang\": \"en\",\r\n \"search\": \" Text Blue Font White Logo Azure Line Product Aqua Brand\"\r\n },\r\n \"overwrite\": false\r\n}]\r\n```\r\n* **info**: {} - additional information on upload\r\n\r\n* **info.stage**: string (upload|edit|select) - stage on which uploadHandler was triggered\r\n\r\n#### `window.FilerobotUploader.open(tab : string, options: {})`: function\r\n\r\nOpen uploader modal.\r\n\r\n* **tab**: string (optional, default: 'UPLOAD') - allow to choose the initial tab (should be one of enabled modules)\r\n\r\n* **options**: {} (optional) - options for tabs\r\n\r\n* **options.file**: {} (optional) - open Uploader to Tag or Edit specified file\r\n\r\n* **options.closeOnEdit**: bool (optional) - close Uploader on complete Tagging or Editing, default false\r\n\r\n* **options.closeOnSave**: bool (optional) - close Uploader on click \"save\" button in Tagging tab, default true\r\n\r\n#### `window.FilerobotUploader.close()`: function\r\n\r\nClose uploader modal.\r\n\r\n#### `window.FilerobotUploader.unmount()`: function\r\n\r\nDestroy uploader\r\n\r\n## React component usage\r\n\r\n### Installation\r\n\r\n```\r\n$ npm install --save filerobot-uploader\r\n```\r\n\r\n### Quick start\r\n\r\nWe provide easy way to integrate image uploader in your applications\r\n\r\n```javascript\r\nimport React, { Component } from 'react';\r\nimport { render } from 'react-dom';\r\nimport FilerobotUploader from 'filerobot-uploader';\r\n\r\n\r\nconst config = {\r\n modules: ['UPLOAD', 'MY_GALLERY', 'ICONS_GALLERY', 'IMAGES_GALLERY', 'TAGGING', 'IMAGE_EDITOR'],\r\n uploadParams: { dir:\"/demo_filerobot_en\" },\r\n filerobotUploadKey: '7cc1f659309c480cbc8a608dc6ba5f03',\r\n container: 'scaleflex-tests-v5a'\r\n}\r\n\r\nclass App extends Component {\r\n constructor() {\r\n super();\r\n\r\n this.state = {\r\n isShow: false\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n\r\n### Methods/Properties\r\n\r\n#### `opened`: bool (required)\r\n\r\n**default**: false\r\n\r\nTrigger to display the uploader widget.\r\n\r\n#### `initialTab`: string (optional)\r\n\r\n**default**: 'UPLOAD'\r\n\r\nAllow to choose the initial tab. Should be one of enabled modules.\r\n\r\n#### `config`: object (required)\r\n\r\nUploader config.\r\n\r\n#### `options`: object (optional)\r\n\r\n* **options.closeOnEdit**: bool (optional) - close Uploader on complete Tagging or Editing\r\n\r\n#### `onClose()`: function (required)\r\n\r\nClose uploader widget.\r\n\r\n#### `onUpload(files: file[], info: {})`: function (required)\r\n\r\nFunction to handle uploaded files.\r\n\r\n* **files**: file[] - array of uploaded files\r\n\r\nexample response:\r\n\r\n```json\r\n[{\r\n \"uuid\": \"a955877f-c79d-5b7c-8f70-18e7a2950000\",\r\n \"name\": \"Screen Shot 2019-02-28 at 10.03.43 PM.png\",\r\n \"type\": \"image/png\",\r\n \"size\": 102069,\r\n \"sha1\": \"a91c1e7aea6aed05a22b42bc3f46326820e4275e\",\r\n \"meta\": { \"img_type\": \"PNG\", \"img_h\": 320, \"img_w\": 816 },\r\n \"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\",\r\n \"url_public\": \"https://scaleflex-tests-v5a.airstore.io/demo_filerobot_en/Screen Shot 2019-02-28 at 10.03.43 PM.png\",\r\n \"properties\": {\r\n \"description\": \"\",\r\n \"tags\": [\"Text\", \"Blue\", \"Font\", \"White\", \"Logo\", \"Azure\", \"Line\", \"Product\", \"Aqua\", \"Brand\"],\r\n \"lang\": \"en\",\r\n \"search\": \" Text Blue Font White Logo Azure Line Product Aqua Brand\"\r\n },\r\n \"overwrite\": false\r\n}]\r\n```\r\n\r\n* **info**: {} - additional information on upload\r\n\r\n* **info.stage**: string (upload|edit|select) - stage on which uploadHandler was triggered\r\n\r\n## Configuration\r\n\r\n#### `container`: string (required)\r\n\r\nFilerobot Container name.\r\n\r\n```\r\nconfig.container = 'example';\r\n```\r\n\r\n#### `filerobotUploadKey`: string (required)\r\n\r\nUnique upload key for Filerobot.\r\n\r\n```\r\nconfig.filerobotUploadKey = 'xxxxxxxxxxxx';\r\n```\r\n\r\n#### `openpixKey`: string (required)\r\n\r\nKey for Openpix. Required if you are using \"ICONS_GALLERY\", \"IMAGES_GALLERY\"\r\n\r\n```\r\nconfig.openpixKey = 'xxxxxxxxxxxx';\r\n```\r\n\r\n#### `language`: string\r\n\r\n**default**: 'en'\r\n\r\nLanguage of uploader\r\n\r\navailable languages: en, fr, de, ru\r\n\r\n```\r\nconfig.language = 'en';\r\n```\r\n\r\n#### `modules`: string[]\r\n\r\n**default**: [\"UPLOAD\", \"MY_GALLERY\", \"ICONS_GALLERY\", \"IMAGES_GALLERY\"]\r\n\r\nModules (tabs) in file uploader modal.\r\n\r\n**Available modules**: **UPLOAD**, **MY_GALLERY**, **ICONS_GALLERY**, **IMAGES_GALLERY**, **TAGGING**, **IMAGE_EDITOR**\r\n\r\n```\r\nconfig.modules = ['UPLOAD', 'ICONS_GALLERY', 'TAGGING'];\r\n```\r\n\r\n#### `uploadParams`: object\r\n\r\n[see documentation](https://docs.airstore.io/go/airstore-public-documentation/en/airstore-api-reference/upload-files/#od_9911d3cb)\r\n\r\n* **dir**: string (default: '/') - specify the folder where you want to upload the file. If the folder doesn't exist, it will be created.\r\n\r\n```\r\nconfig.uploadParams = {\r\n dir: '/folder_name',\r\n ...\r\n};\r\n```\r\n\r\n#### `initialTab`: string\r\n\r\n**default**: 'UPLOAD'\r\n\r\nAllow to choose the initial tab. Should be one of enabled modules.\r\n\r\n```\r\nconfig.initialTab = 'UPLOAD';\r\n```\r\n\r\n#### `preUploadImageProcess`: bool\r\n\r\n**default**: false\r\n\r\nActivates Pre-upload process module which allows to transform images before uploading them to a server.\r\nAvailable operations: \"smart crop\", \"face detection\", \"resize\"\r\n\r\n```\r\nconfig.preUploadImageProcess = true;\r\n```\r\n\r\n#### `processBeforeUpload`: object\r\n\r\n**default**: null\r\n\r\nAuto pre-upload process which allows to transform images before uploading them to a server.\r\nAvailable operations: \"resize\"\r\n\r\n```\r\nconfig.processBeforeUpload = {\r\n operation: 'resize',\r\n widthLimit: 2000,\r\n heightLimit: 2000\r\n};\r\n```\r\n\r\n#### `folderBrowser`: object\r\n\r\n**default**: { show: true, rootFolder: '/' }\r\n\r\nAside menu to browse folders in your container.\r\n\r\n* `show`: bool - show folder manager\r\n\r\n* `rootFolder`: string - limit access to some root folder on server\r\n\r\n```\r\nconfig.folderBrowser = {\r\n show: true,\r\n rootFolder: '/'\r\n};\r\n```\r\n\r\n#### `sortParams`: object\r\n\r\n**default**: { show: true, field: 'name', order: 'asc' }\r\n\r\nDefault sorting for my gallery tab\r\n\r\n* `show`: bool - show sort module\r\n\r\n* `field`: string - sort field: ['name', 'type', 'uploaded_at', 'modified_at']\r\n\r\n* `order`: string - the sort order can be either asc (ascending/up) or desc (descending/down).\r\n\r\n```\r\nconfig.sortParams = {\r\n show: true,\r\n field: 'name',\r\n order: 'asc'\r\n};\r\n```\r\n\r\n#### `myGallery`: object\r\n\r\n* `upload`: bool | default: true - possibility to upload in my gallery tab\r\n\r\n```\r\nconfig.myGallery = {\r\n upload: true\r\n};\r\n```\r\n\r\n#### `tagging`: object\r\n\r\n* `key`: string (require) - key to use image recognition technology\r\n\r\n* `executeAfterUpload`: bool - initiates auto-tagging on upload images\r\n\r\n* `autoTaggingButton`: bool - adds button which will automatically generate tags based on image recognition technology\r\n\r\n* `provider`: string [google|imagga] - recognition provider\r\n\r\n* `confidence`: number [0..100] - confidence of recognition\r\n\r\n* `limit`: number - limit of tags generated by image recognition technology\r\n\r\n* `customFields`: array [{ name, metaKey, type }] - custom properties for an image. Where **name** - name of the field,\r\n**metaKey** - key/id of the field, **type** - type of the field: 'text', 'textarea'\r\n* `suggestionList`: array ['string'] - activates suggestion drop-down list of tags on typing;\r\n\r\n```javascript\r\nconfig.tagging = {\r\n executeAfterUpload: true,\r\n autoTaggingButton: true,\r\n provider: 'google',\r\n confidence: 60,\r\n limit: 10,\r\n key: 'xxxxx',\r\n customFields: [\r\n {\r\n name: 'Test name 1',\r\n metaKey: 'test_key',\r\n type: 'text'\r\n },\r\n {\r\n name: 'Test name 2',\r\n metaKey: 'test_key_2',\r\n type: 'textarea'\r\n }\r\n ],\r\n suggestionList: ['Color', 'Colored', 'Cobalt', 'Coral', 'Cobre']\r\n};\r\n```\r\n\r\n#### `extensions`: array\r\n\r\n**default**: [ ]\r\n\r\nAllows to limit files according to the extension on upload. Extension **jpg** = **jpeg** and vice versa.\r\n```\r\nconfig.extensions = ['jpg', 'png', 'pdf'];\r\n```\r\n\r\n#### `modifyURLButton`: bool\r\n\r\n**default**: true\r\n\r\nActivate \"Modify URL\" button.\r\n\r\n```\r\nconfig.modifyURLButton = true;\r\n```\r\n\r\n#### `deleteButton`: bool\r\n\r\n**default**: true\r\n\r\nDisplay/hide delete button on gallery tab.\r\n\r\n```\r\nconfig.deleteButton = true;\r\n```\r\n\r\n#### `colorScheme`: object\r\n\r\n* `active` string (default: 'default'; available schemes: light, dark, solarized, purple, lilac)- active theme scheme\r\n\r\n* `custom`: object - custom color scheme\r\n\r\n* `custom.mainBackground`: color - main background\r\n\r\n* `custom.navBackground`: color - nav background\r\n\r\n* `custom.buttonBackground`: color - button background\r\n\r\n* `custom.hoverButtonBackground`: color - button background on hover\r\n\r\n* `custom.inputBackground`: color - search field background\r\n\r\n* `custom.inputOutlineColor`: color - search field outline\r\n\r\n* `custom.activeTabBackground`: color - current nav tab background\r\n\r\n* `custom.text`: color - text\r\n\r\n* `custom.title`: color - title\r\n\r\n* `custom.inputTextColor`: color - search field text\r\n\r\n* `custom.tabTextColor`: color - nav tab text\r\n\r\n* `custom.activeTabTextColor`: color - current nav tab text\r\n\r\n* `custom.buttonTextColor`: color - button text\r\n\r\n* `custom.border`: color - draggable boundaries border\r\n\r\n\r\n```\r\nlet config = {\r\n ...,\r\n\r\n colorScheme: {\r\n active: 'custom',\r\n\r\n custom: {\r\n mainBackground: '#f5f5f5',\r\n navBackground: '#181830',\r\n buttonBackground: '#00707C',\r\n hoverButtonBackground: '#096868',\r\n inputBackground: '#fff',\r\n inputOutlineColor: '#4d90fe',\r\n activeTabBackground: '#40545b',\r\n text: '#5d636b',\r\n title: '#1e262c',\r\n inputTextColor: '#555555',\r\n tabTextColor: '#c0c1c1',\r\n activeTabTextColor: '#fff',\r\n buttonTextColor: '#fff',\r\n border: '#d8d8d8'\r\n }\r\n }\r\n};\r\n```\r\n\r\n#### `imageEditorConfig`: object\r\n\r\nFilerobot Image Editor Configuration. https://github.com/scaleflex/filerobot-image-editor#table-of-contents\r\n\r\n## Full features config example\r\n\r\n```html\r\n\r\n```\r\n\r\n## Filerobot UI Familiy\r\n\r\n* [Image Editor](https://github.com/scaleflex/filerobot-image-editor)\r\n* [JS Cloudimage Responsive](https://github.com/scaleflex/js-cloudimage-responsive)\r\n* [JS Cloudimage 360 view](https://github.com/scaleflex/js-cloudimage-360-view)\r\n* [React Cloudimage Responsive](https://github.com/scaleflex/react-cloudimage-responsive)\r\n* [Angular Cloudimage Responsive](https://github.com/scaleflex/ng-cloudimage-responsive)\r\n\r\n## Contributing!\r\n\r\nAll contributions are super welcome!\r\n\r\n\r\n## License\r\nFilerobot Uploader is provided under the [MIT License](https://opensource.org/licenses/MIT)\r\n","readmeFilename":"README.md"}