This article is all about the Magento 2 customer profile picture option on my account dashboard. I have customized the account dashboard sections and for that, I have created a REST API that will give the option to upload the customer image. So when customers will do the registration then they will see the options to upload picture options for profiles.
After the registration, you will also see the option to upload customer profiles pictures on the My account dashboard.
As per the Magento 2 default functionality, Magento community editions don’t provide customer profile picture upload and update options so its REST API is also not available by default.
This Wishusucess_CustomerImage extension REST API will give more personalization to customers. This model will play a much better role in giving maximum and better personal experience to your customers.
When we provide this facility to the customer, then the customer likes to stay more on his dashboard, this also increases the customer interaction.
It allows you to upload your picture related to the customer on the screen in front of him and also gives the option to the admin to upload and delete the picture of that customer from the back end.
Steps for Magento 2 Customer Profile Picture Option
This module of the picture upload option displays a customer profile picture, and It maintains customer privacy as well.
This REST API of the customer profile picture upload option of the customer allows customers to update their profile images by just uploading another picture on the front end.
Backend Options of This Module
Display Customer profile picture in Customer Grid.
Admin also can upload the customer profile picture or delete the customer profile picture from the customer account section.
Allow Delete/Update picture on the from the customer account section.
Step 1: Register Customer Image Module
app/code/Wishusucess/CustomerImage/registration.php
<?php /** * Category: Wishusucess_CustomerImage * Developer: Hemant Singh Magento 2x Developer * Website: http://wwww.wishusucess.com */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Wishusucess_CustomerImage', __DIR__ );
Step 2: Module XML file
app/code/Wishusucess/CustomerImage/etc/module.xml
<?xml version="1.0"?> <!-- /** * Category: Wishusucess_CustomerImage * Developer: Hemant Singh Magento 2x Developer * Website: http://wwww.wishusucess.com */ --> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Wishusucess_CustomerImage" setup_version="1.0.1" /> </config>
Step 3: Dependency Injection File
app/code/Wishusucess/CustomerImage/etc/di.xml
<?xml version="1.0"?> <!-- /** * Category: Wishusucess_CustomerImage * Developer: Hemant Singh Magento 2x Developer * Website: http://wwww.wishusucess.com */ --> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <preference for="Wishusucess\CustomerImage\Api\CustomInterface" type="Wishusucess\CustomerImage\Model\Api\Custom"/> </config>
Step 4: Route URL for Customer Profile Picture
app/code/Wishusucess/CustomerImage/etc/webapi.xml
<?xml version="1.0"?> <!-- /** * Category: Wishusucess_CustomerImage * Developer: Hemant Singh Magento 2x Developer * Website: http://wwww.wishusucess.com */ --> <routes xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../app/code/Magento/Webapi/etc/webapi.xsd"> <route method="GET" url="/V1/wishusucess/customerimage/"> <service class="Wishusucess\CustomerImage\Api\CustomInterface" method="getPost"/> <resources> <resource ref="anonymous"/> </resources> </route> </routes>
Step 5: Define Frontend Route ID
app/code/Wishusucess/CustomerImage/etc/frontend/routes.xml
<?xml version="1.0"?> <!-- /** * Category: Wishusucess_CustomerImage * Developer: Hemant Singh Magento 2x Developer * Website: http://wwww.wishusucess.com */ --> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd"> <router id="standard"> <route id="customerimage" frontName="customerimage"> <module name="Wishusucess_CustomerImage" /> </route> </router> </config>
Step 6: Consturct Method
This method _construct() will help you to execute our code in a safe way at the start of a class. This method will call automatically when the class is constructed.
app/code/Wishusucess/CustomerImage/Model/Cbackground.php
<?php
/**
* Category: Wishusucess_CustomerImage
* Developer: Hemant Singh Magento 2x Developer
* Website: http://wwww.wishusucess.com
*/
namespace Wishusucess\CustomerImage\Model;
use Magento\Framework\Model\AbstractModel;
class Cbackground extends AbstractModel
{
public function _construct() {
$this->_init('Wishusucess\CustomerImage\Model\Resource\Cbackground');
}
}
Step 7: Initialize Resource Model
app/code/Wishusucess/CustomerImage/Model/Resource/Cbackground.php
<?php
/**
* Category: Wishusucess_CustomerImage
* Developer: Hemant Singh Magento 2x Developer
* Website: http://wwww.wishusucess.com
*/
namespace Wishusucess\CustomerImage\Model\Resource;
use Magento\Framework\Model\ResourceModel\Db\AbstractDb;
class Cbackground extends AbstractDb
{
/**
* Initialize resource model
*
* @return void
*/
protected function _construct()
{
/* Custom Table Name */
$this->_init('customer_entity','entity_id');
}
}
Step 8: Execute Targeted Class
app/code/Wishusucess/CustomerImage/Model/Resource/Cbackground/Collection.php
<?php
/**
* Category: Wishusucess_CustomerImage
* Developer: Hemant Singh Magento 2x Developer
* Website: http://wwww.wishusucess.com
*/
namespace Wishusucess\CustomerImage\Model\Resource\Cbackground;
use Magento\Framework\Model\ResourceModel\Db\Collection\AbstractCollection;
class Collection extends AbstractCollection
{
protected function _construct()
{
$this->_init('Wishusucess\CustomerImage\Model\Cbackground', 'Wishusucess\CustomerImage\Model\Resource\Cbackground');
}
}
Step 9: Store Profile Picture
app/code/Wishusucess/CustomerImage/Model/Api/Custom.php
<?php
/**
* Category: Wishusucess_CustomerImage
* Developer: Hemant Singh Magento 2x Developer
* Website: http://wwww.wishusucess.com
*/
namespace Wishusucess\CustomerImage\Model\Api;
use Psr\Log\LoggerInterface;
class Custom
{
/** @var \Magento\Framework\View\Result\PageFactory */
protected $resultPageFactory;
protected $_branddata;
public function __construct(
\Magento\Framework\View\Result\PageFactory $resultPageFactory,
\Wishusucess\CustomerImage\Model\Cbackground $branddata
) {
$this->resultPageFactory = $resultPageFactory;
$this->_branddata = $branddata;
}
/**
* @inheritdoc
*/
public function getPost($customerid)
{
$response = ['success' => false];
try {
$result= $this->_branddata->getCollection()->getData();
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$storeManager = $objectManager->get('\Magento\Store\Model\StoreManagerInterface');
$storeurll=$storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_WEB);
foreach( $result as $key=>$values)
{
if($values['entity_id']==$customerid)
{
$finaldata=$storeurll."media/sk_profile_pic/".$values['sk_profile_pic'];
}
}
$response=$finaldata;
} catch (\Exception $e) {
$response = ['success' => false, 'message' => $e->getMessage()];
}
$returnArray = $response;
return $returnArray;
}
}
Step 10: Controller Class of Customer Image
Now we have to create a custom controller class for customer profile images that need to process over the model and corporate with other classes.
app/code/Wishusucess/CustomerImage/Controller/Index/Index.php
<?php
/**
* Category: Wishusucess_CustomerImage
* Developer: Hemant Singh Magento 2x Developer
* Website: http://wwww.wishusucess.com
*/
namespace Wishusucess\CustomerImage\Controller\Index;
class Index extends \Magento\Framework\App\Action\Action {
/** @var \Magento\Framework\View\Result\PageFactory */
protected $resultPageFactory;
public function __construct(
\Magento\Framework\App\Action\Context $context, \Magento\Framework\View\Result\PageFactory $resultPageFactory
) {
$this->resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
public function execute() {
$model = $this->_objectManager->create('Wishusucess\CustomerImage\Model\Cbackground');
$test = $model->load(45);
$array = $test->getCollection()->getData();
// var_dump($test->getCollection()->getData());
// echo "<pre>";
// print_r($test->getCollection()->getData());
// print_r(json_encode($test->getCollection()->getData()));
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$storeManager = $objectManager->get('\Magento\Store\Model\StoreManagerInterface');
$storeurll=$storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_WEB);
echo "<pre>";
foreach( $array as $key=>$values)
{
if($values['entity_id']==45)
{
echo $storeurll."media/sk_profile_pic/".$values['sk_profile_pic'];
}
}
die();
}
}
Step 11: CustomInterface GET for Post API
app/code/Wishusucess/CustomerImage/Api/CustomInterface.php
<?php
/**
* Category: Wishusucess_CustomerImage
* Developer: Hemant Singh Magento 2x Developer
* Website: http://wwww.wishusucess.com
*/
namespace Wishusucess\CustomerImage\Api;
interface CustomInterface
{
/**
* GET for Post api
* @return boolean|array
* @param string $customerId customer id.
*
*/
public function getPost($customerid);
}
Step 12: Call Method To Execacute Your Code
app/code/Wishusucess/CustomerImage/Api/Custom.php
<?php
/**
* Category: Wishusucess_CustomerImage
* Developer: Hemant Singh Magento 2x Developer
* Website: http://wwww.wishusucess.com
*/
namespace Wishusucess\CustomApi\Model\Api;
use Psr\Log\LoggerInterface;
class Custom
{
protected $logger;
public function __construct(
LoggerInterface $logger
)
{
$this->logger = $logger;
}
/**
* @inheritdoc
*/
public function getPost($value)
{
$response = ['success' => false];
try {
// Your Code here
$response = ['success' => true, 'message' => $value];
} catch (\Exception $e) {
$response = ['success' => false, 'message' => $e->getMessage()];
$this->logger->info($e->getMessage());
}
$returnArray = json_encode($response);
return $returnArray;
}
}
Now Run Below Command:
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento cache:clean
php bin/magento cache:flush
Key Features of Customer Image Upload Module:
This module gives you the option to upload customer profile images on the front end.
Customers can change the image multiple times.
This will display the customer profile images on the Customer Account dashboard.
Suggested Post:
Customer Attribute: How to Add Custom Customer Attribute in Magento 2
Cart Images: Get Product Image in Customer Cart Magento 2 REST API
How to Send Push Notifications on Android Application