[Solved] Magento 2: Implement UI Fileuploader

hallleron Asks: Magento 2: Implement UI Fileuploader
I recently implemented the FileUploader Ui Component in my form on Magento 2.1.7.

The code for it is here (app/code/Vendor/Blog/view/adminhtml/ui_component/vendor_blog_form.xml):

<field name="featured_images">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" translate="true" xsi:type="string">Hervorgehobene Bilder:</item>
                    <item name="formElement" xsi:type="string">fileUploader</item>
                    <item name="componentType" xsi:type="string">fileUploader</item>
                    <item name="previewTmpl" xsi:type="string">Magento_Catalog/image-preview</item>
                    <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
                    <item name="allowedExtensions" xsi:type="string">jpg jpeg gif png</item>
                    <item name="notice" xsi:type="string" translate="true">Erlaubte Dateitypen: png, gif, jpg, jpeg.</item>
                    <item name="maxFileSize" xsi:type="number">2097152</item>
                    <item name="source" xsi:type="string">blog</item>
                    <item name="sortOrder" xsi:type="number">10</item>
                    <item name="dataScope" xsi:type="string">featured_images</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">false</item>
                    <item name="uploaderConfig" xsi:type="array">
                        <item name="url" xsi:type="url" path="vendor_blog/blog/upload"/>

My Controller for it is this (app/code/Vendor/Blog/Controller/Adminhtml/Blog/Upload.php):


namespace VendorBlogControllerAdminhtmlBlog;

use MagentoFrameworkAppFilesystemDirectoryList;
use MagentoBackendAppAction;  

class Upload extends VendorBlogControllerAdminhtmlBlog

    protected $_fileUploaderFactory;
    protected $_directory_list;
    protected $_logger;

    public function __construct(
        ActionContext $context,
        MagentoFrameworkRegistry $coreRegistry,
        MagentoMediaStorageModelFileUploaderFactory $fileUploaderFactory,
        MagentoFrameworkAppFilesystemDirectoryList $directory_list,
        PsrLogLoggerInterface $logger
    ) {
        $this->_fileUploaderFactory = $fileUploaderFactory;
        $this->_directory_list = $directory_list;
        $this->_logger = $logger;
        parent::__construct($context, $coreRegistry);

    public function execute(){
        $uploader = $this->_fileUploaderFactory->create(['fileId' => 'featured_images']);
        $uploader->setAllowedExtensions(['jpg', 'jpeg', 'gif', 'png']);
        $path = $this->_filesystem->getDirectoryRead(DirectoryList::MEDIA)->getAbsolutePath('blog');
        //$path = $this->_directory_list->getPath('media') . '/blog';
        $this->_logger->debug('Uploader.php: '.$path);

However, when I upload an image and inspect the call in Chrome’s console, I get an Error 500 with Exception: $_FILES array is empty.

I am struggling for two days but I can’t get it to work right. When I uncomment the alternate $path variable line, the Upload succeeds but I do not get a preview.

I read that it might be the enctype of the form that’s causing the issue, but I didn’t find any information on how to check this for a UI Component form.

If you need the whole exception code please let me know.

I appreciate every help possible. Thank you!

Ten-tools.com may not be responsible for the answers or solutions given to any question asked by the users. All Answers or responses are user generated answers and we do not have proof of its validity or correctness. Please vote for the answer that helped you in order to help others find out which is the most helpful answer. Questions labeled as solved may be solved or may not be solved depending on the type of question and the date posted for some posts may be scheduled to be deleted periodically. Do not hesitate to share your response here to help other visitors like you. Thank you, Ten-tools.