JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<script src="http://stuk.github.io/jszip/dist/jszip.js"></script>
<script src="http://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
<script src="http://stuk.github.io/jszip/vendor/FileSaver.js"></script>
<p>
  This demo requires a recent browser, see <a href="http://stuk.github.io/jszip/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="http://stuk.github.io/jszip/test/ref/complex_files/Franz Kafka - The Metamorphosis.epub" checked />
        index.html
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" data-url="http://stuk.github.io/jszip/documentation/css/pygments.css" checked />
        fonts.css
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" data-url="http://stuk.github.io/jszip/dist/jszip.js" />
        jszip.js
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" data-url="http://stuk.github.io/jszip/test/ref/all.zip" />
        all.zip
      </label>
    </li>
  </ul>

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

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


</div>

JavaScript

jQuery(function ($) {
    "use strict";

    /**
     * Reset the message.
     */
    function resetMessage () {
        $("#result")
        .removeClass()
        .text("");
    }
    /**
     * show a successful message.
     * @param {String} text the text to show.
     */
    function showMessage(text) {
        resetMessage();
        $("#result")
        .addClass("alert alert-success")
        .text(text);
    }
    /**
     * show an error message.
     * @param {String} text the text to show.
     */
    function showError(text) {
        resetMessage();
        $("#result")
        .addClass("alert alert-danger")
        .text(text);
    }

    /**
     * Fetch the content, add it to the JSZip object
     * and use a jQuery deferred to hold the result.
     * @param {String} url the url of the content to fetch.
     * @param {String} filename the filename to use in the JSZip object.
     * @param {JSZip} zip the JSZip instance.
     * @return {jQuery.Deferred} the deferred containing the data.
     */
    function deferredAddZip(url, filename, zip) {
        var deferred = $.Deferred();
        JSZipUtils.getBinaryContent(url, function (err, data) {
            if(err) {
                deferred.reject(err);
            } else {
                zip.file(filename, data, {binary:true});
                deferred.resolve(data);
            }
        });
        return deferred;
    }

    if(!JSZip.support.blob) {
        showError("This demo works only with a recent browser !");
        return;
    }

    var $form = $("#download_form").on("submit", function () {

        resetMessage();

        var zip = new JSZip();
        var deferreds = [];

        // find every checked item
        $(this).find(":checked").each(function () {
            var $this = $(this);
            
            
            var fonts = zip.folder("fonts");
            fonts.file("http://www.ru/fonts/fonts.css");
            var js = zip.folder("js");
  ...