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

  • @triaabderahmane5900
    @triaabderahmane59003 жыл бұрын

    Thanks, a very good stuff as usual, simple, clear and very useful.

  • @ReinierLopez-lu9dz
    @ReinierLopez-lu9dz Жыл бұрын

    Great tutorial, simple and powerful, thank you for sharing this !

  • @dmitry7239
    @dmitry7239 Жыл бұрын

    Great tutorial step by step. Thanks a lot! Good expertise, actually i didn't know about the grid_generator👍👍👍

  • @aakivlogs9499
    @aakivlogs94995 ай бұрын

    Nice tutorial. Keep up the great work ever. Thanks a lot.

  • @GUNJANASWANI
    @GUNJANASWANI2 жыл бұрын

    Can you share how to open same file using same LWC component in Community?

  • @swetadey3227
    @swetadey32272 жыл бұрын

    Hi, how can we preview csv file or xls file in this? what approach do we have to follow for it?

  • @pallerlapradeep9955
    @pallerlapradeep99552 жыл бұрын

    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

  • @abhichohan8837
    @abhichohan8837 Жыл бұрын

    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.

  • @shejalsawant9772
    @shejalsawant9772 Жыл бұрын

    Hello, this tutorial was very useful for me I also have one question if we want to delete file how to do it ?

  • @shikhachaurasia5580
    @shikhachaurasia55802 жыл бұрын

    Thanks, It's great .Could you explain, How to add in community page?

  • @winstonye478
    @winstonye4783 жыл бұрын

    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

    @snehagupta5245

    Жыл бұрын

    did you get the answer?If yes, whats the solution?

  • @mamadakbar9048
    @mamadakbar90483 жыл бұрын

    how to get a file extension along with an Id and label?

  • @raghavendrasharma815
    @raghavendrasharma8153 жыл бұрын

    Good

  • @gustavozanatta8786
    @gustavozanatta87863 жыл бұрын

    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

    @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

  • @randomly717
    @randomly717 Жыл бұрын

    greate tutorial ,please make vedio on how to download Account object All field records in file object in PDF format ....thanks

  • @user-ls2fh2jc1y
    @user-ls2fh2jc1y8 ай бұрын

    that will work for .CSV file or not

  • @mandarshinde2507
    @mandarshinde2507Ай бұрын

    Can you share how to open file using same LWC component in community site

  • @tarakram8083
    @tarakram808310 ай бұрын

    Hii.. That preview not showing in Salesforce mobile app . How can i see the preview in mobile app

  • @mouryascrazy6786
    @mouryascrazy6786 Жыл бұрын

    Hi I can't find custom components my components are empty

  • @chithraprakash8392
    @chithraprakash839211 ай бұрын

    Can you also tell how to print the files

  • @kep5358
    @kep53583 жыл бұрын

    Good Stuff Nikhil. If I want to download all attachments in a single click how can Manage it? Thanks in Advance.

  • @salesforcetroop

    @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

    @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); }

  • @rajat19961
    @rajat199613 жыл бұрын

    What if we dont want to preview file on full screen. I want to show file in div. Can we achieve this?

  • @salesforcetroop

    @salesforcetroop

    3 жыл бұрын

    Yes using .

  • @rajat19961

    @rajat19961

    3 жыл бұрын

    What to use in src?

  • @rajat19961

    @rajat19961

    3 жыл бұрын

    I tried using lightning:fileCard in but it was giving error

  • @salesforcetroop

    @salesforcetroop

    3 жыл бұрын

    @@rajat19961 get url() { return '/sfc/servlet.shepherd/document/download/' + this.fileId; } try this

  • @saikomal9605
    @saikomal96053 жыл бұрын

    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

    @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

    @jeahernandezg

    3 жыл бұрын

    @@salesforcetroop it doesn't work :(

  • @KatakamAkhil
    @KatakamAkhil3 жыл бұрын

    hi , i was not able to open the file after clicking on preview button

  • @salesforcetroop

    @salesforcetroop

    3 жыл бұрын

    There may be some issue in your code or may be u are using this in community,

  • @KatakamAkhil

    @KatakamAkhil

    3 жыл бұрын

    @@salesforcetroop thanks for the reply ,I have done mistake near event.target.dataset now it’s clear Thanks for this video

  • @balamuruganm5988

    @balamuruganm5988

    2 жыл бұрын

    @@KatakamAkhil is it working for community ???

  • @SarveshNaik-lt2xk

    @SarveshNaik-lt2xk

    4 ай бұрын

    check the visibilty of the fiile by querying

  • @mangeshabhang2607
    @mangeshabhang26073 жыл бұрын

    this is available in Salesforce and your logic doesn't work in communities

  • @yunhu99
    @yunhu993 жыл бұрын

    Is File should be in Salesforce? Can I preview file which is on other cloud based doc server?

Келесі