hello everyone in this video we are
going to see in Salesforce lightning web
component how we can allow users to
upload an image and also once it is
uploaded how to get a preview
link for example here this is a
lightning web component I'm able to
select an
image once it is
selected and once it is uploaded
successfully I'm able to select and
preview the
image let's see how to achieve this
using lightning web
component in my lightning web component
HTML I have a lightning card inside the
lightning web card uh lightning card I
have a div and inside the div I have a
template this will be displayed only if
the value of file name is available so
once the uh users upload the image and
then uh once it is uploaded successfully
then only the file name will be loaded
will be populated so that this
particular block will be displayed so
that they can uh preview the image I'm
using anchor tag and I'm not using uh HF
attribute I'm directly using on click
whenever this file name is clicked it
will call this method called preview
image and I'm using lightning file
upload tag so that the users can upload
the files label accept equal to accepted
formats and record ID I'm passing the ID
of the current uh object record uh I was
U demoing using account uh object so it
will uh store those uh files in the
account uh account record once it is
uploaded successfully it will call the
method called handle upload
finished I'm using navigation mixin in
my
JavaScript and um at API record ID so
that it will get the current record ID
so it will be account object ID uh file
name variable I have declared St Str
Content ID I have declared as an
variable for the accepted formats I'm
using JPEG and
PNG whenever the file is uploaded
successfully it will call handle upload
finished I'm getting all the files since
I'm not using multiple it will have only
one file so I'm getting the first uh
file that got uploaded so it will be
just one file and using a console.log
statement I'm just displaying what
content is inside that inside that once
it is uploaded successfully when the
file is successfully uh uploaded we will
get document ID I'm storing that in St
Str uh content doc ID variable and file
name uh in order to get the file name
I'm using the name attribute from the
uploaded files value so the file name
will be stored in file name variable
whenever the users click preview image
uh um uploaded image link it will call
preview image method
and using navigation. mixin um and uh
since I'm using navigate it will
directly navigate to that particular uh
page so the type I'm using standard
uncore named page in the attributes I'm
using the page name as file preview in
the state I am passing selected record
ID value as St Str content doc ID so
here we have to pass the content
document ID value that that will be uh
retrieved using the uploaded file
document ID uh attribute
value I'm using lightning record page as
the target uh so that I can add that
lightning web component uh on the
lightning record
page please check the video description
in the video description I have shared
my blog post from the Block post you
should be able to get the sample
lightning web component code which was
referenced in this video
I hope it was
helpful thank you for
watching