Filepond-File Uploads

OverviewOfficial Website

Filepond is 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.

CSS

<!-- Filepond css -->
<link rel="stylesheet" href="/assets/libs/filepond/filepond.min.css" type="text/css" />
<link rel="stylesheet" href="/assets/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.css">

Javascript

<!-- filepond js -->
<script src="/assets/libs/filepond/filepond.min.js"></script>
<script src="/assets/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.js"></script>
<script src="/assets/libs/filepond-plugin-file-validate-size/filepond-plugin-file-validate-size.min.js"></script>
<script src="/assets/libs/filepond-plugin-image-exif-orientation/filepond-plugin-image-exif-orientation.min.js"></script>
<script src="/assets/libs/filepond-plugin-file-encode/filepond-plugin-file-encode.min.js"></script>

Initjs (Custom js)

<!-- File upload js -->
<script src="/assets/js/pages/form-file-upload.init.js"></script>

Add Package

npm i filepond --save

Remove Package

npm uninstall filepond For you can removing specific package from package.json

Examples

Title Javascript

Multiple File Upload

Title	Javascript
Multiple File Upload	FilePond.registerPlugin( // encodes the file as base64 data FilePondPluginFileEncode, // validates the size of the file FilePondPluginFileValidateSize, // corrects mobile image orientation FilePondPluginImageExifOrientation, // previews dropped images FilePondPluginImagePreview ); var inputMultipleElements = document.querySelectorAll('input.filepond-input-multiple'); // loop over input elements Array.from(inputMultipleElements).forEach(function(inputElement) { // create a FilePond instance at the input element location FilePond.create(inputElement); })
Profile Picture Selection	FilePond.registerPlugin( // encodes the file as base64 data FilePondPluginFileEncode, // validates the size of the file FilePondPluginFileValidateSize, // corrects mobile image orientation FilePondPluginImageExifOrientation, // previews dropped images FilePondPluginImagePreview ); FilePond.create( document.querySelector('.filepond-input-circle'), { labelIdle: 'Drag & Drop your picture or Browse', imagePreviewHeight: 170, imageCropAspectRatio: '1:1', imageResizeTargetWidth: 200, imageResizeTargetHeight: 200, stylePanelLayout: 'compact circle', styleLoadIndicatorPosition: 'center bottom', styleProgressIndicatorPosition: 'right bottom', styleButtonRemoveItemPosition: 'left bottom', styleButtonProcessItemPosition: 'right bottom', } );

FilePond.registerPlugin(
    // encodes the file as base64 data
    FilePondPluginFileEncode,
    // validates the size of the file
    FilePondPluginFileValidateSize,
    // corrects mobile image orientation
    FilePondPluginImageExifOrientation,
    // previews dropped images
    FilePondPluginImagePreview
);

var inputMultipleElements = document.querySelectorAll('input.filepond-input-multiple');

// loop over input elements
Array.from(inputMultipleElements).forEach(function(inputElement) {
    // create a FilePond instance at the input element location
    FilePond.create(inputElement);
})

Profile Picture Selection

FilePond.registerPlugin(
    // encodes the file as base64 data
    FilePondPluginFileEncode,
    // validates the size of the file
    FilePondPluginFileValidateSize,
    // corrects mobile image orientation
    FilePondPluginImageExifOrientation,
    // previews dropped images
    FilePondPluginImagePreview
);

FilePond.create(
    document.querySelector('.filepond-input-circle'),
    {
        labelIdle: 'Drag & Drop your picture or Browse',
        imagePreviewHeight: 170,
        imageCropAspectRatio: '1:1',
        imageResizeTargetWidth: 200,
        imageResizeTargetHeight: 200,
        stylePanelLayout: 'compact circle',
        styleLoadIndicatorPosition: 'center bottom',
        styleProgressIndicatorPosition: 'right bottom',
        styleButtonRemoveItemPosition: 'left bottom',
        styleButtonProcessItemPosition: 'right bottom',
    }
);