How to Create Custom Image Attribute for a Customer in Magento 2

A picture can express a thousand words!

Do you want the Magento 2 store customer to upload a profile picture? Or you require them to upload a picture of important documents like license, signature, etc.

The default Magento 2 does not support for the same.

Hence, the post gives the programmatic method to create custom image attribute for a customer in Magento 2 as shown in the figure:

The frontend customer can use it as shown here:

Steps to create custom image attribute for a customer in Magento 2:

1. Create InstallData.php file at app/code/[Vendor]/[module]/Setup/InstallData.php
   
   <?php   namespace [Vendor]\[module]\Setup;   use Magento\Eav\Setup\EavSetupFactory; use Magento\Customer\Setup\CustomerSetupFactory; use Magento\Framework\Setup\InstallDataInterface; use Magento\Framework\Setup\ModuleContextInterface; use Magento\Framework\Setup\ModuleDataSetupInterface; class InstallData implements InstallDataInterface {     private $eavSetupFactory;     private $customerSetupFactory;     public function __construct(         EavSetupFactory $eavSetupFactory,         CustomerSetupFactory $customerSetupFactory     )     {         $this->eavSetupFactory = $eavSetupFactory;         $this->customerSetupFactory = $customerSetupFactory;     }     public function install(         ModuleDataSetupInterface $setup,         ModuleContextInterface $context     ) {         $setup->startSetup();         $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);         $customerSetup = $this->customerSetupFactory->create(['setup' => $setup]);         $attributeCode = 'customer_image';         $customerSetup->addAttribute(             \Magento\Customer\Model\Customer::ENTITY,             $attributeCode,             [                 'type' => 'text',                 'label' => 'Customer File/Image',                 'input' => 'file',                 'source' => '',                 'required' => false,                 'visible' => true,                 'position' => 200,                 'system' => false,                 'backend' => ''             ]         );         // used this attribute in the following forms         $attribute = $customerSetup->getEavConfig()             ->getAttribute(\Magento\Customer\Model\Customer::ENTITY, $attributeCode)             ->addData(                 ['used_in_forms' => [                     'adminhtml_customer',                     'adminhtml_checkout',                     'customer_account_create',                     'customer_account_edit'                 ]                 ]);         $attribute->save();         $setup->endSetup();     } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

   <?php   namespace [Vendor]\[module]\Setup;   use Magento\Eav\Setup\EavSetupFactory; use Magento\Customer\Setup\CustomerSetupFactory; use Magento\Framework\Setup\InstallDataInterface; use Magento\Framework\Setup\ModuleContextInterface; use Magento\Framework\Setup\ModuleDataSetupInterface;   class InstallData implements InstallDataInterface {     private $eavSetupFactory;     private $customerSetupFactory;       public function __construct(         EavSetupFactory $eavSetupFactory,         CustomerSetupFactory $customerSetupFactory     )     {         $this->eavSetupFactory = $eavSetupFactory;         $this->customerSetupFactory = $customerSetupFactory;     }       public function install(         ModuleDataSetupInterface $setup,         ModuleContextInterface $context     ) {         $setup->startSetup();           $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);         $customerSetup = $this->customerSetupFactory->create(['setup' => $setup]);           $attributeCode = 'customer_image';           $customerSetup->addAttribute(             \Magento\Customer\Model\Customer::ENTITY,             $attributeCode,             [                 'type' => 'text',                 'label' => 'Customer File/Image',                 'input' => 'file',                 'source' => '',                 'required' => false,                 'visible' => true,                 'position' => 200,                 'system' => false,                 'backend' => ''             ]         );           // used this attribute in the following forms         $attribute = $customerSetup->getEavConfig()             ->getAttribute(\Magento\Customer\Model\Customer::ENTITY, $attributeCode)             ->addData(                 ['used_in_forms' => [                     'adminhtml_customer',                     'adminhtml_checkout',                     'customer_account_create',                     'customer_account_edit'                 ]                 ]);           $attribute->save();         $setup->endSetup();     } }

2.  Add Image Upload Field in Customer Registration Page,
   Create customer_account_create.xml file at app/code/[Vendor]/[Module]/view/frontend/layout/customer_account_create.xml
   
   <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">     <body>         <referenceContainer name="form.additional.info">             <block class="Magento\Framework\View\Element\Template" name="custom_additional_field_register" template="[Vendor]_[Module]::customer/form/imagefieldregister.phtml"/>         </referenceContainer>     </body> </page>

   1 2 3 4 5 6 7 8

   <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">     <body>         <referenceContainer name="form.additional.info">             <block class="Magento\Framework\View\Element\Template" name="custom_additional_field_register" template="[Vendor]_[Module]::customer/form/imagefieldregister.phtml"/>         </referenceContainer>     </body> </page>

3. Create imagefieldregister.phtml file at app/code/[Vendor]/[Module]/view/frontend/templates/customer/form/imagefieldregister.phtml
   
   
     <fieldset class="fieldset file-upload">     <div class="field customer_file_upload">         <label for="customer_image" class="label"><span><?php /* @escapeNotVerified */                 echo __($helper->FileLabel1()) ?></span></label>         <div class="control">             <input type="file" name="customer_image" id="customer_image" title="<?php /* @escapeNotVerified */             echo __('Custom Image') ?>" class="input-text" data-validate="{required:false}">         </div>     </div>     </<fieldset>

   1 2 3 4 5 6 7 8 9 10

   <fieldset class="fieldset file-upload">     <div class="field customer_file_upload">         <label for="customer_image" class="label"><span><?php /* @escapeNotVerified */                 echo __($helper->FileLabel1()) ?></span></label>         <div class="control">             <input type="file" name="customer_image" id="customer_image" title="<?php /* @escapeNotVerified */             echo __('Custom Image') ?>" class="input-text" data-validate="{required:false}">         </div>     </div>     </<fieldset>

4. To display the image in the custom account section,
   Cretae customer_account_edit.xml file at app/code/[Vendor]/[Module]/view/frontend/layout/customer_account_edit.xml
   
   <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">     <update handle="customer_account"/>     <body>         <referenceContainer name="form.additional.info">             <block class="[Vendor]\[Module]\Block\Customer\Account" name="additional_field_account" template="[Vendor]_[Module]::customer/form/imagefieldaccount.phtml"/>         </referenceContainer>     </body> </page>

   1 2 3 4 5 6 7 8 9

   <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">     <update handle="customer_account"/>     <body>         <referenceContainer name="form.additional.info">             <block class="[Vendor]\[Module]\Block\Customer\Account" name="additional_field_account" template="[Vendor]_[Module]::customer/form/imagefieldaccount.phtml"/>         </referenceContainer>     </body> </page>

5. Cretae imagefieldaccount.phtml file at app/code/[Vendor]/[Module]/view/frontend/templates/customer/form/imagefieldaccount.phtml
   
   
   <fieldset class="fieldset create account" data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>"> <legend class="legend"> <span><?php /* @escapeNotVerified */echo __('Image Uploaded') ?></span> </legend> <?php if ($url = $block->getFileUrl()): ?> <div class="field"> <img src="<?php echo $url ?>" alt="image" /> </div> <?php endif;?> </fieldset>

   1 2 3 4 5 6 7 8 9 10

   <fieldset class="fieldset create account" data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>">     <legend class="legend">         <span><?php /* @escapeNotVerified */echo __('Image Uploaded') ?></span>     </legend>     <?php if ($url = $block->getFileUrl()): ?>     <div class="field">         <img src="<?php echo $url ?>" alt="image" />     </div>     <?php endif;?> </fieldset>

6. Create Account.php file at app/code/[Vendor]/[Module]/Block/Customer/Account.php
   
   
   <?php namespace [Vendor]\[Module]\Block\Customer; use Magento\Backend\Block\Template\Context; use Magento\Framework\UrlInterface; use Magento\Customer\Model\SessionFactory; use Magento\Framework\View\Element\Template; class Account extends Template {     protected $urlBuilder;     protected $customerSession;     protected $storeManager;     protected $customerModel;     public function __construct(         Context $context,         UrlInterface $urlBuilder,         SessionFactory $customerSession,         \Magento\Store\Model\StoreManagerInterface $storeManager,         \Magento\Customer\Model\Customer $customerModel,         array $data = []     )     {         $this->urlBuilder            = $urlBuilder;         $this->customerSession       = $customerSession->create();         $this->storeManager          = $storeManager;         $this->customerModel         = $customerModel;         parent::__construct($context, $data);         $collection = $this->getContracts();         $this->setCollection($collection);     }     public function getBaseUrl()     {         return $this->storeManager->getStore()->getBaseUrl();     }     public function getMediaUrl()     {         return $this->getBaseUrl() . 'pub/media/';     }     public function getCustomerImageUrl($filePath)     {         return $this->getMediaUrl() . 'customer' . $filePath;     }     public function getFileUrl()     {         $customerData = $this->customerModel->load($this->customerSession->getId());         $url = $customerData->getData('customer_image');         if (!empty($url)) {             return $this->getCustomerImageUrl($url);         }         return false;     } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

   <?php   namespace [Vendor]\[Module]\Block\Customer;   use Magento\Backend\Block\Template\Context; use Magento\Framework\UrlInterface; use Magento\Customer\Model\SessionFactory; use Magento\Framework\View\Element\Template;   class Account extends Template {     protected $urlBuilder;     protected $customerSession;     protected $storeManager;     protected $customerModel;       public function __construct(         Context $context,         UrlInterface $urlBuilder,         SessionFactory $customerSession,         \Magento\Store\Model\StoreManagerInterface $storeManager,         \Magento\Customer\Model\Customer $customerModel,         array $data = []     )     {         $this->urlBuilder            = $urlBuilder;         $this->customerSession       = $customerSession->create();         $this->storeManager          = $storeManager;         $this->customerModel         = $customerModel;           parent::__construct($context, $data);           $collection = $this->getContracts();         $this->setCollection($collection);     }       public function getBaseUrl()     {         return $this->storeManager->getStore()->getBaseUrl();     }       public function getMediaUrl()     {         return $this->getBaseUrl() . 'pub/media/';     }       public function getCustomerImageUrl($filePath)     {         return $this->getMediaUrl() . 'customer' . $filePath;     }       public function getFileUrl()     {         $customerData = $this->customerModel->load($this->customerSession->getId());         $url = $customerData->getData('customer_image');         if (!empty($url)) {             return $this->getCustomerImageUrl($url);         }         return false;     } }

Note: Custom image is store at pub/media/customer path.

Use the above solution and let customers upload their favourite profile picture in the site!

However, if you have any doubts about the implementation, mention them in the Comments section below. I’d be happy to help.

Feel free to share the solution with fellow developers via social media.

Thanks.