Create A Custom Download Builder With The Modular Download Library

File Size: 9.59 KB
Views Total: 272
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

<!-- 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">
    <!--Item One-->
    <li class="list-group-item">
        <input type="checkbox" data-amount=1 data-url1="modularDownload.js" data-folder1="example/folder" />
    <!--Item Two-->
    <li class="list-group-item">
        <input type="checkbox" data-amount=1 data-url1="LICENSE" data-folder1="/" />
    <!--Item Three-->
    <li class="list-group-item">
        <input type="checkbox" data-amount=2 data-url1="" data-folder1="/" data-url2="docs/" data-folder2="docs/"/>
  <!--Value is the file extension-->
  <button type="submit" class="btn btn-primary" value="zip">Download ZIP</button>

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%;">

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.