JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://static-cdn.kloudless.com/p/platform/sdk/kloudless.explorer.js"></script>
<h1>Welcome to the Kloudless JS File Explorer</h1>
<hr />
<h2>Documentation</h2>
<p>Documentation can be found <a href="https://developers.kloudless.com/docs#ui-tools" target="_blank">here</a></p>
<p>A simplified File Explorer can be found
<a href="http://jsfiddle.net/pseudonumos/PB565/embedded/" target="_blank">here</a>
</p>
<h2>Example</h2>
<button id="chooser">Choose a file</button>
<button id="saver">Save a file</button>
<h3>Event information</h3>
<div id="event-info"></div>
JavaScript
/*
* Welcome to the Kloudless JS File Explorer!
*
* To view the explorer in action click 'Result'!
*/
// File Explorer Configuration
var explorer = window.Kloudless.explorer({
// Chooser and Saver Options
app_id: 'iCZ_ICMy43H0NSoz0QbLvmyjzCHf2frAOPaBfWVgh9_vrFIM',
computer: true,
persist: "local",
services: ['all'],
display_backdrop: true,
create_folder: true,
retrieve_token: false,
tokens: [],
// Chooser options
multiselect: true,
link: true,
direct_link: false,
copy_to_upload_location: false,
upload_location_account: null,
upload_location_folder: null,
types: ['all'],
});
// Initializing Chooser
explorer.choosify(document.getElementById('chooser'));
// Initializing Saver
var files = [{
url: "https://s3-us-west-2.amazonaws.com/static-assets.kloudless.com/static/logo_white.png",
name: "kloudless-logo.png"
}];
explorer.savify(document.getElementById('saver'), files);
/********************************************************
The code below is used for setting event handlers
and not for initialization.
*********************************************************/
var events = {
'success': 'files',
'cancel': null,
'error': 'error',
'open': null,
'close': null,
'selected': 'files',
'addAccount': 'account',
'deleteAccount': 'account',
'startFileUpload': 'file',
'finishFileUpload': 'file'
}
for (var event in events) {
(function(evt) {
if (events[event]) {
explorer.on(evt, function(arg) {
printResult('Fired ' + evt + ' event.', true);
printResult(JSON.stringify(arg, null, 2), false);
});
} else {
explorer.on(evt, function() {
printResult('Fired ' + evt + ' event.', false);
});
}
})(event);
}
function printResult(result, clear) {
var eventContainer = document.getElementById('event-info');
// remove...