dropify image preview not show after change data-default-file attr using jquery

Question

I am using Dropify.js, and I want to edit some attr value using jquery.

Here the HTML code:

<input type="file" id="kk" class="dropify form-control" data-max-file-size="5M" data-default-file="" required />

then I try to change input element data-default-file attribute with:

 $('#kk').attr({'data-default-file': '[[+photo]]',});

The attr value already change base on this allert

 alert(document.getElementById("kk").getAttribute("data-default-file"));

In that way, I can see data-default-file but I can't see img on screen.

when i using this html code, the img show on screen

<input type="file" id="kk" class="dropify form-control" data-max-file-size="5M" data-default-file="[[+photo]]" required />

Can you tell me how can i fix it?

Answer 1

you can't dynamic change file input's value. You can make like that: use

html = `<input type="file" id="kk" class="dropify form-control" data-max-file-size="5M" data-default-file="[[+photo]]" required />`;
$('#container').html(html).;
$('#kk').dropify(); // re init the dropify.