6

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? – Sanchit Gupta Apr 27 '18 at 10:04
9

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>
    <backend_model>NameSpace\YourModule\Model\Config\Backend\Image</backend_model>
    <base_url type="media" scope_info="1">yourfolder</base_url>
</field>

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

NameSpace\YourModule\Model\Config\Backend\Image.php

<?php

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. – J. John Nov 28 '15 at 9:49
  • My code use in Configuration, Are you understand ? – Thao Pham Nov 28 '15 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. – J. John Nov 28 '15 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 '15 at 13:05
  • I need to add multiple images to system config. How it possible? – Magento2 Devloper Nov 13 '17 at 13:55
0

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>
    <backend_model>Vendor\Package\Model\Config\Backend\Image</backend_model>
    <base_url type="media" scope_info="1">my_image_folder</base_url>
    <validate>required-entry</validate>
    <upload_dir config="system" scope_info="1">my_image_folder</upload_dir>
</field>

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

<?php

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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