Filepicker Multiple Demo

A simple demo.

by filepicker

HTML

<script src="http://api.localhost.com:5000/v0/filepicker.js"></script>
<input type="filepicker-dragdrop"
data-fp-apikey="GET_A_FILEPICKER_APIKEY_AT_FILEPICKER.IO"
data-fp-button-text="Pick a file"
data-fp-drag-text="Or even drop something here"
data-fp-option-modal="false"
data-fp-option-multiple="true"
onchange="alert(JSON.stringify(event.files))"
name="dragDrop"/>

<hr />

<button id="somebutton">Choose Files</button>

CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

button {
    margin: 30px 0 30px 10px;
    display: inline-block;
    padding: 4px 10px 4px;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #CCC;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer
    background-color: #05C;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color: white;
    background-color: #0074CC;
    background-image: -moz-linear-gradient(top, #08C, #05C);
    background-image: -ms-linear-gradient(top, #08C, #05C);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08C), to(#05C));
    background-image: -webkit-linear-gradient(top, #08C, #05C);
    background-image: -o-linear-gradient(top, #08C, #05C);
    background-image: linear-gradient(top, #08C, #05C);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
    border-color: #05C #05C #003580;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}

JavaScript

document.getElementById('somebutton').onclick = function(){
    filepicker.getFile(['text/plain','image/jpeg'], {
        'notification_url': 'http://dchang.mit.edu/endpoints/mail.php',
    'multiple': true, 'container': 'window',
    'services':[filepicker.SERVICES.COMPUTER,
        filepicker.SERVICES.FACEBOOK,
        filepicker.SERVICES.GMAIL]
     }, function(response){
          alert(JSON.stringify(response));
     })
    };