filepond

filepond try out

by kzoon

HTML

<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">

<button id="testButton1" type="button">report</button>
<button id="testButton2" type="button">action</button>
<div id="results" style="height:100px">

</div>

<div id="testFilePond"></div>

JavaScript

var myButton1 = document.getElementById("testButton1");
var myButton2 = document.getElementById("testButton2");
var myResult = document.getElementById("results");

var inputElement = document.getElementById("testFilePond");


var pond = FilePond.create(
  inputElement, {
    maxFiles: 100,
    allowMultiple: true,
    allowDrop: true,
    dropOnPage: true,
    labelIdle: 'Drop your files here, or click to browse (custom caption)'

  }
);

pond.onaddfile = function(error, file){
  myResult.innerHTML += 'Loaded ' + file.filename + ' <br/>';
};

myButton1.onclick = function() {
  var files = pond.getFiles();
  myResult.innerHTML += files.length + ' files loaded <br/>';
};

myButton2.onclick = function() {

  var file =  pond.getFile();

  myResult.innerHTML += file.filename + " " + file.fileSize;

};