Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

filepond

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

filepond

FilePond, Where files go to stretch their bits.

1.0.7
Source
npm

Version published: 7 years ago

Weekly downloads: 159K; decreased by-3.32%

Maintainers: 1

Weekly downloads

Created: 7 years ago

What is filepond?

FilePond is a JavaScript library that allows you to upload files with a sleek, customizable interface. It supports multiple file uploads, image previews, drag-and-drop functionality, and integrates well with various frameworks like React, Vue, and Angular.

What are filepond's main functionalities?

Basic File Upload

This code snippet demonstrates how to create a basic file upload interface using FilePond. It initializes FilePond on an input element of type 'file'.

<script>
  const inputElement = document.querySelector('input[type="file"]');
  const pond = FilePond.create(inputElement);
</script>

Image Preview

This code snippet shows how to add image preview functionality to the file upload interface. It registers the Image Preview plugin and initializes FilePond on an input element.

<script>
  FilePond.registerPlugin(FilePondPluginImagePreview);
  const inputElement = document.querySelector('input[type="file"]');
  const pond = FilePond.create(inputElement);
</script>

Drag and Drop

This code snippet demonstrates how to enable drag-and-drop functionality for file uploads. It initializes FilePond with options to allow dropping files on the page or on the file input element.

<script>
  const pond = FilePond.create(
    document.querySelector('input[type="file"]'),
    {
      dropOnPage: true,
      dropOnElement: true
    }
  );
</script>

Server Integration

This code snippet shows how to integrate FilePond with a server endpoint for handling file uploads. It initializes FilePond with a server option pointing to the API endpoint.

<script>
  const pond = FilePond.create(
    document.querySelector('input[type="file"]'),
    {
      server: '/api'
    }
  );
</script>

Other packages similar to filepond

A JavaScript file upload plugin that's easy to setup and a joy to use.

Beautiful animations, fast uploads with client-side image optimization, and a great, accessible, user experience.

Learn more about FilePond

Quick Start

Install from NPM

npm install filepond

Then import in your project:

import { FilePond } from 'filepond';

Or get from a CDN

<!-- add to document <head> -->
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">

<!-- add before </body> -->
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

Now you can turn an <input type="file"> into a FilePond.

<input type="file" class="filepond'>

<script>
FilePond.parse(document.body);
</script>

License terms

The free version of FilePond is licensed under GPLv3.

What does this mean?

You may use this lib for any private projects which you do not plan to share or sell
You may use this lib for public projects as long as those projects are licensed under GPLv3 as well.
You may not remove the license and PQINA attribution from source files

For more information read the repository license details.

If the GPLv3 license does not match your use case, the commercial license might be more suitable.

Commercial use

Interested in using FilePond for a project without being restricted by the GPLv3 requirements, view the license options on the pricing page.

Keywords

FAQs

What is filepond?

Is filepond popular?

Is filepond well maintained?

Package last updated on 28 Feb 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install