Javascript Drag and Drop File Upload

Category: Text & Input | February 6, 2019
Author: pqina
Official Page: Go to Website
Last Update: December 3, 2019
License: MIT

The “filepond.js” is a flexible and fun Javascript Drag and Drop File Upload library which also has a unique design. It is easy to implement on any type of site whether its plain HTML or CMS based website.

Instead of adding a boring file uploader, Let’s try out this amazing drag and drop file uploader to make your site contact for user forms look nice.

If you want to get the result as preview then follow the customizations instruction here.

The plugin file pond support Multiple File Upload with Progress Bar and allow you to implement different file uploader in different designs. It helps you to create a customizable input file uploader on the web page.

If we talk about the features, It comes with file preview, allows multi-file upload and many more features. The licensed of this item is under GPL 3.0.

How to Use Javascript Drag and Drop File Upload

This plugin comes with two important files that need to include to start implementing on your web page. You need to add the filepond.css and filepond.js.

<link href="filepond.css" rel="stylesheet">
<script src="filepond.js"></script>

Next, We will create the HTML and all you have to create the file upload input type field. Simply define the class name filepond and set the attribute according to your requirements.

In our below example, we set the limitation of max file size 3MB and max upload files (3) at a time.

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

After that, we will Initialize the plugin and you are done.


You can also handle the Event and hooks.

  // event handlers
  oninit: [null, Type.FUNCTION],
  onwarning: [null, Type.FUNCTION],
  onerror: [null, Type.FUNCTION],
  onaddfilestart: [null, Type.FUNCTION],
  onaddfileprogress: [null, Type.FUNCTION],
  onaddfile: [null, Type.FUNCTION],
  onprocessfilestart: [null, Type.FUNCTION],
  onprocessfileprogress: [null, Type.FUNCTION],
  onprocessfileabort: [null, Type.FUNCTION],
  onprocessfilerevert: [null, Type.FUNCTION],
  onprocessfile: [null, Type.FUNCTION],
  onremovefile: [null, Type.FUNCTION],
  onpreparefile: [null, Type.FUNCTION],
  onupdatefiles: [null, Type.FUNCTION],

  // hooks
  beforeAddFile: [null, Type.FUNCTION],
  beforeRemoveFile: [null, Type.FUNCTION],

You Might Be Interested In:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.