Introduction to Minio [13] introduction and introduction of open source front-end upload file components Uppy, filepond and dropzone


Before, we used WebUploader to upload files, which was developed by Baidu, but no new version has been released since 2014. Therefore, we studied other open-source Web components, with better interface and more powerful functions. The following are some examples and can be used for reference under the introductory experience.


GitHub address
Official documents

brief introduction

Uppy is a stylish modular JavaScript file uploader that integrates seamlessly with any application. It is fast and has an easy to understand API.

  • Get files from local disk, remote URL, Google Drive, Dropbox, Box, Instagram or take and record self photos with camera
  • Preview and edit metadata with a beautiful interface
  • Upload to the final destination, processing / coding can be selected


  • Lightweight, plug-in based modular architecture, lightweight dependency ⚑
  • File uploads can be recovered through the open tus standard, so large uploads can avoid network failures
  • Support the selection of files from the following locations: webcam, Dropbox, Box, Google Drive, Instagram, bypass the user's device as much as possible, and directly synchronize between servers through @ uppy / company
  • It is applicable to the back-end of file encoding and processing, such as Transloadit, without using it (you only need to launch your own Apache/Nginx/Node/FFmpeg/etc back-end)
  • Smooth user interface ✨
  • Optional file recovery using Golden Retriever (after browser crash)
  • Multilingualism (i18n) 🌍
  • Build with accessibility in mind
  • Always free for all the world (such as beer) 🍺, Pisa πŸ•οΌŒ And freedom πŸ—½)
  • As cute as a dog, also accept cat pictures 🐢

Getting started

Add a page, introduce uppy JS and CSS, and then create a div to display the file upload console. Finally, create an uppy object, and set the upload path and some parameters.

<!doctype html>
    <meta charset="utf-8">
    <link href="" rel="stylesheet">
<div id="drag-drop-area"></div>

<script src=""></script>
    var uppy = new Uppy.Core()
        .use(Uppy.Dashboard, {
            inline: true,
            target: '#drag-drop-area',
        .use(Uppy.XHRUpload, {
            id: 'XHRUpload',
            endpoint: '/file/upload',
            method: 'post',
            formData: true,
            fieldName: 'file',
            bundle: true,
            timeout: 30 * 1000, // default 30s
            limit: 0, // Limit the amount of uploads going on at the same time.

    uppy.on('complete', (result) => {
        console.log('Upload complete! We've uploaded these files:', result.successful)

Then visit the page and you can see a very simple upload page. You can set Chinese with reference to the official documents.

Select a file or directly drag the file to the console, click upload file, and the file will be uploaded successfully. The whole interface and process are still relatively simple.


brief introduction

GitHub address
Official website address
filepond is a JavaScript library that can upload anything you throw at it, optimize images to speed up upload, and provide an excellent, accessible and silky user experience. After all, it can be easily integrated with the following frameworks:

Function overview

Multiple input formats
Accept directories, files, blob s, local URLs, remote URLs, and data URI s.

Multiple file sources
Delete files, select files from the file system, add files using the API, or copy and paste files.

Asynchronous or synchronous upload
Send the file to the server using XMLHttpRequest, or store and submit the form in base64 format using the File Encode plug-in.

Image optimization
Automatically resizing and cropping images on the client can save server bandwidth and significantly improve upload speed.

It has been tested with AT software such as VoiceOver and JAWS. FilePond's user interface can be navigated through the keyboard.

Automatically zoom to available space. Available on both mobile and desktop devices.

FilePond plugin

FilePond provides rich plug-ins:

  • Document code
  • File rename
  • File size verification
  • File type validation
  • File metadata
  • Document Poster
  • image editor
  • Picture size verification
  • Picture preview
  • KJNova Clipper
  • Image filter
  • Image resizing
  • Image transformation
  • Image EXIF direction
  • Image overlay (nielsboogaard / filepond plugin image overlay)
  • Nielsboogaard / filepond plugin media Preview
  • Media preview + PDF preview (ernestbrandi / filepond plugin media preview)
  • Get file (nielsboogaard / filepond plugin get file)
  • Zip directory upload (tzsk / filepond plugin zipper)
  • Pdf preview (Adri glez / filepond plugin PDF preview)
  • Pdf conversion (Alexandre David / filepond plugin PDF convert)
  • Copy path (jnkn6 / filepond plugin copy path)

Getting started

Add page:

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

    <!-- Filepond stylesheet -->
    <link href="" rel="stylesheet">


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

<!-- Load FilePond library -->
<script src=""></script>

<!-- Turn all file input elements into ponds -->
    // This parse method lets us automatically load the FilePond element on the page.
    // set an option
        server: '/file/upload',// Back end address
        name: 'file' // Set file parameters


Visit the page and select file to see the displayed upload progress and upload success prompt.


GitHub address
Official website address

brief introduction

Dropzone is a JavaScript library that can convert any HTML element into a dropzone. This means that users can drag and drop files onto it. Dropzone will display the file preview and upload progress, and handle the upload for you through XHR.

It is fully configurable and can be styled according to your needs.


  • Default beautiful
  • Image thumbnail preview. Just register the callback thumbnail(file, data) and display the image anywhere you like
  • Enable retina
  • Multiple files and synchronous upload
  • Progress update
  • Support large files
  • Finish the theme. The look and feel of the Dropzone is just the default theme. You can define everything yourself by overriding the default event listener.
  • Browser image size adjustment (adjust image size before uploading image to server)
  • Good test

Getting started

The usage is similar to the above two. I'm too lazy to write here. You can refer to the official documents.

Tags: Front-end

Posted on Mon, 25 Oct 2021 01:38:53 -0400 by vigour