FileZip is a small driver script for the jszip utility. It adds the ability to download multiple files to a zip file.
FileZip may be unavailable, and the first step is to create a HTML page with a list of file URLs that the user can download. Give each <a> tag a class of filezip-url.
Then create a checkbox next to each file. The checkbox should have a class of filezip-select, and each file and checkbox should have a common parent element (for example, a <tr> if the data is in a table). Use the class filezip-show to only show the checkbox when FileZip is available. If you wish you can add a checkbox with a class of filezip-select-all to select or deselect all files.
Insert HTML for a button to drive FileZip. It should be an elaboration of the following.
<div class="filezip-container"> <button type="button" class="filezip">Download selected</button> </div>
The filezip-container is hidden if FileZip is unavailable (like filezip-show) and also provides a place for FileZip to insert additional content such as a progress indicator.
The filezip class identifies the button to use for the filezip.
The button can also contain a data-options attribute with a block of options in JSON. This can contain the following options:
| fileName | Name of zip file to be produced. Defaults to "download.zip".
If the file contains ${ts}, this will be replaced with the current timestamp in format yyyymmss_hhmmss. |
| select | jQuery selector to detect selection checkboxes. Defaults to '.filezip-select'. |
| selectAll | jQuery selector to detect detect checkbox for selecting all. Defaults to '.filezip-select-all'. |
| url | jQuery selector to detect detect <a> tags with file URLs. Defaults to "a.filezip-url". Note that, assuming the all option is not set, this is relative to the parent element common with the associated select. If the associated select is made more specific (for example, to '#mytable .filezip-select', the url selector need not be. If the all option is set, this is evaluated fully, not relative to any parent. |
| all | Set to true to always download all the files with the urlClass, and not examine the check boxes. |
| zipSingle |
Indicates that if a single file is selected, and the all option is not set, it should be downloaded as a zip file. Default is true. When zipSingle is false, a download is forced even if the file would otherwise open in the browser (e.g. an image), assuming a modern browser that supports the HTML5 download attribute. |
select and selectAll can identify a checkbox, an element that contains a checkbox, or an element the contents of which should be replaced with a checkbox. In other words, if it isn't a checkbox or contains a checkbox, a checkbox will be generated within it.
Selecting or deselecting the selectAll checkbox will select or deselect all the checkbox selectors.
You can also use the class filezip-hide to only show content if FileZip is unavailable.