Create A Custom Download Builder With The Modular Download Library

Modular Download is a JavaScript library that allows you to combine multiple folders and files into a downloadable zip file.

Useful in download builder that enables the user to choose which files and/or folders should be included in the zip file before downloading.

How to use it:

1. Load the necessary JavaScript and CSS files in the document. Full dependencies:

• FileSaver.js
• jszip.js
• jszip-utils.js
• jQuery
• Bootstrap Stylesheet

<!-- Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- jszip.js -->
<script src="/path/to/cdn/jszip.min.js"></script>
<!-- jszip-utils.js -->
<script src="/path/to/cdn/jszip-utils.min.js"></script>
<!-- FileSaver.js -->
<script src="/path/to/cdn/FileSaver.min.js"></script>

2. Download and load the Modular Download library at the end of the document.

<script src="modularDownload.js"></script>

3. Add items to the download builder.

• data-amount: how many files
• data-whater: the file number like 1, 2, 3, ...
• data-url: the direct path of the file
• data-folder: the folder data that the file would be in the zip folder

<form action="#" id="download_form">
  <ul>
    <!--Item One-->
    <li class="list-group-item">
      <label>
        <input type="checkbox" data-amount=1 data-url1="modularDownload.js" data-folder1="example/folder" />
        modularDownload.js
      </label>
    </li>
    <!--Item Two-->
    <li class="list-group-item">
      <label>
        <input type="checkbox" data-amount=1 data-url1="LICENSE" data-folder1="/" />
        LICENSE
      </label>
    </li>
    <!--Item Three-->
    <li class="list-group-item">
      <label>
        <input type="checkbox" data-amount=2 data-url1="README.md" data-folder1="/" data-url2="docs/README.md" data-folder2="docs/"/>
        README + DOCS (README)
    </label>
    </li>
  </ul>
  <!--Value is the file extension-->
  <button type="submit" class="btn btn-primary" value="zip">Download ZIP</button>
</form>

4. Create a progress bar that indicates the progress of the compression.

<div class="progress hide" id="progress_bar">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
  </div>
</div>

5. Create an empty container to show the result.

<p class="hide" id="result"></p>

---

This awesome jQuery plugin is developed by PiSaucer. For more Advanced Usages, please check the demo page or visit the official website.