Filestack Picker - Custom CSS B

by jeffreyqporter

HTML

<script src="//static.filestackapi.com/filestack-js/1.x.x/filestack.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">

CSS

* {
 font-size: 100%;
 font-family: 'Permanent Marker', cursive;
}

.fsp-drop-area-container {
    height: 100%;
    padding: 30px;
    background-repeat: no-repeat;
    background: url(https://cdn.filestackcontent.com/flop/Hb77NDvSROPWwd04SVFk);
}

.fsp-drop-area { 
 background: url(https://cdn.filestackcontent.com/flop/Hb77NDvSROPWwd04SVFk);
    transition: none !important;
}

.fsp-navbar--local_file_system {
background: url(https://cdn.filestackcontent.com/output=f:png/resize=w:22,h:22/8txnYgB5QK2hHv5DbbAW) !important;
background-repeat: no-repeat !important;
}
.fsp-icon--local_file_system {
  background: url(https://cdn.filestackcontent.com/output=f:png/resize=w:30,h:30/8txnYgB5QK2hHv5DbbAW) !important;
  background-repeat: no-repeat !important;
}

.fsp-footer {
 display: none !important;
}


.fsp-select-labels {
    background: url(https://cdn.filestackcontent.com/output=f:png/resize=w:88,h:64/EVzwSb9iSheY3aN2OSmA) !important;
    transition: all .2s ease-out;
    background-repeat: no-repeat !important;
    background-position: 50% 0 !important;
}

.fsp-select-labels--active {
    background: url(https://cdn.filestackcontent.com/output=f:png/resize=w:88,h:64/EVzwSb9iSheY3aN2OSmA) !important;
    transition: all .2s ease-out;
    background-repeat: no-repeat !important;
    background-position: 50% 0 !important;

}
.fsp-icon--facebook {
    background: url(https://static.filestackapi.com/picker/1.1.4/assets/images/icon-facebook.svg) !important;
}

.fsp-drop-area {
    border: 2px dotted #bdbdbd !important;
}

.fsp-header {
  background-color: silver !important;
}
.fsp-source-list {
  background-color: silver !important;
}

.fsp-icon--close-modal {
  background: url(https://cdn.filestackcontent.com/output=f:png/resize=w:18,h:18/pWVNhU3iRZmN1bjkinpT) !important;
  background-repeat: no-repeat !important;
}

JavaScript

window.addEventListener('DOMContentLoaded', function () {
  const apikey = 'ARVNFDkIFTCy2nOXvYSoLz';
  const client = filestack.init(apikey);
  const options = {
    fromSources: ['local_file_system'],
    maxFiles: 20,
    uploadInBackground: false,
    onOpen: () => console.log('opened!'),
    onUploadDone: (res) => console.log(res),
  };
  client.picker(options).open();
});