{dataKey} never worked in otherActionButtons

[wilsonwg]

I had been stuck with this problem for months and still can't solve the problem.

I followed the example on the doc page. My codes:

 var btns = '<button type="button" class="kv-cust-btn btn btn-xs btn-default" title="Download" data-key="{dataKey}">' +
            '<i class="glyphicon glyphicon-download"></i>' +
            '</button>';

$("#myFile").fileinput({
...
initialPreview: [
"http://kartik-v.github.io/bootstrap-fileinput-samples/samples/Desert.jpg",
"http://kartik-v.github.io/bootstrap-fileinput-samples/samples/Lighthouse.jpg",
                    ],
initialPreviewConfig:
     [
{caption: "Desert.jpg", size: 827000, width: "120px", url: "http://kartik-v.github.io/bootstrap-fileinput-samples/samples/Desert.jpg", key: 1},
{caption: "Lighthouse.jpg", size: 549000, width: "120px", url: "http://kartik-v.github.io/bootstrap-fileinput-samples/samples/Lighthouse.jpg", key: 2},
       ],
...
otherActionButtons: btns
        });

$('.kv-cust-btn').on('click', function() {
    var $btn = $(this), key = $btn.data('key');
    // do some actions based on the key
     console.log(key);
});

And I always get:
data-key=

Is this a bug or something I did wrong?

[kartik-v]

You can try to access it via $btn.attr('data-key') instead of $btn.data('key').

[wilsonwg]

I just tried $btn.attr('data-key') but it still returns the same empty value data-key=
Maybe something related to scope. Just my guess.

[kartik-v]

Yes it seems a problem with your calling this code even before the DOM element is initialized... you need to call this code on document.ready event for example.

Will check if I can enhance this behavior a bit to allow developers to configure a callback for this in an easier way.

[wilsonwg]

I solved the problem!

if I use data-key="{dataKey}"

 var btns = '<button type="button" class="kv-cust-btn btn btn-xs btn-default" title="Download" data-key="{dataKey}">' +
            '<i class="glyphicon glyphicon-download"></i>' +
            '</button>';

Then I get a very strange attribute code:
data-key=" data-key="2""=""
But I only put {dataKey}

 var btns = '<button type="button" class="kv-cust-btn btn btn-xs btn-default" title="Download" {dataKey}>' +
            '<i class="glyphicon glyphicon-download"></i>' +
            '</button>';

Then it renders the correct html attribute code:
data-key="2"

So the example code on the doc page is misleading:
http://plugins.krajee.com/file-input#option-otheractionbuttons

Or you may need to change the original codes.

[kartik-v]

Will correct the docs.

[wilsonwg]

I noticed that the doc got updated, the texts after the template section all appear to be red (after the datakey part). Perhaps you forgot to add a closed tag somewhere. It's a small thing, but kind of annoying when reading the doc.

[kartik-v]

Fixed.

[wilsonwg]

Great! Thank you!

[MikeAlhayek]

I am trying to create a download button also. So I added the following to my config

    otherActionButtons: '<button type="button" class="kv-cust-btn btn btn-xs btn-default text-muted" title="Download" {dataKey}>' +
                        '<i class="fa fa-download"></i>' +
                        '</button>',

The dataKey is replaced as expected initialPreviewConfig.key... but how can I also pass the download URL? When the use click on the "download" button, I want to download a the file to my local machine.

[wilsonwg]

@CrestApps : You can look my very first post and the very last few lines. You can pass your url into your scripts with the key. Ex: window.location = 'http://...donwload_url_here.../'+key; to initiate the download. This is just one of the possible ways of doing it.