Previews are duplicated when previewTemplates option supplied

[ajbeaven]

Steps to reproduce the issue

1. Specify previewTemplates in fileinput options as the documentation states e.g.

   $videoFileInput.fileinput({
   previewTemplates: {
       video: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}" data-template="{template}" title="{caption}">\n' +
       '   <div class="kv-file-content">' +
       '       <video class="kv-preview-data file-preview-video" controls disablePictureInPicture controlsList="nodownload noplaybackrate" {style}>\n' +
       '           <source src="{data}" type="{type}">\n' + DEFAULT_PREVIEW + '\n' +
       '       </video>\n' +
       '   </div>\n' +
       '   {footer}\n' +
       '</div>\n' 
   }
   });

2. Click brows and select a file of the type with the preview specified above. After the preview appears, click browse again and select a different file of the same type.

Expected behavior and actual behavior

When I follow those steps, I see that the preview is duplicated:

I was expecting there to be a single preview:

The same thing does not occur if you do not supply the particular previewTemplates in the options relevant for the selected media. It occurs with other preview templates (images, etc).

Environment

Browsers: Microsoft Edge Operating System: Windows jQuery version: 3.6.0 bootstrap-fileinput version: 5.5.4

[ajbeaven]

This looks like it's an issue with the documentation which states:

NOTE: when setting your own preview templates, the following CSS classes are mandatory to identify elements within each file preview template:

• file-preview-frame: CSS class to identify each preview thumbnail frame container
• kv-file-content: CSS class to identify the display container for the file content
• kv-preview-data: CSS class to identify the element containing the data source (and the {data} tag) for each file type

In addition to these classes, it looks like the code also expects the custom previewTemplates to have a kv-preview-thumb class on the 'file-preview-frame'. Using the following code for the video template fixed the issue:

$videoFileInput.fileinput({
    previewTemplates: {
        video: '<div class="file-preview-frame kv-preview-thumb" id="{previewId}" data-fileindex="{fileindex}" data-template="{template}" title="{caption}">\n' +
        '   <div class="kv-file-content">' +
        '       <video class="kv-preview-data file-preview-video kv-preview-thumb" controls disablePictureInPicture controlsList="nodownload noplaybackrate" {style}>\n' +
        '           <source src="{data}" type="{type}">\n' + DEFAULT_PREVIEW + '\n' +
        '       </video>\n' +
        '   </div>\n' +
        '   {footer}\n' +
        '</div>\n' 
    }
});

I'd send through a PR but it looks like your documentation isn't hosted in Github.

[kartik-v]

Thanks will check and update this.

[ajbeaven]

You may also want to add kv-preview-thumb class to the example templates listed in the docs too. If copied as is, they would have the same problem I experienced.