Image overlay is not displayed correctly when having FilePond instances on different pages

[cris770]

Repo steps:

1.Create a react application with the base tag in the index.html

2. In the react application, install the required packages and use FilePond in one of the pages and set an initial image.
3. On another page (different route from the one in step 2) use FilePond and set an initial image.

Expected behavior:

• when I navigate between the two pages, I see the initially set image with an overlay with a radial gradient on top of it

Actual behavior

• on the initial page I see the overlay correctly displayed

• when I navigate to the other page, the overlay doesn't have any gradient on it

I investigated the issue and found that it happens because the overlay is an svg which uses a (local) mask and fill through an url. The url is not correctly updated after navigating to a new route and on the second page.

First page (overlay correctly displayed):

Second page overlay (broken overlay):

Should actually be:

By looking into the library's source code I noticed that if a base tag is present, it sets the urls for fill and mask to the window.location.href + id, which is ok. Also a flag called checkedMyBases is set to true so on page navigation the checkedMyBases is true so the url will not be updated, hence the overlay issue.

Code snippet from the library (where the issue lies) - createImageOverlay.js : ` create: ({ root, props }) => {

        if (!checkedMyBases && document.querySelector('base')) {
            SVG_MASK = SVG_MASK.replace(/url\(\#/g, 'url(' + window.location.href.replace(window.location.hash, '') + '#')
            checkedMyBases = true;
        }

        SVGMaskUniqueId++;
        root.element.classList.add(`filepond--image-preview-overlay-${ props.status }`);
        root.element.innerHTML = SVG_MASK.replace(/__UID__/g, SVGMaskUniqueId);
    },`

Could you please add a fix for this issue? Thanks!

[rikschennink]

Thanks for reporting, the SVG is created on page load, and only once so it's ready immediately, it would probably work to listen for the location change and then update the url. Will look into this when I have some time.

[rikschennink]

can you test with 4.6.7 and let me know if this is fixed

[Amaindex]

I tested version 4.6.7 and the problem is still there😰. I didn't delve into the source code, but the error behaves exactly the same.

[rikschennink]

Can you create a public test case?

[Amaindex]

Can you create a public test case?

Sure, but it'll take a while. I'll do it in my spare time😀

[Amaindex]

Can you create a public test case?

Sorry to have kept you waiting. I have created the test case, please access it here: http://123.57.162.123:6060/first

Dependencies:

...
"dependencies": {
    "@quasar/extras": "^1.0.0",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "filepond": "^4.28.2",
    "filepond-plugin-image-exif-orientation": "^1.0.11",
    "filepond-plugin-image-preview": "4.6.7",
    "quasar": "^1.0.0",
    "vue-filepond": "6.0.3"
  }
...

How to reproduce the problem:

Step 1: Upload an image on first page:

Step 2: Go to another page and upload an image:

(You can upload an image larger than 1MB to test the failed status)

[rikschennink]

Thanks for the detailed test case! Was able to reproduce : )

I just published 4.6.8, should fix it

[Amaindex]

Thank you for your work! I just tested version 4.6.8 and the problem has been fixed.

(Now I can upgrade from version 4.0.1🤣)

[rikschennink]

Fantastic, so glad to hear that : )

I'll close the issue.