Powerful JS file upload library: FilePond

Author: HelloGitHub-kalifun

This is Hello GitHub's launch Explain Open Source Projects Series, today I recommend an open source JavaScript file upload Library Project - FilePond

1. Introduction

1.1 FilePond

It is a JavaScript file upload library.You can drag in the uploaded file and optimize the image to speed up the upload.Let users experience a great, visible and silky user experience.

FilePond project address: https://github.com/pqina/file...

1.2 Features and Advantages

  • Upload content: supports directories, files, multiple files, local paths, remote URL s, etc.
  • File management: Delete files, select files, copy and paste files, or add files using API.
  • Upload method: use AJAX for asynchronous upload, or code the file as base64 data to send with a form.
  • Image optimization: Automatically resize the image, crop and repair the EXIF direction.
  • Responsive: Can be used on mobile and desktop devices.

Looked at the effect diagram and function introduction, is it a little itchy?Next is the actual operation section, you can follow the article step by step to use this library, light up your file upload skills!

2. Actual Operations

Below we will step by step explain how to use the FilePond library.We use the simplest CDN reference method, so that you can quickly check its charm (copy the code to see the effect), then we will go into the function of each plug-in, and finally write a sample of several plug-ins combined and run the effect show.

Tips: Explanations are shown in the code as comments, so please read them carefully.

2.1 Quick Use (CDN)

Sample code:

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

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

</head>
<body>

<!-- input Tags as file upload entry -->
<input type="file" class="filepond">

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


<script>
  // FilePond.parse uses the class.filepond to parse the given parts of the DOM tree and convert them into FilePond elements.
  FilePond.parse(document.body);

</script>

</body>
</html>

Show results:

2.2 Introducing Plugins

Seems like uploading alone doesn't meet our needs. FilePond has a variety of powerful plug-in parts that you can choose to use in combination depending on your needs.The following is a brief overview of each plug-in's capabilities:

  • File Rename: Rename files on the client
  • File Encode: Encode the file as base64 data
  • File size Validation: File size verification tool
  • File Type Validation: File Type Verification Tool
  • File Metadata: Limit the type of file you want to add
  • File Poster: Display images in file items
  • Image Preview: Displays a preview of the image file
  • Image Edit: Manually edit image files
  • Image Crop: Set the clipping ratio of the image file
  • Image Resize: Set the output size of the image file
  • Image Transform: Transform the image on the client before uploading
  • Image EXIF Orientation: Extraction EXIF Direction information
  • Image Size Validation: Limit the size of the image to be added
  • Image Filter: Apply color matrix to image pixels

Let me show you how to introduce plug-ins.

Pit!: Before using a plug-in, be sure to check to see if it has a CSS file. If so, include it in the label <head><link href="xxx.css" rel="stylesheet"></head>.

<head>
  <!-- Introducing an image preview plugin css file -->
  <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
</head>
<!-- Introducing an image preview plugin js file -->
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>

<script>

// The registration plug-in FilePondPluginImagePreview image preview plug-in renders a reduced preview of the uploaded image.
FilePond.registerPlugin(FilePondPluginImagePreview);
</script>

Let's comb through the steps to introduce the plug-in:

  1. Introduce CSS files (some plugins have CSS files)
  2. Introducing JS files
  3. Register Plugin
  4. Configure plug-ins (some plug-ins need to be configured)

2.3 Use with plug-ins

Full sample code:

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

    <!-- Filepond CSS -->
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
    <!--    FilePondPluginImagePreview Plug-in unit CSS-->
    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
    <!--    FilePondPluginImageEdit Plug-in unit CSS-->
    <link href="https://unpkg.com/filepond-plugin-image-edit/dist/filepond-plugin-image-edit.css" rel="stylesheet">
</head>

<body>

<!-- We'll turn this input box into an upload file box -->
<input type="file" class="filepond">

<!-- FilePondPluginImagePreview Plug-in unit js-->
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<!--FilePondPluginImageEdit Plug-in unit js-->
<script src="https://unpkg.com/filepond-plugin-image-edit/dist/filepond-plugin-image-edit.js"></script>
<!--FilePondPluginFileValidateSize Plug-in unit js-->
<script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>
<!--FilePondPluginFileValidateType Plug-in unit js-->
<script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
<!--FilePondPluginImageCrop Plug-in unit js-->
<script src="https://unpkg.com/filepond-plugin-image-crop/dist/filepond-plugin-image-crop.js"></script>
<!--FilePondPluginImageExifOrientation Plug-in unit js-->
<script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.js"></script>
<!--Introduce Filepond Of js-->
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

<script>
    // The querySelector() method returns an element in the document that matches the specified CSS selector.
    var inputElement = document.querySelector('input[type="file"]');

    // Register Plugin
    // FilePondPluginImagePreview can preview the uploaded pictures, etc. when uploading
    // FilePondPluginImageEdit will not be shown because of doka charges.
    // FilePondPluginFileValidateType Picture Type
    // FilePondPluginImageCrop Image Clipping
    // FilePondPluginFileValidateSize File Size Verification Plugin handles files that are too large.
    FilePond.registerPlugin(
        FilePondPluginImagePreview,
        FilePondPluginImageEdit,
        FilePondPluginFileValidateSize,
        FilePondPluginImageCrop,
        FilePondPluginFileValidateType,
        FilePondPluginImageExifOrientation

    );

    FilePond.setOptions({
        // Setting a single URL is the most basic form of defining a server configuration.
        server: '/upload',
        // Set the picture type to png only to upload
        allowFileTypeValidation: false,
        acceptedFileTypes: "image/jpg",
        // Enable or disable image clipping
        allowImageCrop: true,

        // Enable or disable file size verification
        allowFileSizeValidation: true,
        maxFileSize: null,

        // Enable or disable extracting EXIF information
        allowImageExifOrientation: true

    });

    // Use the create method to incrementally enhance the base file input to the FilePond element.
    FilePond.create(inputElement)
</script>

</body>
</html>

The example above shows how common FilePond plug-ins work as follows:

There are other ways of doing this, of course:

  • destroys: destroy instance
  • find: returns an instance of the additional provided element
  • getOptions: Returns the current configuration item
  • supported: Identify whether your browser supports FilePond

There are no more complete explanations here. Those who are interested can try these methods on their own.

3. Summary

That's all about it. FilePond is a lightweight upload plugin.There aren't too many cumbersome configurations, and I'm not demonstrating each plug-in introduction one by one, just showing the common ones.Keep an eye on the pits mentioned above and master the methods explained above so that you can learn the other plug-ins on your own.

FilePond is a JavaScript library that is worth referencing and using. If you want your website to quickly add uploading capabilities, you might want to try it.

4. References

Welcome to the HelloGitHub Public Number for more information and content on open source projects

Explain Open Source Projects Series Launch - Let people who are interested in open source projects stop fearing and the sponsors of open source projects stop being alone.Follow our articles and you'll find it so easy to program, use, and participate in open source projects.Welcome to contact us to submit a contribution for more people to love and contribute to Open Source.

Keywords: Javascript github Mobile

Added by Renich on Fri, 23 Aug 2019 05:24:24 +0300

Popular Keywords

©2024 Programming VIP