File Preview and Download Using LWC | Lightning Web Component
In this tutorial, you will learn about File Preview and Download using LWC. I am covering the following topics in this session
1) Component Creation
2) Fetching file Details by sending recordId to Apex
3) Rendering Data and making it Downloadable
4) Preview of file on button click
5) Navigation in LWC
APEX CODE
======================
gist.github.com/karkranikhil/...
LIGHTNING DESIGN SYSTEM - www.lightningdesignsystem.com...
FOR COOL STUFF OF LIGHTNING WEB COMPONENT
www.salesforcetroop.com/
FOLLOW ME -
FACEBOOK - / salesforcetroop
LINKEDIN - / nikhilkarkra
TWITTER - @karkra_nikhil
This is especially for all the students and IT professional who wants to make their career in Salesforce.
PLEASE DO LIKE, SHARE AND SUBSCRIBE THIS VIDEO WITH ALL YOUR STUDENT NETWORK, IT NETWORK AND SALESFORCE NETWORK.
Let everyone learn Salesforce and become a part of our #Ohana.#navigation #lwc
Пікірлер: 51
Thanks, a very good stuff as usual, simple, clear and very useful.
Great tutorial, simple and powerful, thank you for sharing this !
Great tutorial step by step. Thanks a lot! Good expertise, actually i didn't know about the grid_generator👍👍👍
Nice tutorial. Keep up the great work ever. Thanks a lot.
Can you share how to open same file using same LWC component in Community?
Hi, how can we preview csv file or xls file in this? what approach do we have to follow for it?
Hi. I have a lwc which display as a credit card model UI. So when I click on download button i need that displayed card as an image.Png. pls suggest
How can we use the pdf download functionality without using Scoped imports '@salesforce' ? Because to use scoped imports, we need to turn on LWS under session settings, and enabled LWS affects the custom LWC components.
Hello, this tutorial was very useful for me I also have one question if we want to delete file how to do it ?
Thanks, It's great .Could you explain, How to add in community page?
Thank you for posting this. I was wondering, is this feature available within an community page? I tried implementing it and I can grab the Id from the content document, but I am not able to preview/download the document.
@snehagupta5245
Жыл бұрын
did you get the answer?If yes, whats the solution?
how to get a file extension along with an Id and label?
Good
Hi, Nikhil Thanks for share this. I have a question, is possible refresh the component automatically always a new file is uploaded in the record?
@salesforcetroop
3 жыл бұрын
In our approach currently not. But if your file upload is a separate component you can trigger an event to filePreviewAndDownload component and refresh the apex explicitly
greate tutorial ,please make vedio on how to download Account object All field records in file object in PDF format ....thanks
that will work for .CSV file or not
Can you share how to open file using same LWC component in community site
Hii.. That preview not showing in Salesforce mobile app . How can i see the preview in mobile app
Hi I can't find custom components my components are empty
Can you also tell how to print the files
Good Stuff Nikhil. If I want to download all attachments in a single click how can Manage it? Thanks in Advance.
@salesforcetroop
3 жыл бұрын
create a button and on click of that fetch all the a tags that has download link and trigger click using js. It will work.
@kep5358
3 жыл бұрын
@@salesforcetroop Thanks! I did the same thing. But For each attachment it opening new window and closes automatically. Do you have any idea to stay at same window and download all attachments. download(recordId) { console.log(recordId); this[NavigationMixin.Navigate]({ type: 'standard__webPage', attributes: { url: window.location.origin + '/sfc/servlet.shepherd/document/download/' + recordId } }, false); }
What if we dont want to preview file on full screen. I want to show file in div. Can we achieve this?
@salesforcetroop
3 жыл бұрын
Yes using .
@rajat19961
3 жыл бұрын
What to use in src?
@rajat19961
3 жыл бұрын
I tried using lightning:fileCard in but it was giving error
@salesforcetroop
3 жыл бұрын
@@rajat19961 get url() { return '/sfc/servlet.shepherd/document/download/' + this.fileId; } try this
Hi, Nikhil Thanks for the good stuff . Its very useful. I have question will it be worked in community page as well if we pass the id? Or will it be different?
@salesforcetroop
3 жыл бұрын
in Community named__page navigation is not possible currently. You can try something like this handleFilePreView(event){ this[NavigationMixin.Navigate]({ type: 'standard__recordPage ', attributes: { pageName: 'filePreview', recordId: event.target.value, objectApiName: 'ContentVersion', actionName: 'view', }, state: { selectedRecordId: event.target.value, }, }); }
@jeahernandezg
3 жыл бұрын
@@salesforcetroop it doesn't work :(
hi , i was not able to open the file after clicking on preview button
@salesforcetroop
3 жыл бұрын
There may be some issue in your code or may be u are using this in community,
@KatakamAkhil
3 жыл бұрын
@@salesforcetroop thanks for the reply ,I have done mistake near event.target.dataset now it’s clear Thanks for this video
@balamuruganm5988
2 жыл бұрын
@@KatakamAkhil is it working for community ???
@SarveshNaik-lt2xk
4 ай бұрын
check the visibilty of the fiile by querying
this is available in Salesforce and your logic doesn't work in communities
Is File should be in Salesforce? Can I preview file which is on other cloud based doc server?