JSFiddle - React, Tailwind, and code Playground

by Vinod Chandru

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>

<h3>File information</h3>

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

JavaScript

http://jsfiddle.net/PB565/45/embedded/var explorer = window.Kloudless.explorer({
    app_id: 'u7upib0FQ1VePGMvD6FIBvPj3PEKIX0f1BVZDUk9HBAJMxSG',
    multiselect: true,
    computer: true,
    link: true,
    direct_link: true,
    types: ['pdf']
});

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.choosify(document.getElementById('explorer-test'));
explorer.choose();