Search code examples
javascriptjqueryjszip

How to load files into the JSZip from remote URL?


Is there a way to load the files into the Zip from given url?

like this:

var zip = new JSZip();
zip.file("file.txt", "/site.net/files/file.txt");

Update

I am fallowing this example: http://stuk.github.io/jszip/documentation/examples/downloader.html

I tried this code but it did not work. I downloaded the scripts from github, this is my example:

<html>
<head>

</head>
<body>
<script type="text/javascript"
    src="jquery-1.8.3.min.js"></script>
<script type="text/javascript"
    src="jszip-utils.js"></script>
<script type="text/javascript"
    src="jszip-utils.min.js"></script>
<script type="text/javascript"
    src="FileSaver.js"></script>
<script type="text/javascript"
    src="jszip.js"></script>

<script type="text/javascript"
    src="downloader.js"></script>
<script type="text/javascript"
    src="helpers.js"></script>
<h3>Please select your files</h3>
<form action="#" id="download_form">
    <ul>
        <li>
            <label>
                <input type="checkbox" data-url="https://github.com/Stuk/jszip/blob/master/index.html" checked />
                Franz Kafka - The Metamorphosis.epub
            </label>
        </li>
        <li>
            <label>
                <input type="checkbox" data-url="https://github.com/Stuk/jszip/blob/master/index.html" checked />
                pygments.css
            </label>
        </li>
        <li>
            <label>
                <input type="checkbox" data-url="https://github.com/Stuk/jszip/blob/master/index.html" />
                jszip.js
            </label>
        </li>
        <li>
            <label>
                <input type="checkbox" data-url="https://github.com/Stuk/jszip/blob/master/index.html" />
                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>
</body>
</html>

Solution

  • Update (The solution)

    The declaration of the scripts must be at the bottom of the form tag.

    <form ...>
    ...
    </form>
    <script type="text/javascript"
        src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript"
        src="jszip-utils.js"></script>
    <script type="text/javascript"
        src="jszip-utils.min.js"></script>
    <script type="text/javascript"
        src="FileSaver.js"></script>
    <script type="text/javascript"
        src="jszip.js"></script>
    
    <script type="text/javascript"
        src="downloader.js"></script>
    <script type="text/javascript"
        src="helpers.js"></script>