Filepond-plugin-tarball NPM

:gift: FilePond Plugin Tarball

This is an extension plugin for FilePond uploader where you can upload directories as Tar Files instead of uploading each individual files in them separately.

:package: Installation

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

// Yarn:
yarn add filepond-plugin-tarball

CDN

https://cdn.jsdelivr.net/npm/filepond-plugin-tarball@1.1.0/bundled/tarball.min.js
// OR
https://unpkg.com/filepond-plugin-tarball@1.1.0/bundled/tarball.min.js

:fire: Usage

This may differ depending upon the Framework you are using, but there is good documentation of how to register plugins in various Frameworks in FilePond website which you can follow.

import FilePondPluginTarball from 'filepond-plugin-tarball';

FilePond.registerPlugin(FilePondPluginTarball());

// Make sure you register it as a function
// cause you can pass in hook to tap into the tar files.

:star: Hook Support

In many cases, specially while using some reactive frameworks you might like to show some loading screen while it is archiving files which might take some time depending upon the directory size.

In those cases you can pass a callback function inside the FilePondTarball(). If you pass a callback then it won't add the tar files in the queue directly. Instead, it will give you the Array of Promise objects which you can tap into to show loading and inject the tar files when they are done.

Example:

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

const injector = async (generators) => {
  // Set Loading...
  const files = await Promise.all(
    generators.map(generate => generate())
  );
  pond.addFiles(files);
  // Stop loading...

  // OR. If you want to tap individually

  // Set Loading...
  generators.forEach(generate => {
    const file = await generate();
    pond.addFile(file);
  });
  // Stop Loading...
};

FilePond.registerPlugin(FilePondPluginTarball(injector));