Filepicker Full Demo

A multipart demo.

by filepicker

HTML

<script src="//api.filepicker.io/v0/filepicker.js"></script>
<input type="filepicker-dragdrop"
data-fp-apikey="AOeGWG94QT4CQF1ejZB5az"
data-fp-button-text="Pick a file"
data-fp-drag-text="Or even drop something here"
data-fp-mimetypes="application/pdf, image/*, text/plain"
data-fp-option-modal="true"
data-fp-option-multiple="true"
onchange="console.log(event.files)"
name="dragDrop"/>

<hr >

<button 
data-fp-apikey="AOeGWG94QT4CQF1ejZB5az"
data-fp-mimetype="image/png" 
data-fp-url="http://www.filepicker.io/static/img/success.png"
data-fp-option-modal="true"
>Save File</button>

<br />

<input type="file" onchange="if (this.value) {
        $('#localSpinner').show();
        filepicker.uploadFile(this, function(data){
            console.log(data);
            $('#localSpinner').hide();
        });
    }
"/>

<br />

<div id="exampleDropPane">Drop Here</div>

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

filepicker.setKey('AOeGWG94QT4CQF1ejZB5az');

filepicker.makeDropPane($('#exampleDropPane')[0], {
    dragEnter: function() {
        $("#exampleDropPane").html("Drop to upload").css({
            'backgroundColor': "#E0E0E0",
            'border': "1px solid #000"
        });
    },
    dragLeave: function() {
        $("#exampleDropPane").html("Drop files here").css({
            'backgroundColor': "#F6F6F6",
            'border': "1px dashed #666"
        });
    },
    progress: function(percentage) {
        $("#exampleDropPane").text("Uploading ("+percentage+"%)");
    },
    done: function(data) {
        console.log(JSON.stringify(data));
    },
    error: function(type, message){
        console.log(type + " " + message);
    }
});