JSFiddle - React, Tailwind, and code Playground

by pseudonumos

HTML

<script src="https://s3-us-west-2.amazonaws.com/kloudless-static-assets/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>

<h3>File information</h3>

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

JavaScript

var explorer = window.Kloudless.explorer({
    app_id: 'iCZ_ICMy43H0NSoz0QbLvmyjzCHf2frAOPaBfWVgh9_vrFIM',
    multiselect: true,
    computer: true,
    link: true,
    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.choosify(document.getElementById('explorer-test'));