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.
Pintura the modern JavaScript Image Editor is what you're looking for. Pintura supports setting crop aspect ratios, resizing, rotating, cropping, and flipping images. Above all, it integrates beautifully with FilePond.
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>