优秀的上传器，惯用的方式为每个上传的文件添加下载按钮

Question

我已成功实施 fine uploader into my project. I'm using the addInitialFiles 方法，用以前上传的文件填充它。

我想做的是为呈现的每个文件预览添加一个下载按钮，既作为用户添加的文件，也作为使用 addInitialFiles 预填充时的 'on load'。将按钮添加到标记模板非常简单，但我坚持最惯用的方法是：

监听我添加到标记中的下载按钮的点击事件（例如，使用一个好的上传器 API 方法，或者我自己的监听器？）
如何将必要的信息与每个 button/thumbnail 相关联以调用文件下载。

我将下载的文件 url 存储在一个 mongo 集合中，我将返回该集合并使用该集合填充 addInitial 文件方法。

以防万一：我不希望有好的上传器 'handle' 下载，我只是想将下载功能编织到它的 UI :)

欣赏any/alladvice/pointers！

Answer 1

在 <li>.
监听 qq.status.UPLOAD_SUCCESS 状态变化。
成功后，更新锚 link 以指向适当的下载端点。您可以使用 getItemByFileId.

在响应下载 GET 请求时，您需要确保您的服务器 returns 正确 Content-Disposition header。

Answer 2

这可能有助于为每个上传的文件添加自定义下载按钮的人。

我已经测试了 FineUploader 5.16.2 版本。

已使用的参考链接 - callback events & initial file list

文件上传器的代码如下（下载按钮使用了两个事件）：

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
    }
});

优秀的上传器，惯用的方式为每个上传的文件添加下载按钮

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

javascript

fine-uploader