Up next in 10
Salesforce Lightning Web Component File Upload and Preview Link
780 views
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
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
#Clip Art & Animated GIFs
#Internet Software
#Photo & Image Sharing