[Upload Anything] Elegant Multiple File Uploading With JavaScript | filepond

Multiple File Upload is a JavaScript library that can load anything you throw at it, optimize images for faster loading processes, and provide an impressive and easy-to-access user experience.

Filepond is a JavaScript file that adds a plugin that helps you create elegant, versatile, customizable, drag-and-drop files entered on the internet web page.

Features

  • Accepts directoriesfiles, blobs, local URLs, remote URLs, and Data URIs.
  • Drop files, select on the filesystem, copy and paste files, or add files using the API.
  • Async uploads with AJAX support chunk uploads, can encode files as base64 data, and send them along from post.
  • Accessible, tested with AT software like VoiceOver and JAWS, navigable by Keyboard.
  • Image optimization, automatic image resizing, cropping, filtering, and fixing EXIF orientation.
  • Responsive, automatically scales to available space, and is functional on both mobile and desktop devices.

Must Read – Merge Multiple JSON Files in Vanilla JavaScript and HTML

How to make use of it:

1. Install using npm:

npm install filepond

2. Then import in your project:

import * as FilePond from 'filepond';

// Create a multi file upload component
const pond = FilePond.create({
    multiple: true,
    name: 'filepond'
});

// Add it to the DOM
document.body.appendChild(pond.element);

3. Or get it from a CDN:

<!DOCTYPE html>
<html>
<head>
  <title>FilePond from CDN</title>

  <!-- Filepond stylesheet -->
  <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">

</head>
<body>

  <!-- We'll transform this input into a pond -->
  <input type="file" class="filepond">

  <!-- Load FilePond library -->
  <script src="https://unpkg.com/filepond/dist/filepond.js"></script>

  <!-- Turn all file input elements into ponds -->
  <script>
  FilePond.parse(document.body);
  </script>

</body>
</html>

4. The locale folder contains different language files, PR’s are welcome, you can use locale files like this:

import pt_BR from 'filepond/locale/pt-br.js';

FilePond.setOptions(pt_BR);

Must Read – HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

FilePond Plugins

  • File encode
  • File rename
  • File size validation
  • File type validation
  • File metadata
  • File poster
  • Image editor
  • Image size validation
  • Image preview
  • Image crop
  • Image filter
  • Image resize
  • Image transform
  • Image EXIF orientation
  • Image overlay (nielsboogaard/filepond-plugin-image-overlay)
  • Media preview (nielsboogaard/filepond-plugin-media-preview)
  • Media preview + PDF preview (ErnestBrandi/filepond-plugin-media-preview)
  • Get file (nielsboogaard/filepond-plugin-get-file)
  • Zip Directory Uploads (tzsk/filepond-plugin-zipper)
  • PDF Preview (Adri-Glez/filepond-plugin-pdf-preview
  • PDF Convert (alexandreDavid/filepond-plugin-pdf-convert)
  • Copy Path (jnkn6/filepond-plugin-copy-path)

Must Read – Easy Toggle Multiple State Buttons In jQuery | Toggle.js

Adapters

  • React
  • Vue
  • Svelte
  • jQuery
  • Angular
  • Angular 1 (johnnyasantoss/angularjs-filepond)
  • Ember (alexdiliberto/ember-filepond)

Must Read – Drag and Drop File Upload Plugin for Bootstrap 4 | bs-dropzone.js

Backend

  • PHP
  • Django (ImperialCollegeLondon/django-drf-filepond)
  • Laravel (Sopamo/laravel-filepond)
  • Laravel (Albert221/laravel-filepond)
  • SilverStripe (lekoala/silverstripe-filepond)

Read More – 

Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader
Advanced Drag and Drop File Picker for Uploader | jquery-formhelper


See Demo And Download

File Input Enhancement

Official Website(pqina): Click Here

This superior jQuery/javascript plugin is developed by pqina. For extra Advanced Usage, please go to the official website.

Share