Click on "Upload Image" to upload from your computer, link, or find image in free galleries
Use latest CDNized plugin version
<script src="https://js.filerobot.com/filerobot-uploader.last.js"></script>
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>
Filerobot Container name.
let options = {
...,
container: 'example'
};
Unique upload key for Filerobot.
let options = {
...,
filerobotUploadKey: 'xxxxxxxxxxxx'
};
Key for Openpix. Required if you are using "ICONS_GALLERY", "IMAGES_GALLERY"
let options = {
...,
openpixKey: 'xxxxxxxxxxxx'
};
default: 'en'
Language of uploader
available languages: en, fr, de, ru
let options = {
...,
language: 'en'
};
default: true
Aside menu to browse folders in your container
let options = {
...,
folderBrowser: true
};
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']
};
> 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',
...
}
};
default: 'UPLOAD'
Allow to choose the initial tab. Should be one of enabled modules.
let options = {
...,
initialTab: 'UPLOAD'
};
> 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'
}
};
> 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'
}
}
};
Function to handle uploaded files.
let options = {
...,
onUpload: (files) => {
// do something
}
};
Initialization of Filerobot Uploader plugin.
window.FilerobotUploader.init(options);
Open uploader modal.
tab :string (optional, default: 'UPLOAD') - allow to choose the initial tab (should be one of enabled modules)
options :{}
- options for tabswindow.FilerobotUploader.open();
Close uploader modal.
window.FilerobotUploader.close();
Destroy uploader
window.FilerobotUploader.unmount();
<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>