File Thumbnail preview & Icon using with Lightning File Upload in Lightning Web Component ☁️⚡️

In this video I will share the code to display the file thumbnail picture in a grid after uploading it using Lightning File Uploader.
It will create a gallery kind of layout on the page. Also we will display icon of file type in the block like if file type is PDF then it will display pdf icon & if the type is JPG then it will show image icon above it.
I have used two components here. In first component I am having my Lightning File Upload code to save the image and underneath that I am having a child component to display file preview in a card to show a gallery kind of layout.
#Files #LWC #salesforce
Join me on Instagram : / iamkapilbatra
Blog : www.salesforce...
Website : www.salesforce...​​
LinkedIn : / salesforcebolt
Twitter : / salesforcebolt​​
Facebook : / iamsalesforcebolt

[@aneelas1111]

Can we have a custom preview or thumbnail of photo uploaded in Experience Site? Please do answer!

[@SalesforceBolt]

The same custom LWC should work in Experience Site as well.

[@sejaladatiya]

Hiiii Great Stuff. Thanks for the detailed demo as well. i have a query that.. if i want to show only recently uploaded files in thumbnail not all the documents from object.. then how can i get that... should i add filter ??? could u please help with that.. Thanks

[@SalesforceBolt]

Sorry for delay in response. Yes I believe a filter should work here, maybe ORDER BY CreatedDate DESC

[@csoutsource]

This is phenomenal work - I was wondering if you have the code for the preview and delete. I understand how delete would work in the backend, but preview code is something I am less familiar with.

[@SalesforceBolt]

Thanks, glad you like it! For the preview code you may follow below link - www.salesforcebolt.com/2021/11/file-preview-modal-in-lightning-web-component.html

[@alexiaribeiro3482]

Congrats for this component :) Do you know if it's possible to fill a custom field on Content Version in the "handleUploadFinished" function? I'm trying this, but I wasn't able to succeed

[@SalesforceBolt]

Hey, yes you can do that on handleUploadFinished. Are you getting any error? Could you please share it here so I can help!

[@Impromptu21]

Hi @salesforce Bolt i tried using this in customer potal but my users are not able to upload the file .It works good for admin but not for other users in portal .can you please guide me ,is it permission issue or somt else

[@SalesforceBolt]

Are you still having this issue? Is your url is available publicly?

[@charleshung157]

Hi ! I tried to implement this But I realized you did it from Record Page, what if I want to do it from LWC in HomePage ? Is it possible ? I tried but from HomePage I keep getting undefined recordId

[@SalesforceBolt]

Hey yes it's possible in home page also. Can you please share the requirement and error as well.

[@charleshung157]

@@SalesforceBolt My requirement is from home page I have a button to show modal. The modal has form to add new object. Lets call the object Staff. But for every staff I need to upload their document. Therefore the staff new object is not existed yet. Until user click submit button and it will upload the doc too. There is no error. The recordId is simply undefined so it does nothing. But I wonder maybe because I did not use any record. In your example you used it on a page with an object of an account opened. Maybe that is why you have recordId.

[@rajashekertummala4684]

HI I have used the same code which you provided but why the files are not visible for other users who are also an admins in salesforce. Ex: my colleague not able to see the files which i uploaded and i am not able to see his files . 2. The url you had given in the blog to open the doc files in browser also not supporting the preview .i am getting no preview available. please provide any other url to open the .doc/.docx/.txt/.xml anyone extension to open in the browser

[@SalesforceBolt]

Hey that seems like permission issue. If you want everyone to access your files then you have to keep it public. Also if you are getting any error then try to copy same code from the code snippet below. www.salesforcebolt.com/2021/11/file-thumbnail-preview-lightning-web-component-salesforce.html

[@rajashekertummala4684]

@@SalesforceBolt Thanks for the reply. Can you please let me now how to upload a file through code in apex ? As i have scenario where the file should be created and it should be visible in the custom implementation code that you developed. Current scenario we are able to create an attachment under Notes&Attachment and File which provided by salesforce but that functionality not available to copy data from the file . By using your code at least i am able to copy the data for .pdf. i wanted to migrate the data or file from Notes&Attachment to this place where we developed preview thumbnail?

[@prakaranverma3278]

I have one senario. I have created a custom email components in that as an attachment i am using the lightning file upload. I have stated which all files is supported. For the files which are not support its giving a error message that file format not supported. Till here it's okay. At one time I upload a supported file and then try to upload a non supported file. The error comes. This error message remains over there even after sending email. Any idea how error message could be removed after sending email.

[@SalesforceBolt]

Why don't you just add a check for non supported files try to avoid processing it so it won't be going in the catch block and your code will be in a good stage.

[@rohanchopra1995]

I am uploading files from FSL mobile app and can see those in the out of the box file section but on this lightning page. What could be the reason? Does it only show files uploaded using the upload functionality given in the component and not from anywhere else?

[@SalesforceBolt]

Rohan I am not sure about FSL app. but yes while uploading a file using file upload it will create a thumbnail of it automatically.

[@anshikasrivastava7139]

@@SalesforceBolt can u explain how to fetch image custom field by lwc from custom object

[@himanshun9470]

Bhaiya, where is the full code for this?

[@SalesforceBolt]

Here you go www.salesforcebolt.com/2021/11/file-thumbnail-preview-lightning-web-component-salesforce.html

[@himanshun9470]

@@SalesforceBolt Bhaiya, I keep getting these errors for both my LWC's - 'No base file for markup://c:previewFileThumbnails' and 'No base file for markup://c:previewFileThumbnailCard'. I followed the naming conventions and all but still keeps persisting

[@SalesforceBolt]

@@himanshun9470 it’s because your child components name is different. You need to make sure that you use same name in parent. For example if the child component name is previewFileComponent then in parent you should add it like