add image in create new product enter image description here

How to make an similar image upload in configuration instead of enter image description here

In add product, it uses phtml file. In configuration, it uses xml file.

  • J.John did you find the solution as mentioned in you question? Apr 27, 2018 at 10:04

3 Answers 3


In system.xml you should add this code below:

<field id="upload_image_id" translate="label comment" type="image" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Select Image</label>
    <base_url type="media" scope_info="1">yourfolder</base_url>

And you should create custom model using in system.xml:



namespace NameSpace\YourModule\Model\Config\Backend;

class Image extends \Magento\Config\Model\Config\Backend\Image
     * The tail part of directory path for uploading
    const UPLOAD_DIR = 'yourfolder'; // Folder save image

     * Return path to directory for upload file
     * @return string
     * @throw \Magento\Framework\Exception\LocalizedException
    protected function _getUploadDir()
        return $this->_mediaDirectory->getAbsolutePath($this->_appendScopeInfo(self::UPLOAD_DIR));

     * Makes a decision about whether to add info about the scope.
     * @return boolean
    protected function _addWhetherScopeInfo()
        return true;

     * Getter for allowed extensions of uploaded files.
     * @return string[]
    protected function _getAllowedExtensions()
        return ['jpg', 'jpeg', 'gif', 'png', 'svg'];
  • Thank you for answer, but your answer is create default image upload as pure html. I want to use customize image button similar image upload in add product.
    – Huan Dao
    Nov 28, 2015 at 9:49
  • My code use in Configuration, Are you understand ?
    – LinoPham
    Nov 28, 2015 at 9:54
  • Yes, I understand what you code. And I know what it does. I wonder there is a way create a image upload button similar in add product. Because I see default button is not beautiful.
    – Huan Dao
    Nov 28, 2015 at 10:47
  • can this be used in admin form as well? if not what's the way to do it?
    – R T
    Dec 30, 2015 at 13:05
  • 1
    I need to add multiple images to system config. How it possible? Nov 13, 2017 at 13:55

Although the accepted answer worked for me. For some reason the validation does not work. I ended up using a custom Config\Backend\Image file.

In my system.xml I've added the image field below

<field id="my_image_field" translate="label" sortOrder="1" type="Magento\Config\Block\System\Config\Form\Field\Image" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>My Image</label>
    <base_url type="media" scope_info="1">my_image_folder</base_url>
    <upload_dir config="system" scope_info="1">my_image_folder</upload_dir>

Then, as you can tell, I've created the file "Vendor\Package\Model\Config\Backend\Image" with the following content:


namespace Vendor\Package\Model\Config\Backend;

class Image extends \Magento\Config\Model\Config\Backend\File
    protected function _getAllowedExtensions()
        return ['jpg', 'jpeg', 'gif', 'png', 'svg'];

FIY, the image will be saved in magento_root/pub/media/my_image_folder.

I hope it helps.

  • how can i view the image in frontend? i have tried to call the helper with the correct path but the image never loads up Sep 7, 2020 at 15:06
  • @jibingeorge Just check the media directory and see what path is the image located at and refer the same in frontend. Dec 7, 2020 at 11:45

Maybe something too late but someone else can use it

You can use Magento\Ui\Component\Form\Element\DataType\Media\Image and binding this to your config form by hidden input.

Try the following code created by me.

Create a Vendor\Module\Block\Data\Form\Element\ImageUploader


namespace Vendor\Module\Block\Data\Form\Element;

use Magento\Framework\Data\Form\Element\Factory;
use Magento\Framework\Data\Form\Element\CollectionFactory;
use Magento\Framework\ObjectManagerInterface;
use Magento\Framework\Escaper;
use Magento\Framework\Math\Random;
use Magento\Framework\View\Helper\SecureHtmlRenderer;

use Magento\Framework\View\Element\UiComponentInterface;
use Magento\Framework\App\Filesystem\DirectoryList;

class ImageUploader extends \Magento\Framework\Data\Form\Element\AbstractElement
    public function __construct(
        Factory $factoryElement,
        CollectionFactory $factoryCollection,
        Escaper $escaper,
        $data = [],
        ObjectManagerInterface $objectManager,
        \Magento\Framework\Filesystem $filesystem,
        \Magento\Framework\File\Mime $mime,
        \Magento\Store\Model\StoreManagerInterface $storeManager
    ) {
        $this->_objectManager = $objectManager;
        $this->filesystem = $filesystem;
        $this->mime = $mime;
        $this->mediaDirectory = $this->filesystem->getDirectoryWrite(DirectoryList::ROOT);

    public function getElementHtml(){
        $initData = [
            'config' => [
                'initialMediaGalleryOpenSubpath' => 'wysiwyg',
                'previewTmpl' => 'Magento_PageBuilder/form/element/uploader/preview',
                'uploaderConfig' => [
                    'url' => 'pagebuilder/contenttype/image_upload',

        $data = array_replace_recursive($initData, $this->getData());
        $uiComponent = $this->_objectManager->create(\Magento\Ui\Component\Form\Element\DataType\Media\Image::class);

        return '<div id="content_img_id" data-bind="scope:\'customImageUploader\'">' .
                    '<input type="hidden" name="'.$this->getName().'"data-bind="value: $data.value()[0] ? $data.value()[0][\'url\'] : \'\'" />' .
                    '<!-- ko template: $data.elementTmpl --><!-- /ko -->' .
                    '<script type="text/x-magento-init">'.
                            "#content_img_id": {
                                "Magento_Ui/js/core/app": {
                                    "components": {
                                        "customImageUploader": {
                                            "component": "Magento_Ui/js/form/element/image-uploader",
                                            "elementTmpl": "ui/form/element/uploader/image",
                                            "config": '.json_encode($this->getConfig()).',
                                            "value": '.json_encode($this->getValue()).',
                                            "dataScope": "customImageUploader"
                    '</script>' .

    public function getValue(){
        $filePath = parent::getValue();
        $newfilePath = explode('/', $filePath);
        unset($newfilePath[0], $newfilePath[1]);
        $newfilePath = implode('/', $newfilePath);
        $image = [];
        if ($newfilePath && $this->mediaDirectory->isExist($newfilePath)) {
            $stat = $this->mediaDirectory->stat($newfilePath);
            $mime = $this->mime->getMimeType($this->mediaDirectory->getAbsolutePath($newfilePath));
            $image[0]['name'] = basename($newfilePath);
            $image[0]['url'] = $filePath;
            $image[0]['size'] = isset($stat) ? $stat['size'] : 0;
            $image[0]['type'] = $mime;
        return $image;

In your system.xml add this field like this:

<field id="field_name" translate="label" type="Vendor\Module\Block\Data\Form\Element\ImageUploader" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="0">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.