function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Lokesh Rayapati4Lokesh Rayapati4 

How to upload image by using lightning component

How to add an image functionality in Lightning Component

Hi,
I'm doing a task on aura components in which employees will be available in different Departments. I'm fetching the data and can edit but only thing left is functionalities like adding New record, Delete and adding image functionality.
User-added image
Please help me in this. Below is my code

EmployeeComponent.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" Controller="EmployeeController">
    <aura:attribute name="employeeOptions" type="List" default="[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"></aura:handler>
    <aura:attribute name="spinner" type="boolean" default="true"/>
    <aura:attribute name="isEdit" type="boolean" default="true"/>
    <aura:attribute name="employeeList" type="List" default="[]"/>
    <aura:if isTrue="{!v.spinner}">
        <div class="exampleHolder">
            <lightning:spinner alternativeText="Loading" size="large" />
        </div>
    </aura:if>
    <div style="background:white">
        <div class="demo-only demo-only--sizing slds-grid slds-wrap" >
            <div class="slds-size_2-of-4">
                <lightning:combobox name="Employee__c" label="Select Department" value="All" placeholder="Select Type" options="{! v.employeeOptions }" onchange="{! c.handleChange }"/>
            </div>
            <div class="slds-size_1-of-2 slds-p-left_x-small" style="margin-top:20px">
                <lightning:button variant="brand" label="Delete" title="Brand action" onclick="{!c.handleClick}" />
                <lightning:button variant="brand" label="Save" title="Brand action" onclick="{!c.handleSave}" />
                <lightning:button variant="brand" label="Edit" title="Brand action" onclick="{!c.handleEdit}" />
                <lightning:button variant="brand" label="Cancel" title="Brand action" onclick="{!c.handleCancel}" />
            </div>
            
        </div>
        <div class="slds-p-top_large">
            <div class="demo-only demo-only--sizing slds-grid slds-wrap">
                <aura:iteration items="{!v.employeeList}" var="item">
                    <aura:if isTrue="{!v.isEdit}">
                        <div class="slds-size_1-of-4">
                            <lightning:card>
                                <p class="slds-p-horizontal_small">
                                    {!item.Name}<br></br>
                                     {!item.Date_of_Birth__c}<br></br>
                                    {!item.Blood_Group__c}<br></br>
                                     {!item.Mobile__c}<br></br>
                                </p>
                            </lightning:card>
                        </div>
                        <aura:set attribute="else">
                            <lightning:card>
                                <p class="slds-p-horizontal_small">
                                   <lightning:input type="text" name="input1" label="Name" value="{!item.Name}"/>
                                    <lightning:input type="date" name="input1" label="Date Of Birth" value="{!item.Date_of_Birth__c}"/>
                                    <lightning:input type="text" name="input1" label="Blood Group" value="{!item.Blood_Group__c}"/>
                                    <lightning:input type="text" name="input1" label="Mobile__c" value="{!item.Mobile__c}"/>
                                </p>
                            </lightning:card>
                        </aura:set>
                    </aura:if>
                    
                </aura:iteration>
            </div>
        </div>
    </div>
</aura:component>

EmployeeController.apxc

public class EmployeeController {
    
    @AuraEnabled
    public static list<Map<String,Object>> getLightningPickListValues(String fieldName, string objectName) {
        list<Map<String,Object>> returnList = new list<Map<String,Object>>();
        try {
            returnList.add(new Map<String,Object>{'label'=>'--Select--','value'=>'--Select--'});
            Map<String, schema.SObjectField> feildMap = Schema.getGlobalDescribe().get(objectName.trim()).getDescribe().fields.getMap();
            list<Schema.PicklistEntry> values = feildMap.get(fieldName.trim()).getDescribe().getPickListValues();
            for (Schema.PicklistEntry obj : values) {
                returnList.add(new Map<String,Object>{'label'=>obj.getLabel(),'value'=>obj.getValue().remove('\'').escapeUnicode()});
            }
            System.debug('MAP with FEILD TYPE : '+returnList);
        } catch (Exception e) {
            System.debug('Error in lightning picklist values : '+e.getMessage()+' at line no :'+e.getLineNumber());
            // return null;
        }
        return returnList;
    }
    
    @AuraEnabled
    public static List<employee__c> getEmployee(string typeEmployee){
        if(typeEmployee == 'All'){
            return [select id, name,Date_of_Birth__c,Mobile__c,Blood_Group__c from employee__c];
        }else{
             return [select id, name,Date_of_Birth__c,Mobile__c,Blood_Group__c from employee__c where Department__c =:typeEmployee ];           
        }
    }
    
     @AuraEnabled
    public static List<employee__c> updateEmployee(List<employee__c> dataList){
        system.debug('Data before update : '+dataList);
        update dataList;
        system.debug('Data after update : '+dataList);
        return dataList;
    }
    
}

EmployeeComponentController.js

({
    doInit : function(component, event, helper) {
        console.log('In Doint');
        var action = component.get("c.getLightningPickListValues");
        action.setParams({
            "fieldName":'Department__c',
            "objectName":'Employee__c'
        });
        action.setCallback(this,function(response){
            console.log('response of picklist : ',response.getReturnValue());
            component.set("v.employeeOptions",response.getReturnValue());
            var actionTwo = component.get("c.getEmployee");
            actionTwo.setParams({
                "typeEmployee":"All"
            });
            actionTwo.setCallback(this,function(response){
                component.set("v.spinner",false);
                console.log('data : ',response.getReturnValue());
                component.set("v.employeeList",response.getReturnValue());
            })
            $A.enqueueAction(actionTwo);
        });
        
        $A.enqueueAction(action);
    },
    
    handleChange : function(component,event,helper){
        component.set("v.spinner",true);
        const type = event.getSource().get("v.value"); 
        var actionTwo = component.get("c.getEmployee");
        actionTwo.setParams({
            "typeEmployee":type
        });
        actionTwo.setCallback(this,function(response){
            component.set("v.spinner",false);
            console.log('data : ',response.getReturnValue());
            component.set("v.employeeList",response.getReturnValue());
            component.set("v.spinner",false);
        })
        $A.enqueueAction(actionTwo);
    },
    
    handleEdit : function(component,event,helper){
        console.log('edit');
        component.set("v.isEdit",false);
    },
    handleCancel : function(component,event,helper){
        console.log('cancel');
        component.set("v.isEdit",true);
    },
    handleSave : function(component,event,helper){
        var list = component.get("v.employeeList");
        console.log('Data : ',list[0]);
         component.set("v.spinner",true);
        var actionTwo = component.get("c.updateEmployee");
        actionTwo.setParams({
            "dataList":list
        });
        actionTwo.setCallback(this,function(response){
            console.log('data : ',response.getReturnValue());
            component.set("v.employeeList",response.getReturnValue());
            component.set("v.spinner",false);
             component.set("v.isEdit",true);
             $A.get('e.force:refreshView').fire();
        })
        $A.enqueueAction(actionTwo);
        
    }
})
 
PriyaPriya (Salesforce Developers) 

Hi Lokesh,

Kindly take the refernce from this example that matches your requirement.

https://www.forcetalks.com/blog/image-uploader-an-amazing-lightning-component/

Please mark it as best answer if it helps.

Regards,

Priya Ranjan