Magento 2: How to use IMG upload field UIComponent?

Question

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>
        </item>
    </argument>


    <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>
            </item>
        </argument>
    </field>

 <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>
            </item>
        </item>
    </argument>
</field>

</fieldset>

Looking good.

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

<?php

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(
            \Magento\Framework\App\Filesystem\DirectoryList::MEDIA
        );
        $this->_fileUploaderFactory = $fileUploaderFactory;
        parent::__construct($context);
    }

    public function execute()
    {
        /** @var \Magento\Framework\Controller\Result\Redirect $resultRedirect */
        $resultRedirect = $this->resultRedirectFactory->create();
        try{
            $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 */
            $uploader->setAllowRenameFiles(true);
            /** upload file in folder "mycustomfolder" */
            $result = $uploader->save($target);
            if ($result['file']) {
                $this->messageManager->addSuccess(__('File has been successfully uploaded')); 
            }
        } catch (\Exception $e) {
            $this->messageManager->addError($e->getMessage());
        }

        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.

Answer 1

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