Have you ever wanted to let users upload a profile picture in Salesforce with an easy cropping experience? This is similar to what we get when uploading profile pictures on social media apps. There, we see the option to crop the image before uploading.
We can create an image cropper in Salesforce with Lightning Web Component using the external JS library.
Create Image Cropper in Lightning Web Component Using JS Library
In the steps below, we will create the image cropper using the JS library Croppie in the Lightning Web Component, and the cropped image will be saved in the Contact record.
Set Up Croppie as a Static Resource
To use the external JS library, we need to create a static resource that we can import into the Lightning Web Component. Download it first from https://foliotek.github.io/Croppie/. We only need the croppie.css and croppie.js files from the library.
To create a static resource, navigate to Salesforce setup > static resource. Then, create a static resource with the name croppieCss, upload the croppie.css, and make the cache control Public.
In the same way, create another static resource, croppieCSS, and upload the croppie.CSS file.
After creating the static resource for the JS library, let’s move ahead and create the Lightning Web Component.
Create the Lightning Web Component
To create the Lightning Web Component, navigate to the VS Code IDE that you have set up with the Salesforce org.
In VS Code, press the button ctrl+shift+p and in the command palette select SFDX: Create Lightning Web Component.