I'm trying to add a simple image upload field to my form in Magento 2, but things are not looking that simple. I'm using UIComponent for the layout, my component is as follows:

<fieldset name="slide">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Add a new Slide</item>

    <field name="name">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string">Name</item>
                <item name="visible" xsi:type="boolean">true</item>
                <item name="dataType" xsi:type="string">text</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">name</item>

 <field name="image">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Slide Image</item>
            <item name="formElement" xsi:type="string">fileUploader</item>
            <item name="componentType" xsi:type="string">fileUploader</item>
            <item name="maxFileSize" xsi:type="number">2097152</item>
            <item name="allowedExtensions" xsi:type="string">jpg jpeg gif png svg</item>
            <item name="uploaderConfig" xsi:type="array">
                <item name="url" xsi:type="string">appfactory/slides/uploadimage</item>


Looking good.

enter image description here

I created a controller to handle the image upload as well:


namespace AppFactory\Basic\Controller\Adminhtml\Slides;
use Magento\Backend\App\Action;

class Uploadimage extends \Magento\Backend\App\Action

    protected $_mediaDirectory;
    protected $_fileUploaderFactory;

    public function __construct(
        \Magento\Backend\App\Action\Context $context,
        \Magento\Framework\Filesystem $filesystem,
        \Magento\MediaStorage\Model\File\UploaderFactory $fileUploaderFactory
    ) {

        $this->_mediaDirectory = $filesystem->getDirectoryWrite(
        $this->_fileUploaderFactory = $fileUploaderFactory;

    public function execute()
        /** @var \Magento\Framework\Controller\Result\Redirect $resultRedirect */
        $resultRedirect = $this->resultRedirectFactory->create();
            $target = $this->_mediaDirectory->getAbsolutePath('appfactory/slides/');        
            /** @var $uploader \Magento\MediaStorage\Model\File\Uploader */
            $uploader = $this->_fileUploaderFactory->create(['fileId' => 'slide[image]']);
            /** Allowed extension types */
            $uploader->setAllowedExtensions(['jpg', 'jpeg', 'gif', 'png', 'zip', 'doc']);
            /** rename file name if already exists */
            /** upload file in folder "mycustomfolder" */
            $result = $uploader->save($target);
            if ($result['file']) {
                $this->messageManager->addSuccess(__('File has been successfully uploaded')); 
        } catch (\Exception $e) {

        return $this->resultRedirectFactory->create()->setPath(
            '*/*/uploadimage', ['_secure'=>$this->getRequest()->isSecure()]


I have 2 problems right now,

  1. The first one is that the upload controller is executed whenever I select the image, not whenever I save the form. Not sure why this is happening, I would like to have it saved only when I save the form.
  2. The second problem is I don't know what to return from the upload controller after the image is saved (in case it's saved when being selected). I mean when I actually save the form, and the form save controller is called, how should I get the image filename to save it in the database. Solving the first problem would make the second problem irrelevant.
  • You should add your Image Upload code in SAVE Controller. So once you save the data. Image will be uploaded and you will return to your grid. – Abhishek Panchal Sep 22 '17 at 16:21
  • @AbhishekPanchal and how do i prevent from saving when an image is selected, remove ` <item name="uploaderConfig" xsi:type="array"> <item name="url" xsi:type="string">appfactory/slides/uploadimage</item> </item> `? – Yehia A.Salam Sep 22 '17 at 17:08
  • 2
    Here is answer: magento.stackexchange.com/a/186781/35758 – Prince Patel Sep 22 '17 at 17:13
  • @PrincePatel thanks for the link, working now – Yehia A.Salam Sep 23 '17 at 0:24

Your Answer

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

Browse other questions tagged or ask your own question.