Kdjykuj

I have magento2 admin custom module with image upload functionality. I want to upload image from admin. what code should apply for display image field in from, upload image, also image display in edit action.

Thanks

File Path : appcode[Vendor][Module]BlockAdminhtmlEmpEditTabMain.php

    /**

     * Prepare form

     *

     * @return $this

     * @SuppressWarnings(PHPMD.ExcessiveMethodLength)

    */

    protected function _prepareForm()

    {

        $model = $this->_coreRegistry->registry('emp_post');



        $isElementDisabled = false;



        /** @var MagentoFrameworkDataForm $form */

        $form = $this->_formFactory->create();



        $form->setHtmlIdPrefix('page_');



        $fieldset = $form->addFieldset('base_fieldset', ['legend' => __('Employee Information')]);



        if ($model->getId()) {

            $fieldset->addField('customer_id', 'hidden', ['name' => 'customer_id']);

        }



        $fieldset->addField(

            'firstname',

            'text',

            [

                'name' => 'firstname',

                'label' => __('First Name'),

                'title' => __('First Name'),

                'required' => true,

                'disabled' => $isElementDisabled,

                'value' =>'abc'

            ]

        );



        $fieldset->addField(

            'lastname',

            'text',

            [

                'name' => 'lastname',

                'label' => __('Last Name'),

                'title' => __('Last Name'),

                'required' => true,

                'disabled' => $isElementDisabled,

                'value' =>'abc'

            ]

        );



        $fieldset->addField(

            'email',

            'text',

            [

                'name' => 'email',

                'label' => __('Email Address'),

                'title' => __('Email Address'),

                'required' => true,

                'disabled' => $isElementDisabled,

                'value' =>'abc'

            ]

        );





        $fieldset->addField(

            'image',

            'image',

            array(

                'name' => 'image',

                'label' => __('Image'),

                'title' => __('Image')

            )

        );



        $fieldset->addField(

            'telephone',

            'text',

            [

                'name' => 'telephone',

                'label' => __('Telephone'),

                'title' => __('Telephone'),

                'required' => true,

                'disabled' => $isElementDisabled,

                'value' =>'abc'

            ]

        );



        $dateFormat = $this->_localeDate->getDateFormat(

            IntlDateFormatter::SHORT

        );



        $fieldset->addField(

            'dob',

            'date',

            [

                'name' => 'dob',

                'label' => __('Date of birth'),

                'date_format' => $dateFormat,

                'disabled' => $isElementDisabled,

                'class' => 'validate-date validate-date-range date-range-custom_theme-from'

            ]

        );



        $fieldset->addField(

            'is_active',

            'select',

            [

                'label' => __('Status'),

                'title' => __('Status'),

                'name' => 'is_active',

                'required' => true,

                'options' => $this->_status->getOptionArray(),

                'disabled' => $isElementDisabled

            ]

        );

        if (!$model->getId()) {

            $model->setData('is_active', $isElementDisabled ? '0' : '1');

        }





        if($model->getData('image')){

            $model->setData('image','learning/images'.$model->getData('image'));

        }



        $form->setValues($model->getData());

        $this->setForm($form);



        return parent::_prepareForm();

    } 

You need to create a class to handle your image upload field and show the image once is uploaded.

So create [Namespace][Module]BlockAdminhtml[Entity]HelperImage class

<?php

namespace [Namespace][Module]BlockAdminhtml[Entity]Helper;

use MagentoFrameworkDataFormElementImage as ImageField;

use MagentoFrameworkDataFormElementFactory as ElementFactory;

use MagentoFrameworkDataFormElementCollectionFactory as ElementCollectionFactory;

use MagentoFrameworkEscaper;

use [Namespace][Module]Model[Entity]Image as [Entity]Image;

use MagentoFrameworkUrlInterface;



/**

 * @method string getValue()

 */

class Image extends ImageField

{

    /**

     * image model

     *

     * @var [Namespace][Module]Model[Entity]Image

     */

    protected $imageModel;



    /**

     * @param [Entity]Image $imageModel

     * @param ElementFactory $factoryElement

     * @param ElementCollectionFactory $factoryCollection

     * @param Escaper $escaper

     * @param UrlInterface $urlBuilder

     * @param array $data

     */

    public function __construct(

        [Entity]Image $imageModel,

        ElementFactory $factoryElement,

        ElementCollectionFactory $factoryCollection,

        Escaper $escaper,

        UrlInterface $urlBuilder,

        $data = 

    )

    {

        $this->imageModel = $imageModel;

        parent::__construct($factoryElement, $factoryCollection, $escaper, $urlBuilder, $data);

    }

    /**

     * Get image preview url

     *

     * @return string

     */

    protected function _getUrl()

    {

        $url = false;

        if ($this->getValue()) {

            $url = $this->imageModel->getBaseUrl().$this->getValue();

        }

        return $url;

    }

}

