jQuery FilePond is a handy jQuery adapter for FilePond, a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.
Install from npm
npm install jquery-filepond --saveOr form a CDN:
<input type="file" class="my-pond" name="filepond"/>
<!-- include jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<!-- include FilePond library -->
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
<!-- include FilePond plugins -->
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
<!-- include FilePond jQuery adapter -->
<script src="https://unpkg.com/jquery-filepond/filepond.jquery.js"></script>
<script>
$(function(){
// First register any plugins
$.fn.filepond.registerPlugin(FilePondPluginImagePreview);
// Turn input element into a pond
$('.my-pond').filepond();
// Set allowMultiple property to true
$('.my-pond').filepond('allowMultiple', true);
// Listen for addfile event
$('.my-pond').on('FilePond:addfile', function(e) {
console.log('file added event', e);
});
// Manually add a file using the addfile method
$('.my-pond').first().filepond('addFile', 'index.html').then(function(file){
console.log('file added', file);
});
});
</script>