I am currently implementing an image upload functionality in Lightning Web Components (LWC) using FilePond on an LWR Experience Cloud Site (Salesforce).
I have developed a LWC that uses FilePond for image uploads. The component is successfully deployed on my LWR site.
✅ What is working:
- I can select an image file (via drag-and-drop or browse).
- I can fetch the image data.
- I can save it as a Content Document and associate it with the related Contact record in Salesforce.
❌ Issues I am facing:
- Image Preview Not Working – The image does not appear in FilePond preview after drag-and-drop or selecting from browse.
- MIME Type Error –
- On the LWR site, I get the following error in the browser console: lwr_bootstrap_locker:17 Uncaught pt: Lightning Web Security: Unsupported MIME type. at URL. (…/lwr_bootstrap_locker:17:23921) at apply (…/lwr_bootstrap_locker:19:3026) at Object.apply (…/lwr_bootstrap_locker:3:4134) at …/lwr_bootstrap_locker:21:22566
This occurs specifically when using the following FilePond plugin files:
- filepond-plugin-image-preview.min.js
- filepond-plugin-image-transform.min.js
My Questions / Request for Support:
- Why is the FilePond preview not working in my LWC component after selecting or dragging an image?
- How can I resolve the MIME type error on the LWR site so that FilePond plugins load correctly?
What I have tried:
- Implemented the image upload functionality in a LWC using FilePond.
- Integrated FilePond CSS and JS as Salesforce static resources.
- Verified that the upload to Salesforce backend works correctly (Content Document is created and linked).
What I expected:
- When an image file is selected in FilePond, the image preview should appear immediately before uploading.
- There should be no MIME type security errors in the LWR site.
- FilePond should behave the same inside Salesforce LWC/LWR as it does in a standard web environment.
Steps for Reproduction of the Issue -
- Create a new LWC component in Salesforce.
- Download FilePond core + plugins directly from GitHub:
- filepond.min.css
- filepond-plugin-image-preview.min.css
- filepond.min.js
- filepond-plugin-image-preview.min.js
- filepond-plugin-file-validate-size.min.js
- filepond-plugin-file-validate-type.min.js
- filepond-plugin-image-validate-size.min.js
- filepond-plugin-image-resize.min.js
- filepond-plugin-image-crop.min.js
- filepond-plugin-image-exif-orientation.min.js
- filepond-plugin-image-transform.min.js
- Create a single ZIP file of all the above files.
- Name the zip file --> filepond.zip.
- Upload this zip into Salesforce Static Resources.
- Static Resource name --> filepond.
- In the LWC JavaScript file, fetch the static resource and load it using Salesforce’s resource loader.
- I have provided the code snippet with this case, please have a look into it.
Issue getting in the Environment -
- Salesforce LWR Site (Experience Cloud Site)
- Browser - Chrome
Attachments:
1.Screenshots of FilePond plugin files being used. enter image description here
2.Error screenshots. enter image description here
3.Code snippets of the LWC implementation.
1.HTML File - enter image description here
2.JS File -
3.JS-Meta.xml File - enter image description here
Note -
- I have tried to add same component on my Account Record Page in Salesforce, still the image preview issue occurring.
- There is no MIME type issue occur on the Account Record Page in Salesforce, the MIME type issue only occurring on LWR site.
Please let me know, if any other things you will need from my end.
This issue is critical for a client requirement. I would really appreciate your guidance and support as soon as possible.
Thank you for your assistance.
Best regards, Rajat Shende
