Lightning component to get, set and delete community user profile photo

ProfilePhoto.cmp

<aura:component implements="forceCommunity:availableForAllPageTypes" controller="ProfilePhotoCtrl" access="global">
	
    <aura:attribute name="photo" type="Object" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:handler name="render" value="{!this}" action="{!c.onRender}"/>
    
    <lightning:card class="slds-p-horizontal_medium">
        <lightning:spinner aura:id="spinner" />
        <aura:if isTrue="{!empty(v.photo) == false}">
            <div class="c-profile-img">
                <img class="profile-img" src="{!v.photo.mediumPhotoUrl}" />
            </div>
        </aura:if>
        
        <lightning:input name="file1" type="file" label="Profile Photo" multiple="false" accept="image/png, image/jpeg" onchange="{! c.handleFilesChange }"/>
        <lightning:button variant="destructive" label="Delete Photo" title="Delete Photo" onclick="{! c.handleDeletePhoto }"/>
    </lightning:card>
    
</aura:component>

ProfilePhoto.css

.THIS .c-profile-img {
    position: relative;
    display: inline-block;
}
.THIS .profile-img {
    display: block;
    width: 6.5rem;
    height: 6.5rem;
    border: 1px solid #e2ebf6;
    border-radius: 50%;
    overflow: hidden;
}

ProfilePhotoController.js

({
    doInit: function(component, event, helper) {
        helper.loadProfilePhoto(component);
    },
    handleFilesChange: function(component, event, helper) {
        const file = event.target.files[0];
        console.log(file.type);
        var reader = new FileReader();
        reader.onload = () => {
            var base64 = reader.result.split(',')[1];
            var fileType = file.type;
            var params = {
            	base64Photo: base64,
            	contentType: fileType
            };
            helper.showSpinner(component);
            helper.promisify(component, 'c.setCommunityUserPhoto', params).then(function(res){
                console.log('photo set');
                helper.hideSpinner(component);
                if (res.status == true) {
                    helper.loadProfilePhoto(component);
                }
            }).catch(function(err){
                helper.hideSpinner(component);
                console.log(err);
            });
        }
        reader.readAsDataURL(file);
	},
    handleDeletePhoto: function(component, event, helper) {
    	helper.promisify(component, 'c.deleteCommunityUserPhoto').then(function(res){
            if (res.status == true) {
                helper.loadProfilePhoto(component);
            }
        });
    },
    onRender: function(component, event, helper) {
    	helper.hideSpinner(component);
    }
})

ProfilePhotoCtrl.cls

public class ProfilePhotoCtrl {
    
    @AuraEnabled
    public static Map<String, Object> getCommunityUserPhoto() {
        Map<String, Object> result = new Map<String, Object>();
        try {
            // get logged in user id
            String userId = UserInfo.getUserId();
            // get community id
            String networkId = Network.getNetworkId();
            if (networkId != null) {
                // call getPhoto method to retrieve user photo
                ConnectApi.Photo profilePhoto = ConnectApi.UserProfiles.getPhoto(networkId, userId);
                result.put('photo', profilePhoto);
                result.put('status', true);
            } else {
                result.put('status', false);
                result.put('error', 'Invalid Network Id');
            }
        } catch (Exception ex) {
            result.put('status', false);
            result.put('error', ex.getMessage());
        }
        return result;
    }
    
    @AuraEnabled @RemoteAction
    public static Map<String, Object> setCommunityUserPhoto(String base64Photo, String contentType) {        
        Map<String, Object> result = new Map<String, Object>();
        try {
            // get logged in user id
            String userId = UserInfo.getUserId();
            // get the community id
            String networkId = Network.getNetworkId();
            if (networkId != null) {
                String photoName = '';
                if (contentType == 'image/png') {
                    photoName = 'userImage.png';
                } else if (contentType == 'image/jpeg') {
                    photoName = 'userImage.jpg';
                } else {
                    // TODO throw exception
                }
                // convert base64 encoded string to blob
                Blob photoBlob = EncodingUtil.base64Decode(base64Photo);
                // instantiate ConnectApi.BinaryInput object with image data
                ConnectApi.BinaryInput binaryPhoto = new ConnectApi.BinaryInput(photoBlob, contentType, photoName);
                // set the user profile photo
                ConnectApi.Photo profilePhoto = ConnectApi.UserProfiles.setPhoto(networkId, userId, binaryPhoto);
                result.put('status', true);
            } else {
                result.put('status', false);
                result.put('error', 'Invalid Network Id');
            }
        } catch (Exception ex) {
            result.put('status', false);
            result.put('error', ex.getMessage());
        }
        return result;
    }

    @AuraEnabled
    public static Map<String, Object> deleteCommunityUserPhoto() {
        Map<String, Object> result = new Map<String, Object>();
        try {
            // get logged in user id
            String userId = UserInfo.getUserId();
            // get community id
            String networkId = Network.getNetworkId();
            if (networkId != null) {
                // call deletePhoto method from UserProfiles class
                ConnectApi.UserProfiles.deletePhoto(networkId, userId);
                result.put('status', true);
            } else {
                result.put('status', false);
                result.put('error', 'Invalid Network Id');
            }
        } catch (Exception ex) {
            result.put('status', false);
            result.put('error', ex.getMessage());
        }
        return result;
    }
}

ProfilePhotoHelper.js

({
    promisify: function(component, actionName, params) {
        return new Promise($A.getCallback(function (resolve, reject) {
            var action = component.get(actionName);
            if (params) {
                action.setParams(params);
            }
            action.setCallback(this, function(response) {
                var state = response.getState();
                if (state === "SUCCESS") {
                    resolve(response.getReturnValue());
                } else if (state === "ERROR") {
                    reject(response.getError());
                } else {
                    reject('BAD_STATUS');
                }
            });
            $A.enqueueAction(action);
        }));
    },
    loadProfilePhoto: function(component) {
        var helper = this;
        helper.showSpinner(component);
        setTimeout(function(){
            helper.promisify(component, 'c.getCommunityUserPhoto').then(function(res){
                helper.hideSpinner(component);
                if (res.status == true) {
                    component.set('v.photo', res.photo);
                }
            });
        }, 1000);
    },
    showSpinner: function(component) {
        var spinner = component.find('spinner');
        $A.util.removeClass(spinner, 'slds-hide');
    },
    hideSpinner: function(component) {
        var spinner = component.find('spinner');
        $A.util.addClass(spinner, 'slds-hide');
    }
})