Triggering the link in the example

AllenEllis commented 3 years ago

Hi,

In your example code, how does the link get triggered? I've used this line from the example literally:

<a href={downloadUrl}>Click to start downloading!</a>

But obviously, clicking the link just sends the browser to /{downloadUrl}. I thought maybe I should set it to # and use onClick to trigger the JavaScript function, but it's not wrapped in a function so I'm just sure what I would change it to.

Sorry if I'm missing something totally obvious. I'm testing this all in a single .html file with the files from your dist folder copied into the same folder:

<html>
<head>
    <script src="main.js"></script>
    <script src="downzip-sw.js"></script>

</head>
<body>
    <p>We'll be exporting attachments here.</p>
    <a href={downloadUrl}>Click to start downloading!</a>
</body>
<script>
    import DownZip from 'downzip'

    // Setup downzip object
    const downZip = new DownZip()

    // Initialize download
    const downloadId = "aaaabbbb"
    const zipFileName = "downzip-file"
    const files = [
        {
            name: 'picture1.jpg'
            downloadUrl: 'http://your-download-url.com/picture1.jpg'
            size: 1234      // In bytes
        },
        {
            name: 'picture2.jpg'
            downloadUrl: 'http://your-download-url.com/picture2.jpg'
            size: 4567      // In bytes
        }
    ]
    const downloadUrl = await downZip.downzip(
        downloadId,
        zipFileName,
        files
    )
</script>
</html>

My background is just vanilla JavaScript, I'm trying to integrate this into a Django app I'm writing. Any pointers would be appreciated.

Thanks!

robbederks commented 3 years ago

Not sure what the best way to integrate this is either, but it should be possible to wrap this in a function, which then returns the download URL. You have to point your browser to this download URL at some point, since that URL is intercepted by the service worker, which then streams out the zip file.

One way to do this would be to edit the href attribute of that download element after the script has ran, and the URL was generated. I'm mostly familiar with React, but even in vanilla JS it should be pretty easy to alter the href attribute of that element.

robbederks commented 1 year ago

Closing due to inactivity

robbederks / downzip

Triggering the link in the example #14