modularDownload.js is a simple vanilla JavaScript modular download script. Combine multiple files into a zip file.

javascript module example, js modules, module exports javascript, script typemodule, script typemodule not working, javascript modules es6, javascript plugins free download

How to make use of it:

1. Load the necessary JavaScript and CSS files into the document.

<!-- 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 upload the standard download library at the end of the document.

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

3. Add items to the download tool.

<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 indicating 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>

Create A Custom Download Builder With The Modular Download Library, modularDownload.js Plugin/Github

See Demo And Download

Official Website(PiSaucer): Click Here

This superior jQuery/javascript plugin is developed by PiSaucer. For extra Advanced Usages, please go to the official website.