Filepicker modal - custom solution for individual progress

by krystiangw

HTML

<script src="//api.filepicker.io/v2/filepicker.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<h4>Filepicker modal - simple custom solution for individual progress</h4>

<button id="fpButton">Pick many files </button>
<ul id="results">
</ul>

JavaScript

$('#fpButton').click(function(){
     $("#results").html('');
    filepicker.setKey("l5uQ3k7FQ5GoYCHyTdZV");
    filepicker.pickMultiple(
        {
            services: ['COMPUTER', 'FACEBOOK', 'BOX', 'GOOGLE_DRIVE', 'DROPBOX', 'IMAGE_SEARCH'],
            // Hide modal and handle progress in custom way
            hide:true,
            // With backgroundUpload:false set upload will start once upload button is clicked
            backgroundUpload:false
        },
      function(Blobs){  
          Blobs.forEach(addResults);
      },
      function(error){
          console.error(JSON.stringify(error));
      },
      onItemProgress
    );
 });

function onItemProgress(data){
    var selector = $('#element_'+data.id);
    if (!selector.length){
        $("#results")
        .append(
            '<li id="element_'+ data.id+ '">'+
            data.filename +
            '<div id="progress_'+data.id+'"></li>'
        );
    }
    if (data.progress === 100){
        addResults(data);
    } else {        
        $('#progress_'+data.id).progressbar({
          value: data.progress
        });
    }
}

function addResults(data){
    var selector = $('#element_'+data.id);
    selector.html('');
    selector.append(
        '<a target="_blank" href="'+
        data.url + '">'+ data.filename+'</a> Ready!'
    );
}