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. Commented Sep 22, 2017 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> `? Commented Sep 22, 2017 at 17:08
  • 2
    Here is answer: magento.stackexchange.com/a/186781/35758 Commented Sep 22, 2017 at 17:13
  • @PrincePatel thanks for the link, working now Commented Sep 23, 2017 at 0:24

1 Answer 1


As Prince Patel mentioned in the comments, it's already answered here Magento 2: Implement UI Fileuploader

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.