Introduction

The bulk download file attachments function discussed in this article is achieved through the use of Custom HTML form element and Javascript codes. It will download all file attachment of the File Upload form element at a click of a button.

Get Started

Step Examples
Step 1 

Drag a File Upload element into the form, ensure the "Enable Multiple File Upload" is enabled in order for bulk download to work.

Figure 1: Enable multiple files upload

Step 2

Drag a Custom HTML element into the form

Figure 2: Custom HTML 

Step 3

Paste the following code. This will add a download all button to the form to perform bulk download files.

<div id="download-all" class="btn btn-primary">Download All</div>
<script>
    $(function(){
        searchParams = new URLSearchParams(window.location.search)  // to check the mode
        mode = searchParams.get("_mode");
        if(mode == 'add'){// hide if its "add" mode
            $('#download-all').hide();
        }
        
        $('#download-all').on('click', function(){
            links = $("ul.form-fileupload-value").find("a:not(.remove)");   // get all <a> tag except those with "remove" class
            $.each(links, function(k,v){ // iterate through them 1 by 1, while using click() on them.
                v.click();
            })
        })
    });
</script>

Figure 3: Insert code into Custom HTML

Step 3 

Test plugin at run time

Figure 4: "Download All" button testing

Step 4 

Bulk download result

Figure 5: Download result

Sample App

APP_kb-dx8_bulkDownloadFileAttachments.jwa

Related Articles

• File Upload
• Custom HTML