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
yarn add filepond --save
Remove Package
yarn remove filepond or you can remove package by removing specific package from package.json
Examples
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',
    }
);
© Velzon.
Design & Develop by Themesbrand