Bootstrap file input plugin is removing all previews on change or fileselect

Question

I am developing a website. In my website, I need to develop multiple file upload feature. I need to display the preview of selected photo as well. So I used this bootstrap plugin - http://plugins.krajee.com/file-input . But now I am having a problem with displaying or maintaining preview images when the file selection is changed.

For example, when I edit an entity from database, I need to display preview of existing photos. So I display the preview like this.

var photo_urls_string = $('#photo-urls').val();
var photo_urls = new Array();

if (photo_urls_string != null && photo_urls_string != "")
{
    photo_urls = photo_urls_string.split(",");
}

var file_preview_html = new Array();

if (photo_urls.length > 0)
{
    for(var i=0;i<photo_urls.length; i++)
    {
        var img_html = "<img src="+photo_urls[i]+" title="+photo_urls[i]+" />";

        file_preview_html.push(img_html);
    }
}

$('#photos-field').fileinput({ initialPreview : file_preview_html });

As you can see, I stored file path in database, so I show preview using url of the image. So it displays the preview as below when I go to edit-page to update an entity.

All still working fine. But the problem is when I browse to choose new file or photos, all the existing preview images are removed and only the newly selected photos are displayed. What I want to do is I want to show both existing preview images and newly selected photos. How can I do it? What I can think of is to override event like this.

$('#input-id').on('change', function(event) {
    console.log("change");
});

But the point is I do not know how to maintain existing preview images.

Answer 1

It´s an old question but here we go:

overwriteInitial: false