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.
// NPM:
$ npm install --save filepond-plugin-zipper
// Yarn:
$ yarn add filepond-plugin-zipper<script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
<!-- And... -->
<script src="https://cdn.jsdelivr.net/npm/filepond-plugin-zipper/dist/zipper.min.js"></script>
JSZipdependency is required while using via CDN.
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());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...
}
}));After cloning the repository, install all npm dependencies by running: npm install.
Then, run the tests:
$ npm run testThis repository follows semantic versioning. Please refer to the Releases page to see what has changed in each version.
We welcome contributions! Please feel free to submit ideas, bug reports, and pull requests.
The MIT License (MIT). Please see License File for more information.