then create the class that will help you retrieve the image upload path and upload dir

<?php

namespace [Namespace][Module]Model[Entity];

use MagentoFrameworkUrlInterface;

use MagentoFrameworkFilesystem;

use MagentoFrameworkAppFilesystemDirectoryList;

class Image

{

    /**

     * media sub folder

     * @var string

     */

    protected $subDir = '[namespace]/[module]/[entity]';

    /**

     * url builder

     *

     * @var MagentoFrameworkUrlInterface

     */

    protected $urlBuilder;

    /**

     * @var MagentoFrameworkFilesystem

     */

    protected $fileSystem;

    /**

     * @param UrlInterface $urlBuilder

     * @param Filesystem $fileSystem

     */

    public function __construct(

        UrlInterface $urlBuilder,

        Filesystem $fileSystem

    )

    {

        $this->urlBuilder = $urlBuilder;

        $this->fileSystem = $fileSystem;

    }

    /**

     * get images base url

     *

     * @return string

     */

    public function getBaseUrl()

    {

        return $this->urlBuilder->getBaseUrl(['_type' => UrlInterface::URL_TYPE_MEDIA]).$this->subDir.'/image';

    }

    /**

     * get base image dir

     *

     * @return string

     */

    public function getBaseDir()

    {

        return $this->fileSystem->getDirectoryWrite(DirectoryList::MEDIA)->getAbsolutePath($this->subDir.'/image');

    }

}

now in your edit for tab add this in the method _prepareForm right after declaring the fieldset

$fieldset->addType('image', '[Namespace][Module]BlockAdminhtml[Entity]HelperImage');

and add your image field like this

$fieldset->addField(

    'image_field_name',

    'image',

    [

        'name'        => 'image_field_name',

        'label'       => __('Image field Label'),

        'title'       => __('Image field Label'),

    ]

);

In the controller that saves your entity you need to inject in the constructor the following classes

MagentoMediaStorageModelFileUploaderFactory and [Namespace][Module]Model[Entity]Image

So make your class look like this

<?php

use MagentoFrameworkExceptionLocalizedException as FrameworkException;



class ....



protected $uploaderFactory;

protected $imageModel;



public function __construct(

    ....

    MagentoMediaStorageModelFileUploaderFactory $uploaderFactory,

    [Namespace][Module]Model[Entity]Image $imageModel,

    ....

){

    ...

    $this->uploaderFactory = $uploaderFactory;

    $this->imageModel = $imageModel;

    ...

}

Now, in the same controller add this, before calling $[entity]->save()

$imageName = $this->uploadFileAndGetName('image_field_name', $this->imageModel->getBaseDir(), $data);

$[entity]->setImageFieldName($imageName);

and create this method:

public function uploadFileAndGetName($input, $destinationFolder, $data)

{

    try {

        if (isset($data[$input]['delete'])) {

            return '';

        } else {

            $uploader = $this->uploaderFactory->create(['fileId' => $input]);

            $uploader->setAllowRenameFiles(true);

            $uploader->setFilesDispersion(true);

            $uploader->setAllowCreateFolders(true);

            $result = $uploader->save($destinationFolder);

            return $result['file'];

        }

    } catch (Exception $e) {

        if ($e->getCode() != MagentoFrameworkFileUploader::TMP_NAME_EMPTY) {

            throw new FrameworkException($e->getMessage());

        } else {

            if (isset($data[$input]['value'])) {

                return $data[$input]['value'];

            }

        }

    }

    return '';

}

A full example on how to create an entity that supports image and file upload (it's a bit different than described here as it contains an extra class for upload) can be found here

Admin module for basic add update news is here.
In case you are looking for simple image upload solution look at the following snippet which is take from the link.

use MagentoFrameworkAppFilesystemDirectoryList;

use MagentoBackendAppAction;

protected $_fileUploaderFactory;

public function __construct(

    MagentoMediaStorageModelFileUploaderFactory $fileUploaderFactory,

    ActionContext $context     

) {

    $this->_fileUploaderFactory = $fileUploaderFactory;

    parent::__construct($context);

}

public function execute(){

    $uploader = $this->_fileUploaderFactory->create(['fileId' => 'image']);

    $uploader->setAllowedExtensions(['jpg', 'jpeg', 'gif', 'png']);

    $uploader->setAllowRenameFiles(false);

    $uploader->setFilesDispersion(false);

    $path = $this->_objectManager->get('MagentoFrameworkFilesystem')->getDirectoryRead(DirectoryList::MEDIA)

    ->getAbsolutePath('images/');

    $uploader->save($path);

}

You could add image field in _prepareForm() method of your admin form:

$fieldset->addField(

    'imagefieldname',

    'image',

    array(

        'name' => 'imagefieldname',

        'label' => __('Image'),

        'title' => __('Image')

    )



  );