Magento 2 upload custom image attribute for customer registration page

In our earlier blogpost we have learned to create the custom customer attribute of select type, now here we will see how to add an image attribute to customers and will show it on the customer registration page on frontend and customer edit page in admin panel. Earlier we used installData and now we are doing it with upgradeData.php file, process is totally same. The only difference among these file is that installData.php is executed with module installation and upgradeData.php is version based and is executed after installation whenever we change version in module.xml. So update the setup_version in module.xml if using upgardeData.php

Here is the code to add a custom attribute of image type for customer. Create the file in Namespace\Modulename\Setup\ folder:-

<?php
namespace W3solver\Callforprice\Setup;

use Magento\Framework\Setup\UpgradeDataInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Customer\Setup\CustomerSetupFactory;
use Magento\Customer\Model\Customer;
use Magento\Eav\Model\Entity\Attribute\Set as AttributeSet;
use Magento\Eav\Model\Entity\Attribute\SetFactory as AttributeSetFactory;


class UpgradeData implements UpgradeDataInterface {

    protected $customerSetupFactory;
    private $attributeSetFactory;

    public function __construct(
    CustomerSetupFactory $customerSetupFactory, AttributeSetFactory $attributeSetFactory
    ) {
        $this->customerSetupFactory = $customerSetupFactory;
        $this->attributeSetFactory = $attributeSetFactory;
    }


    public function upgrade( ModuleDataSetupInterface $setup, ModuleContextInterface $context ) {
        
        if (version_compare($context->getVersion(), '1.0.4') < 0) {
        
            $setup->startSetup();
            $customerSetup = $this->customerSetupFactory->create(['setup' => $setup]);
     
            $customerEntity = $customerSetup->getEavConfig()->getEntityType('customer');
            $attributeSetId = $customerEntity->getDefaultAttributeSetId();
     
            $attributeSet = $this->attributeSetFactory->create();
            $attributeGroupId = $attributeSet->getDefaultGroupId($attributeSetId);
     
            $customerSetup->addAttribute(\Magento\Customer\Model\Customer::ENTITY, 'twilio_image', [
                'type' => 'string',
                'label' => 'Twilio Image',
                'input' => 'file',
                "source" => '',
                'required' => false,
                'default' => '0',
                'visible' => true,
                'user_defined' => true,
                'sort_order' => 210,
                'position' => 210,
                'system' => false,
            ]);

            $image = $customerSetup->getEavConfig()->getAttribute(Customer::ENTITY, 'twilio_image')
                    ->addData([
                'attribute_set_id' => $attributeSetId,
                'attribute_group_id' => $attributeGroupId,
                'used_in_forms' => ['adminhtml_customer', 'customer_account_create', 'customer_account_edit'],
            ]);
     
            $image->save();
            $setup->endSetup();
        }  
    }
}

Run bin/magento setup:upgrade so that attribute will be added to database. You can now check in admin panel if attribute is coming:-

To show attribute on customer registration page on frontend you need to create a layout file and template for the same. Below is the code for the same.

Namespace/Modulename/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="additional_field_register" template="W3solver_Callforprice::additionalfieldregister.phtml"/>
    </referenceContainer>
</body>
</page>

Create template file now

Namespace/Modulename/view/frontend/templates/additionalfieldregister.phtml
<fieldset class="fieldset create account" data-hasrequired="<?php /* @escapeNotVerified */
echo __('* Required Fields') ?>">
    <legend class="legend"><span><?php /* @escapeNotVerified */
            echo __('Additional Information') ?></span></legend>

<p>
<div class="field twilio_image required">
    <label for="twilio_image" class="label"><span><?php /* @escapeNotVerified */
            echo __('Image') ?></span></label>
    <div class="control">
        <input type="file" name="twilio_image" id="twilio_image" title="<?php /* @escapeNotVerified */
        echo __('Image') ?>" class="input-text" data-validate="{required:true}">
    </div>
</div>
</p></fieldset>

Clear the cache once and you can see the attribute on customer registration page.

Feel free to add comment if you face any issue or for any suggestion.

Leave a Comment.