Unexpected kv-zoom-cache table after upload

[max-ci]

Steps to reproduce the issue

1. Use explorer-fa theme
2. Upload image when showZoom is set to true (it's by default)
3. Response from server with initial preview and initial preview config, so new image will appear from the server after upload.

Config

$('#upload-zdjecia').fileinput({
  uploadUrl: 'myurl',
  theme: 'explorer-fa',
  uploadAsync: true,
  maxFileCount: 50,
  validateInitialCount: true,
  browseOnZoneClick: true,
  overwriteInitial: false,
  showCaption: false,
  browseClass: "btn btn-primary btn-block",
  showUpload: false,
  showRemove: false,
  showClose: false,
  language: 'pl',
  resizeImage: true,
  maxImageWidth: 1920,
  allowedFileExtensions: ['jpg', 'jpeg'],
  initialPreview: initialPrev,
  initialPreviewConfig: initialPrevConf,
  layoutTemplates: {
    preview: previewTemplate,
    footer: footerTemplate,
    actions: actionsTemplate,
    size: '<samp><small>({sizeText})</small></samp>'
  },
  fileActionSettings: {
    removeIcon: 'Usuń <i class="fa fa-trash"></i>',
    removeClass: 'btn btn-sm btn-danger',
    uploadIcon: 'Wgraj <i class="fa fa-upload"></i>',
    uploadClass: 'btn btn-sm btn-info',
    showDrag: false
  }
});

Result

Expected behavior and actual behavior

When I follow those steps, I see this table with class of kv-zoom-cache after image upload and it should be hidden or not there. It works good (I don't see this table) when I'm not returning initial preview and initial preview config from the server or when I set showZoom to false.

Environment

Browsers: all

Operating System: Windows, Mac OS X

Libraries

• jQuery version: 3.3.1
• bootstrap-fileinput version: 4.4.8

Isolating the problem

I can't reproduce it on JSBin, server response required.

[kartik-v]

It seems you have improper HTML markup (some tags not closed) OR data from the server is corrupting the HTML markup. You need to debug that in your app code and check your server response. You can cross check the demos where initialPreview is returned from server and is displayed correctly for explorer theme.

[max-ci]

Thanks for response @kartik-v

http://plugins.krajee.com/file-krajee-explorer-fa-demo I checked this demo (first one) and after upload image is still in base64 format so the server not responded with initialPreview

I checked my HTML and it's fine I think (checked HTML templates and response, for initial preview it's just img tag and for initial preview config is an object with properties). I realised that it only occurs when I'm trying to upload one image, if I add 2 images to input and click on upload all (showUpload button) there is no problem then.

[kartik-v]

It seems some configuration / coding problem at your end and does not seem to be an issue that I can reproduce. You may want to share a JS Fiddle / test to see if your issue can be reproduced. Am closing this and will reopen then.

[max-ci]

Hi,

I made a simple demo

LINK

After image upload you can see in the console what I'm returning. If you try to upload image clicking global Upload button there is no problem. The problem occurs when you try to upload single image clicking on the upload icon in the table.

[max-ci]

Any news about this issue @kartik-v?

[kartik-v]

You may need to check the server code response that processes the UPLOAD. You seem to be returning some HTML IMAGE markup to update the initial preview in the JSON post your upload. That seems to be breaking the markup for the Krajee Explorer FA Theme. Try to set initialPreviewAsData set to true and return only the data (i.e. image file href).

Check the initial preview as data example.

[max-ci]

Tried. Link is updated and I'm returning only link to the image and I set initialPreviewAsData to true. It's strange that it works when you click on global upload button. I think it's an issue with fileinput script. Maybe I'm wrong.

[sklee2020]

Hi, I'm encountering the same issue.. any solutions for this?

[blackcofla]

I just went through a big upgrade in a legacy app for jquery and many js plugins we have including this one, I tried setting the showZoom option to false but no dice, the preview was still showing two images including the mentioned cache one. I tried a couple of things and didn't work but I don't have time to debug everything and make sure the options are compatible with the new plugin options and stuff like that, long story short, I used sanitizeZoomCache option to get rid of the extra image for now:

      'sanitizeZoomCache': function (content) {
        return '';
      }

And it worked perfectly, hope it helps