Test FE Dropzone

by Vinod Chandru

HTML

<script src="https://static-cdn.kloudless.com/klouded-public-testing-dir/platform/sdk/kloudless.explorer.js"></script>
<h1>*TEST API* Kloudless JS File Explorer Dropzone</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>

<div id="dropzone" style="border-style:dashed; border-width:1px; width:500px;height:100px"></div>

<h3>File information</h3>

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

JavaScript

/*
 * Kloudless JS File Explorer Dropzone
 */

// Test drop zone.
var dropzone = window.Kloudless.dropzone({
    app_id: 'JXzWkmVgHmp4B_v4huIGRGFmQxvn_rYXgQOGUs5GFm87RBtm',
    elementId: 'dropzone', // Element to bind the dropzone to.
    multiselect: true, // To upload more than 1 file.
    // Below options apply to the File Explorer that appears when the
    // dropzone is clicked.
    computer: true,
    link: true,
    services: ['all'],
    types: ['all']
});

dropzone.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);
});

dropzone.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);
});

dropzone.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);
});

dropzone.on('addAccount', function (account) {
    console.log('Succesfully added account: ', account);

    var fileContainer =...