:gift: Filepond Plugin Zipper

An extension plugin for the FilePond file uploader that allows you to upload entire directories as single ZIP files, rather than uploading each file individually.

:package: Installation

// NPM:
$ npm install --save filepond-plugin-zipper

// Yarn:
$ yarn add filepond-plugin-zipper

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js"></script>
<!-- And... -->
<script src="https://cdn.jsdelivr.net/npm/filepond-plugin-zipper/dist/zipper.min.js"></script>

JSZip dependency is required while using via CDN.

:fire: Usage

The implementation may vary depending on the framework you are using. Please refer to the official FilePond documentation for detailed instructions on registering plugins across different frameworks.

import FilepondZipper from 'filepond-plugin-zipper';

FilePond.registerPlugin(FilepondZipper());

:star: Hook Support

Depending on the directory size, the zipping process may take some time. You may want to display a loading indicator during this process, especially when using reactive frameworks.

To accommodate this, you can pass an options object containing lifecycle hooks to FilepondZipper(). This enables you to listen to specific events (when the zipping process starts, succeeds, fails, or ends) while the plugin automatically handles adding the resulting ZIP files to FilePond.

Example:

const pond = FilePond.create(...);

FilePond.registerPlugin(FilepondZipper({
  onStart: (directories) => {
    // Fired when zipping process begins
    // e.g. [{ name: "folder1.zip" }]
    console.log("Zipping started for:", directories);
    // Set loading...
  },
  onSuccess: (successes) => {
    // Fired when all zips are successfully generated
    console.log("Zipping succeeded for:", successes);
  },
  onError: (failures) => {
    // Fired if any zip fails
    console.error("Zipping failed for:", failures);
  },
  onEnd: (successes, failures) => {
    // Fired when the entire zipping process ends (success or failure)
    console.log("Zipping process completed.");
    // Stop loading...
  }
}));

:microscope: Testing

After cloning the repository, install all npm dependencies by running: npm install.

Then, run the tests:

$ npm run test

:date: Change log

This repository follows semantic versioning. Please refer to the Releases page to see what has changed in each version.

:heart: Contributing

We welcome contributions! Please feel free to submit ideas, bug reports, and pull requests.

:crown: Credits

• Kazi Mainuddin Ahmed
• All Contributors

:policeman: License

The MIT License (MIT). Please see License File for more information.