Up next in 10
Salesforce Lightning Web Component File Upload and Preview Link
May 14, 2025
For Salesforce Lightning Web Component File Upload and Preview Link, we can use lightning-file-upload to upload file and Lightning Navigation for Preview URL.
Blog Post:
https://www.infallibletechie.com/2024/01/salesforce-lightning-web-component-file-upload-and-preview-link.html
Show More Show Less View Video Transcript
0:10
hello everyone in this video we are
0:12
going to see in Salesforce lightning web
0:15
component how we can allow users to
0:17
upload an image and also once it is
0:21
uploaded how to get a preview
0:25
link for example here this is a
0:27
lightning web component I'm able to
0:30
select an
0:31
image once it is
0:35
selected and once it is uploaded
0:37
successfully I'm able to select and
0:41
preview the
0:45
image let's see how to achieve this
0:48
using lightning web
0:51
component in my lightning web component
0:54
HTML I have a lightning card inside the
0:58
lightning web card uh lightning card I
1:00
have a div and inside the div I have a
1:04
template this will be displayed only if
1:06
the value of file name is available so
1:09
once the uh users upload the image and
1:13
then uh once it is uploaded successfully
1:16
then only the file name will be loaded
1:18
will be populated so that this
1:21
particular block will be displayed so
1:23
that they can uh preview the image I'm
1:27
using anchor tag and I'm not using uh HF
1:31
attribute I'm directly using on click
1:34
whenever this file name is clicked it
1:36
will call this method called preview
1:39
image and I'm using lightning file
1:41
upload tag so that the users can upload
1:43
the files label accept equal to accepted
1:47
formats and record ID I'm passing the ID
1:50
of the current uh object record uh I was
1:54
U demoing using account uh object so it
1:58
will uh store those uh files in the
2:03
account uh account record once it is
2:05
uploaded successfully it will call the
2:07
method called handle upload
2:11
finished I'm using navigation mixin in
2:14
my
2:15
JavaScript and um at API record ID so
2:18
that it will get the current record ID
2:21
so it will be account object ID uh file
2:25
name variable I have declared St Str
2:27
Content ID I have declared as an
2:29
variable for the accepted formats I'm
2:32
using JPEG and
2:34
PNG whenever the file is uploaded
2:37
successfully it will call handle upload
2:39
finished I'm getting all the files since
2:42
I'm not using multiple it will have only
2:44
one file so I'm getting the first uh
2:49
file that got uploaded so it will be
2:51
just one file and using a console.log
2:54
statement I'm just displaying what
2:56
content is inside that inside that once
2:59
it is uploaded successfully when the
3:01
file is successfully uh uploaded we will
3:03
get document ID I'm storing that in St
3:06
Str uh content doc ID variable and file
3:09
name uh in order to get the file name
3:11
I'm using the name attribute from the
3:13
uploaded files value so the file name
3:16
will be stored in file name variable
3:19
whenever the users click preview image
3:25
uh um uploaded image link it will call
3:28
preview image method
3:30
and using navigation. mixin um and uh
3:36
since I'm using navigate it will
3:38
directly navigate to that particular uh
3:41
page so the type I'm using standard
3:44
uncore named page in the attributes I'm
3:47
using the page name as file preview in
3:50
the state I am passing selected record
3:52
ID value as St Str content doc ID so
3:56
here we have to pass the content
3:58
document ID value that that will be uh
4:01
retrieved using the uploaded file
4:02
document ID uh attribute
4:07
value I'm using lightning record page as
4:11
the target uh so that I can add that
4:13
lightning web component uh on the
4:16
lightning record
4:18
page please check the video description
4:21
in the video description I have shared
4:23
my blog post from the Block post you
4:25
should be able to get the sample
4:26
lightning web component code which was
4:28
referenced in this video
4:38
I hope it was
4:44
helpful thank you for
4:58
watching
#Internet Software
#Clip Art & Animated GIFs
#Photo & Image Sharing