Upload an image from Customer Custom Tab in Magento 2 Admin

Here we’ll learn how to upload an Image from customer edit section in Magento 2.

Step 1: Create a custom Form Tab in Customer Edit Section.

Follow the previous blog:

How To Create Tab With Form Fields In Admin Customer Edit Section Magento 2

Add the image field in app/code/Webkul/CustomerEdit/Block/Adminhtml/Customer/Edit/Tabs.php

// Here, we have used the sample file name. You can also use your filename if it is stored in database. Otherwise, value can be ''.
$fileName = 'File-1672040915.png';
$fieldset->addField(
    'custom_image_field',
    'image',
    [
        'name' => 'custom_image_field',
        'label' => __('My Image'),
        'title' => __('My Image'),
        'class' => 'custom_image',
        'data-form-part' => $this->getData('target_form'),
        'value' => 'customimage/image/'.$fileName,
        'note' => __('Allowed image types: jpg,jpeg,gif,png')
        ]
);

Create Child Block: app/code/Webkul/CustomerEdit/Block/Adminhtml/Customer/Edit/AdditionalBlock.php

<?php
/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_CustomerEdit
 * @author    Webkul
 * @copyright Copyright Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
namespace Webkul\CustomerEdit\Block\Adminhtml\Customer\Edit\Tab;

class AdditionalBlock extends \Magento\Config\Block\System\Config\Form\Field
{
    const JS_TEMPLATE = 'customer/js.phtml';

    /**
     * @param \Magento\Backend\Block\Widget\Context $context
     * @param array                                 $data
     */
    public function __construct(
        \Magento\Backend\Block\Widget\Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);
    }

    /**
     * Set JS template to itself.
     *
     * @return $this
     */
    protected function _prepareLayout()
    {
        parent::_prepareLayout();
        if (!$this->getTemplate()) {
            $this->setTemplate(static::JS_TEMPLATE);
        }

        return $this;
    }
}

Now Create Template file : app/code/Webkul/CustomerEdit/view/adminhtml/templates/customer/js.phtml

<!-- you need to add form attribute in image and file type fields to work properly. -->
<script>
    require([
        "jquery",

    ], function($){
    	$("input[type='file']").attr('form','customer_form');
    });
</script>

Now we can upload the image by using the adminhtml_customer_save_after or other dispatch events.

I am going to upload through adminhtml_customer_save_after dispatch event.

Create : app/code/Webkul/CustomerEdit/etc/events.xml

<?xml version="1.0"?>
<!--
/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_CustomForm
 * @author    Webkul
 * @copyright Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="adminhtml_customer_save_after">
        <observer name="webkul_adminhtml_customer_save_after_observer" instance="Webkul\CustomForm\Observer\AdminhtmlCustomerSaveAfterObserver" />
    </event>
</config>

Now create and Observer :
app/code/Webkul/CustomForm/Observer/AdminhtmlCustomerSaveAfterObserver.php

<?php
/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_CustomerEdit
 * @author    Webkul
 * @copyright Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
namespace Webkul\CustomerEdit\Observer;

use Magento\Framework\Event\ObserverInterface;
use Magento\Framework\App\Filesystem\DirectoryList;
use Magento\Framework\Filesystem;

class AdminhtmlCustomerSaveAfterObserver implements ObserverInterface
{
    /**
     * File Uploader factory.
     *
     * @var \Magento\MediaStorage\Model\File\UploaderFactory
     */
    protected $_fileUploaderFactory;

    protected $_mediaDirectory;

    /**
     * @param Filesystem                                       $filesystem,
     * @param \Magento\MediaStorage\Model\File\UploaderFactory $fileUploaderFactory
     */
    public function __construct(
        Filesystem $filesystem,
        \Magento\MediaStorage\Model\File\UploaderFactory $fileUploaderFactory
    ) {
        $this->_mediaDirectory = $filesystem->getDirectoryWrite(DirectoryList::MEDIA);
        $this->_fileUploaderFactory = $fileUploaderFactory;
    }

    /**
     * admin customer save after event handler.
     *
     * @param \Magento\Framework\Event\Observer $observer
     */
    public function execute(\Magento\Framework\Event\Observer $observer)
    {
        $target = $this->_mediaDirectory->getAbsolutePath('customimage/image/');
        try {
            /** @var $uploader \Magento\MediaStorage\Model\File\Uploader */
            $uploader = $this->_fileUploaderFactory->create(
                ['fileId' => 'custom_image_field']
            );
            $uploader->setAllowedExtensions(
                ['jpg', 'jpeg', 'gif', 'png']
            );
            $uploader->setAllowRenameFiles(true);
            $result = $uploader->save($target);

            // Here, you can write your code to save the value in the database.

        } catch(\Exception $e) {
            return '';
        }

        return $this;
    }
}