JSFiddle - React, Tailwind, and code Playground

by pseudonumos

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>

<h2>Example</h2>

<button id="explorer-test">Choose a file</button>

<button id="explorer-saver-test">Save a file</button>

<h3>File information</h3>

<div id="file-info"></div>

JavaScript

/*
 *    Welcome to the Kloudless JS File Explorer!
 *
 *    To view the explorer in action click 'Result'!
 */

var explorer = window.Kloudless.explorer({
    app_id: 'your app id',
    multiselect: true,
    computer: false,
    keys: ['account key 1', 
           'account key 2'],
    link: true,
    services: [],
    types: ['all']
});

explorer.on('success', function (files) {
    console.log('Successfully selected files: ', files);
    var fileContainer = document.getElementById('file-info');

    // remove all elements
    while (fileContainer.lastChild) {
        fileContainer.removeChild(fileContainer.lastChild);
    }
 
    var fileJSON = document.createElement('pre');
    fileJSON.appendChild(document.createTextNode(
        JSON.stringify(files, null, 2)));

    fileContainer.appendChild(fileJSON);
});
explorer.on('cancel', function () {
    console.log('File selection cancelled.');

    var fileContainer = document.getElementById('file-info');

    // remove all elements
    while (fileContainer.lastChild) {
        fileContainer.removeChild(fileContainer.lastChild);
    }

    var result = document.createElement('p');
    result.appendChild(document.createTextNode('File selection cancelled!'));
    fileContainer.appendChild(result);
});
explorer.on('error', function (error) {
    console.log('An error occurred: ', error);

    var fileContainer = document.getElementById('file-info');

    // remove all elements
    while (fileContainer.lastChild) {
        fileContainer.removeChild(fileContainer.lastChild);
    }
    
    var result = document.createElement('p');
    result.appendChild(document.createTextNode('An error occurred in file selection!'));
    fileContainer.appendChild(result);
});

explorer.on('addAccount', function(account) {
    console.log('Succesfully added account: ', account);
    
    var fileContainer = document.getElementById('file-info');

    // remove all elements
    while (fileContainer.lastChild) {
       ...