How to install 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.
Created

FilePond is a JavaScript library that brings silky smooth drag n' drop file uploading.

FilePond is exposed as a module wrapped in a UMD. It can be added to a project using Node Package Manager, from a CDN or by adding the files manually.

Installation

You can download the latest version of FilePond from the GitHub releases or use a FilePond CDN.

Cloning a repository

You can clone a repository from GitHub.com to your local computer.
Cloning with HTTPS URLs
git clone https://github.com/pqina/filepond.git
Cloning with SSH URLs
git clone [email protected]:pqina/filepond.git
Cloning with GitHub CLI
gh repo clone pqina/filepond

Install via NPM package

Run the following command to locally install the package and its dependencies with NPM.
Downloading and installing packages locally
npm i filepond
npm install filepond
yarn add filepond
Downloading and installing packages globally
npm i -g filepond
yarn global add filepond
Install Specific Version of a Package
npm install [email protected]
yarn add [email protected]
Bower
bower install filepond

Example

Multiple File Upload

Use the create method to progressively enhance a basic file input into a FilePond element. The target (in this case the file input element) will automatically be replaced by a FilePond element.

<input type="file" 
    class="filepond"
    name="filepond" 
    multiple 
    data-allow-reorder="true"
    data-max-file-size="3MB"
    data-max-files="3">

<script>
FilePond.registerPlugin(
  FilePondPluginImagePreview,
  FilePondPluginImageExifOrientation,
  FilePondPluginFileValidateSize,
  FilePondPluginImageEdit
);

// Select the file input and use 
// create() to turn it into a pond
FilePond.create(
  document.querySelector('input')
);
</script>

MORE FROM THE INSTALLMD