---
title: "Mini app : Downloader"
layout: default
section: example
---

<p>Tip : check the source of the page !</p>

<p>
  This mini application let you choose the files you want in a list, download
  them, zip them and give the result to the user.
</p>
<p>
  This demo requires a recent browser, see <a href="{{site.baseurl}}/documentation/howto/write_zip.html">
  the howto</a>.
</p>



<div id="downloader_application">
  <h3>Please select your files</h3>
  <form action="#" id="download_form">
  <ul>
    <li>
      <label>
        <input type="checkbox" data-url="{{site.baseurl}}/test/ref/complex_files/Franz Kafka - The Metamorphosis.epub" checked />
        Franz Kafka - The Metamorphosis.epub
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" data-url="{{site.baseurl}}/documentation/css/pygments.css" checked />
        pygments.css
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" data-url="{{site.baseurl}}/dist/jszip.js" />
        jszip.js
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" data-url="{{site.baseurl}}/test/ref/all.zip" />
        all.zip
      </label>
    </li>
  </ul>

  <button type="submit" class="btn btn-primary">pack them !</button>
</form>

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

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

</div>

<script type="text/javascript" src="{{site.baseurl}}/documentation/examples/downloader.js"></script>
