File Preview Modal in Lightning Web Component | Salesforce ☁️⚡️
ฝัง
- เผยแพร่เมื่อ 16 ก.ย. 2024
- In this video I will share the code to preview files in a Modal in Lightning Web Component.
There are three component in this example -
1. PreviewFileThumbnails - The parent component to upload the file.
2. PreviewFileThumbnailCard - Child component to display image preview in a thumbnail gallery view.
3. PreviewFileModal - Child component to display selected thumbnail file in a new modal popup for preview.
#Files #PreviewModal #salesforce
Join me on Instagram : / iamkapilbatra
Blog : www.salesforce...
Website : www.salesforce...
LinkedIn : / salesforcebolt
Twitter : / salesforcebolt
Facebook : / iamsalesforcebolt
Thanks for vido and code this save lot more time while developing
Glad it helped!
Thanks for uploading
Glad you like it !
Good one mate!
Thanks man :)
Where can i get these code for reference
For each video you can find code snippets in the description
www.salesforcebolt.com/2021/11/file-preview-modal-in-lightning-web-component.html
Hi @Salesforce bolt
I need to display or preview CMS pdf word and Excel file to the community portal page.
Could you please make a video on that or please help me for this.
Sir suppose I have AL3 file in my desktop and I need to convert that format and read using third party API how I will upload file in that API and retrieve that file in particular format without the use of any object just normally passing desktop file.
Hi there, I would suggest you to convert that file in blob and then pass the blob data to the API.
How we send file as argument
@@anilpoudel5974 you may save that file in your org and then use VersionData from ContentVersion
Hi @salesforce Bolt,
This is amazing
Recently I have also created the LWC component which supports both Attachments and Content Versions.
We have checkbox option there so if user wants to download specific download attachments they can download it in the ZIP file.
But major thing i have faced that is the heap size issue.
So it would be great if you review my code. Please let me know where i can share my code with you.
or help me if we can remove heap size issue to download multiple files and attachments at single click in form of ZIp
Thank you
Hi there, I will try to include this heap size solution in my upcoming video.
@@SalesforceBolt Thank you so much.. waiting 😊
@@shareandcare9083Could you share the approach of showing or preview file using only Attachment (not content version)?
Can you please share the code?
Hi there,
for each video code snippet has attached in the description of it as blog post.
www.salesforcebolt.com/2021/11/file-preview-modal-in-lightning-web-component.html
Hi @Salesforce Bolt, thanks for your explanation! I want to do this preview modal for the pdf file that I have in a VF Page, using a lightning button. Do you have any suggestion ?
You can have that VF page url in src
@@SalesforceBolt Thank you very much for the suggestion Kapil, in fact I did it just in that way.
@@bobbypepetrueno3431 awesome!
Thanks for solution, but not able to preview docx and xls file with this code
Try to put a debug and see if it's getting inside below if block
if (this.file.Extension === "xls") {
return "doctype:excel";
}
can we show preview of csv, exce, doc, xls also?
This is just for image, pdf and doc file. For other types you can display an icon instead of preview and redirect user on click of it.
Hello @salesforce Bolt
can you please tell me , how I can used this component on community site in salesforce .. because when i have added this component on community site ..that time file preview is not possible ...only we can uploads file.
Have you tried it in your scratch org or developer org first ? Was that working there ?
Just want to understand if it's working outside the community sites.
@@SalesforceBolt yes i have tried in my developer org ,it is working to specific record page
@@nikitadavande5387 Have you succeed in using it on community site?
not working for me. trying to use this with carousel. correct url and all
Do you see any error there?
@@SalesforceBolt Hi thanks for the reply. was able to resolve the issue. Now im using your popup modal. I cant seem to change the size of the modal. when trying to add style on it. it changes position instead of changing size
@@Shabloop is it a quick action modal?
@@SalesforceBolt Thank you very much for replying to my comments. I have already resolved the issue when i was watching your wiring video. seems that i had an issue with my wiring method when iterating the data.
@@Shabloop great, glad you figured it out!
Hi, can you explain how are you creating these image urls: /sfc/servlet.shepherd/version ?
Hi, this is the root URL of images in a Salesforce Org. It will be same in your org as well!