Fine uploader, idiomatic way to add download button to each file uploaded

Question

I've successfully implemented fine uploader into my project. I'm using the addInitialFiles method to populate it with previously uploaded files.

What I would like to do is add a download button to each file preview rendered, both as a user add's files and 'on load' when prepopulated using addInitialFiles. Adding the button to the mark up template is pretty trival, but I'm stuck on what the most idiomatic way would be to:

• Listen for the click event on the download button I've added to the markup (e.g. use a fine uploader API method, or my own listener?)
• How I can associate the necessary information with each button/thumbnail to envoke a file download.

I'm storing the files download url in a mongo collection that that im returning and populating the addInitial files method with.

In case it comes up: I'm not looking to have fine uploader 'handle' the download, I'm simply trying to weave the download functionality into it's UI :)

Appreciate any/all advice/pointers!

Answer 1

May this help to someone to add a custom download button to each uploaded file.

I have tested for FineUploader version 5.16.2.

Used ref links - callback events & initial file list

Code for file uploader is as (used two events for the download button):

var defaultParams = {};
$('#fine-uploader-gallery').fineUploader({
    template: 'qq-template-gallery',
    thumbnails: {
        placeholders: {
            waitingPath: 'waiting-generic.png',
            notAvailablePath: 'not_available-generic.png'
        }
    },
    validation: {
        itemLimit: 10,
        // acceptFiles: 'image/*',
        // allowedExtensions: ['mp4','jpeg', 'jpg', 'gif', 'png']
    },
    session: { /** initial file list **/
      endpoint: '/uploaded_files', 
      params: defaultParams
    },
    request: { /** new upload file request **/
        endpoint: '/upload_files'
    },
    callbacks: {
        /** Event to initial files with download link 
        array(
            array('id' => xxx, 'name' => xxx, 'size' => xxx, 'thumbnailUrl' => xxx, 'uuid' => xxx, 'url' => fileUrl),
            array('id' => xxx, 'name' => xxx, 'size' => xxx, 'thumbnailUrl' => xxx, 'uuid' => xxx, 'url' => fileUrl2),
            ...
        }
        **/
        onSessionRequestComplete: function(id, name, responseJSON){
            id.forEach((item, index) => {
                var serverPathToFile = item.url,
                    $fileItem = this.getItemByFileId(index);
                if (responseJSON.status == 200) {
                    $($fileItem).find(".qq-download-option") /** Custom Anchor tag added to Template **/
                        .attr("href", serverPathToFile)
                        .removeClass("hide");
                }
            });
        },
        /** Event to newly uploaded file with download link
            responseJSON : array('success' => 'true', 'filename' => xxx, 'unique_id' => xxx, 'url' => fileurl)
        **/
        onComplete: function(id, name, responseJSON, xhr){
            var serverPathToFile = responseJSON.url,
                $fileItem = this.getItemByFileId(id);
            if (responseJSON.success) {
                $($fileItem).find(".qq-download-option") /** Custom Anchor tag added to Template **/
                    .attr("href", serverPathToFile)
                    .removeClass("hide");
            }
        }
    },
    deleteFile: {
        enabled: true,
        forceConfirm: true,
        method: 'DELETE',
        endpoint: '/delete_files',
        customHeaders: {},
        params:defaultParams
    }
});

Answer 2

1. Add an anchor link to your template somewhere inside the <li>.
2. Listen for qq.status.UPLOAD_SUCCESS status changes.
3. On success, update the anchor link to point to the appropriate download endpoint. You can find the anchor link for a specific file using getItemByFileId.

You'll need to be sure your server returns the proper Content-Disposition header when responding to a download GET request.