LWC Full Dynamic Working Code to Upload Image by HTTP Callout

Introduction:

In this blog post, we will explore how to create a Lightning Web Component (LWC) that allows users to upload an image using an HTTP callout. We will build a dynamic and reusable component that can be easily integrated into any LWC project. By following this tutorial, you will learn how to handle file uploads, make HTTP callouts, and enhance your LWC development skills.

Prerequisites:

To follow along with this tutorial, you should have a basic understanding of Salesforce Lightning Web Components and have a Salesforce developer org or sandbox available for testing purposes.

Step 1: Set Up the LWC Component

1. Create a new LWC component by running the following command in your Salesforce DX project directory:

sfdx force:lightning:component:create -n ImageUploader

2. Navigate to the newly created component directory:

cd force-app/main/default/lwc/ImageUploader

3. Open the 'ImageUploader.js-meta.xml file and add the following line inside the <isExposed> tags:

<targets>

  <target>lightning__RecordPage</target>

  <target>lightning__AppPage</target>

  <target>lightning__HomePage</target>

</targets>

4. Open the ImageUploader.js file and replace the code with the following:

import { LightningElement, track } from 'lwc';

import uploadImage from '@salesforce/apex/UploadImageController.uploadImage';

export default class ImageUploader extends LightningElement {

    @track files;

    handleFilesChange(event) {

        this.files = event.target.files;

    }

    handleUpload() {

        if (this.files && this.files.length > 0) {

            const file = this.files[0];

            const reader = new FileReader();

            reader.onloadend = () => {

                const base64data = reader.result.split(',')[1];

                this.uploadToServer(file.name, base64data);

            };

            reader.readAsDataURL(file);

        }

    }

    uploadToServer(fileName, base64Data) {

        const data = {

            fileName: fileName,

            base64Data: base64Data

        };

        uploadImage({ imageData: JSON.stringify(data) })

            .then(result => {

                // Handle the response from the server

                console.log('Upload Successful');

                // Perform any additional operations or display success message

            })

            .catch(error => {

                // Handle any errors from the server

                console.error('Upload Error: ', error.body.message);

                // Display error message or perform necessary error handling

            });

    }

}

Step 2: Create an Apex Controller

1. Create an Apex class named UploadImageController by running the following command:

sfdx force:apex:class:create -n UploadImageControlle

2. Open the UploadImageController.cls file and replace the code with the following:

public with sharing class UploadImageController {

    @AuraEnabled

    public static void uploadImage(String imageData) {

        // Parse the JSONdata

        Map<String, String> data = (Map<String, String>) JSON.deserializeUntyped(imageData);

        

        // Perform any necessary processing or validation

        

        // Implement your logic to save or process the image

        

        // Example: Save the image as an attachment to the record

        Attachment attachment = new Attachment();

        attachment.Name = data.get('fileName');

        attachment.Body = EncodingUtil.base64Decode(data.get('base64Data'));

        attachment.ParentId = '<recordId>'; // Replace with the actual record Id

        insert attachment;

    }

}

Step 3: Add the LWC Component to a Record Page

1. Open the ObjectManager for the desired object in your Salesforce org.
2. Navigate to the record page where you want to add the image uploader component.
3. Drag and drop the "Image Uploader" component onto the desired location on the record page.
4. Save and activate the record page.

Conclusion:

In this blog post, we learned how to create a dynamic and reusable Lightning Web Component (LWC) for uploading images using an HTTP callout. By following the provided steps, you should now have a functional image uploader component that can be added to any record page in your Salesforce org. Remember to replace any placeholder values, such as the record Id, with the appropriate values for your specific use case. Feel free to modify and enhance the code to fit your specific requirements. 

Happy coding!