{"id":521,"date":"2023-02-19T04:09:26","date_gmt":"2023-02-18T21:09:26","guid":{"rendered":"https:\/\/magerubik.com\/blog\/?p=521"},"modified":"2023-04-24T09:49:46","modified_gmt":"2023-04-24T02:49:46","slug":"image-upload-in-magento-2-ui-form","status":"publish","type":"post","link":"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/","title":{"rendered":"Image Upload in Magento 2 UI Form"},"content":{"rendered":"\n
\n\t

Continuing with the UI component problem in this post we will learn how to create an image upload in Magento 2 Ui form. In the article Create UI Form in Magento 2<\/a> we have created a simple form to continue we will add an image upload field.<\/p>\n<\/div>\n

\n\t

We will return to the Simple module we practiced in the previous posts and update some files.<\/p>\n<\/div>\n

1. Update UI form<\/strong><\/h2>\n

Open file app\\code\\Magerubik\\Simple\\view\\adminhtml\\ui_component\\message_send_form.xml<\/span> then add below code to update image field.<\/p>\n\n\n\n

<!-- image field -->\n<field name=\"img_attachment\">\n\t<argument name=\"data\" xsi:type=\"array\">\n\t\t<item name=\"config\" xsi:type=\"array\">\n\t\t\t<item name=\"label\" xsi:type=\"string\">Attachment Image<\/item>\n\t\t\t<item name=\"formElement\" xsi:type=\"string\">fileUploader<\/item>\n\t\t\t<item name=\"elementTmpl\" xsi:type=\"string\">ui\/form\/element\/uploader\/uploader<\/item>\n\t\t\t<item name=\"previewTmpl\" xsi:type=\"string\">Magerubik_Simple\/form\/image-preview<\/item>\n\t\t\t<item name=\"maxFileSize\" xsi:type=\"number\">2097152<\/item>\n\t\t\t<item name=\"allowedExtensions\" xsi:type=\"string\">jpg jpeg gif png<\/item>\n\t\t\t<item name=\"uploaderConfig\" xsi:type=\"array\">\n\t\t\t\t<item name=\"url\" xsi:type=\"url\" path=\"simple\/uploader\/messageimage\"\/>\n\t\t\t<\/item>\n\t\t<\/item>\n\t<\/argument>\n<\/field>\n<!-- End image field--><\/pre>\n\n\n\n
2. Create image preview template file<\/strong><\/h2>\n
Create file app\\code\\Magerubik\\Message\\frontend\\web\\template\\form\\image-preview.html<\/span> with below content.<\/p>\n\n\n\n
<div class=\"file-uploader-summary\">\n    <div class=\"file-uploader-preview\">\n        <a attr=\"href: $parent.getFilePreview($file)\" target=\"_blank\">\n            <img class=\"preview-image\"\n                 tabindex=\"0\"\n                 event=\"load: $parent.onPreviewLoad.bind($parent)\"\n                 attr=\"src: $parent.getFilePreview($file),alt: $file.name\">\n        <\/a>\n        <div class=\"actions\">\n            <button\n                    type=\"button\"\n                    class=\"action-remove\"\n                    data-role=\"delete-button\"\n                    attr=\"title: $t('Delete image')\"\n                    click=\"$parent.removeFile.bind($parent, $file)\">\n                <span translate=\"'Delete image'\"\/>\n            <\/button>\n        <\/div>\n    <\/div>\n\n    <div class=\"file-uploader-filename\" text=\"$file.name\"\/>\n    <div class=\"file-uploader-meta\">\n        <text args=\"$file.previewWidth\"\/>x<text args=\"$file.previewHeight\"\/>\n    <\/div>\n<\/div><\/pre>\n\n\n\n
2. Create controller to upload image<\/strong><\/h2>\n
Create file app\\code\\Magerubik\\Simple\\Controller\\Adminhtml\\Uploader\\MessageImage.php<\/span> with below content.<\/p>\n\n\n\n
<?php\nnamespace Magerubik\\Simple\\Controller\\Adminhtml\\Uploader;\nuse Magento\\Framework\\Controller\\ResultFactory;\nclass MessageImage extends \\Magento\\Backend\\App\\Action\n{\n    private $imageUploader;\n    public function __construct(\n        \\Magento\\Backend\\App\\Action\\Context $context,\n        \\Magento\\Catalog\\Model\\ImageUploader $imageUploader\n    ) {\n        parent::__construct($context);\n        $this->imageUploader = $imageUploader;\n    }\n    public function execute()\n    {\n        try {\n            $imageField = '';\n            foreach ($this->getRequest()->getFiles() as $key => $file) {\n                $imageField = $key;\n                break;\n            }\n            $result = $this->imageUploader->saveFileToTmpDir($imageField);\n            $result['cookie'] = [\n                'name' => $this->_getSession()->getName(),\n                'value' => $this->_getSession()->getSessionId(),\n                'lifetime' => $this->_getSession()->getCookieLifetime(),\n                'path' => $this->_getSession()->getCookiePath(),\n                'domain' => $this->_getSession()->getCookieDomain(),\n            ];\n        } catch (\\Exception $e) {\n            $result = ['error' => $e->getMessage(), 'errorcode' => $e->getCode()];\n        }\n        return $this->resultFactory->create(ResultFactory::TYPE_JSON)->setData($result);\n    }\n}<\/pre>\n\n\n\n
3. Update Provider File<\/strong><\/h2>\n
Open file app\\code\\Magerubik\\Message\\Model\\DataProvider\\MessageDataProvider.php<\/span> then add below code to fill data image show on UI from.<\/p>\n\n\n\n
<?php\nnamespace Magerubik\\Simple\\Model\\DataProvider;\nuse Magerubik\\Simple\\Model\\ResourceModel\\Message\\CollectionFactory;\nuse Magerubik\\Simple\\Model\\ImageProcessor;\nuse Magento\\Ui\\DataProvider\\AbstractDataProvider;\nuse Magento\\Framework\\App\\Request\\DataPersistorInterface;\nclass MessageDataProvider extends AbstractDataProvider\n{\n    protected $loadedData;\n\tprivate $imageProcessor;\n    public function __construct(\n        $name,\n        $primaryFieldName,\n        $requestFieldName,\n        CollectionFactory $collectionFactory,\n\t\tImageProcessor $imageProcessor,\n\t\tDataPersistorInterface $dataPersistor,\n        array $meta = [],\n        array $data = []\n    ) {\n        $this->collection = $collectionFactory->create();\n\t\t$this->imageProcessor = $imageProcessor;\n\t\t$this->dataPersistor = $dataPersistor;\n        parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);\n    }\n    public function getData()\n    {\n        $items = $this->collection->getItems();\n        foreach ($items as $model) {\n            $this->loadedData[$model->getId()] = $model->getData();\n\t\t\t\/* start with img *\/\n\t\t\tif($model->getImgAttachment()) {\n                $img['img_attachment'][0]['name'] = $model->getImgAttachment();\n                $img['img_attachment'][0]['url'] = $this->imageProcessor->getThumbnailUrl($model->getImgAttachment(), 'img_attachment');\n                $fullData = $this->loadedData;\n                $this->loadedData[$model->getId()] = array_merge($fullData[$model->getId()], $img);\n            }\n\t\t\t\/*======end======*\/\n        }\n\t\t$data = $this->dataPersistor->get('mrsimple_message');\n        if (!empty($data)) {\n            $model = $this->collection->getNewEmptyItem();\n            $model->setData($data);\n            $this->loadedData[$model->getId()] = $model->getData();\n            $this->dataPersistor->clear('mrsimple_message');\n        }\n        return $this->loadedData;\n    }\n}<\/pre>\n\n\n\n
4. Crate image upload Model<\/strong><\/h2>\n
Create file app\\code\\Magerubik\\Simple\\Model\\ImageProcessor.php<\/span> with below content.<\/p>\n\n\n\n
<?php\nnamespace Magerubik\\Simple\\Model;\nuse Magento\\Framework\\App\\Filesystem\\DirectoryList;\nuse Magento\\Framework\\File\\Uploader;\nclass ImageProcessor\n{\n    const SIMPLE_MEDIA_PATH = 'simple\/message';\n    const SIMPLE_MEDIA_TMP_PATH = 'simple\/message\/tmp';\n    private $imageUploader;\n    private $imageFactory;\n    private $storeManager;\n    private $mediaDirectory;\n    private $filesystem;\n    private $ioFile;\n    private $coreFileStorageDatabase;\n    private $logger;\n    public function __construct(\n        \\Magento\\Framework\\Filesystem $filesystem,\n        \\Magento\\Catalog\\Model\\ImageUploader $imageUploader,\n        \\Magento\\Framework\\ImageFactory $imageFactory,\n        \\Magento\\Store\\Model\\StoreManagerInterface $storeManager,\n        \\Magento\\Framework\\Filesystem\\Io\\File $ioFile,\n        \\Magento\\MediaStorage\\Helper\\File\\Storage\\Database $coreFileStorageDatabase,\n        \\Psr\\Log\\LoggerInterface $logger\n    ) {\n        $this->filesystem = $filesystem;\n        $this->imageUploader = $imageUploader;\n        $this->imageFactory = $imageFactory;\n        $this->storeManager = $storeManager;\n        $this->ioFile = $ioFile;\n        $this->coreFileStorageDatabase = $coreFileStorageDatabase;\n        $this->logger = $logger;\n    }\n    private function getMediaDirectory()\n    {\n        if ($this->mediaDirectory === null) {\n            $this->mediaDirectory = $this->filesystem->getDirectoryWrite(DirectoryList::MEDIA);\n        }\n        return $this->mediaDirectory;\n    }\n    public function getThumbnailUrl($imageName)\n    {\n        $pubDirectory = $this->filesystem->getDirectoryRead(DirectoryList::PUB);\n        if ($pubDirectory->isExist($imageName)) {\n            $result = $this->storeManager->getStore()->getBaseUrl() . trim($imageName, '\/');\n        } else {\n            $result = $this->getCategoryIconMedia(self::SIMPLE_MEDIA_PATH) . '\/' . $imageName;\n        }\n        return $result;\n    }\n    private function getImageRelativePath($iconName)\n    {\n        return self::SIMPLE_MEDIA_PATH . DIRECTORY_SEPARATOR . $iconName;\n    }\n    private function getCategoryIconMedia($mediaPath)\n    {\n        return $this->storeManager->getStore()\n                ->getBaseUrl(\\Magento\\Framework\\UrlInterface::URL_TYPE_MEDIA) . $mediaPath;\n    }\n    public function processCategoryIcon($iconName)\n    {\n        $this->imageUploader->moveFileFromTmp($iconName, true);\n        $filename = $this->getMediaDirectory()->getAbsolutePath($this->getImageRelativePath($iconName));\n        try {\n            $imageProcessor = $this->imageFactory->create(['fileName' => $filename]);\n            $imageProcessor->keepAspectRatio(true);\n            $imageProcessor->keepFrame(true);\n            $imageProcessor->keepTransparency(true);\n            $imageProcessor->backgroundColor([255, 255, 255]);\n            $imageProcessor->save();\n        } catch (\\Exception $e) {\n            null;\n        }\n    }\n    public function moveFile(array $images): ?string\n    {\n        $filePath = null;\n        if (count($images) > 0) {\n            foreach ($images as $image) {\n                if (array_key_exists('file', $image)) {\n                    $mediaDirectory = $this->filesystem->getDirectoryWrite(DirectoryList::MEDIA);\n                    if ($mediaDirectory->isExist(self::SIMPLE_MEDIA_TMP_PATH . '\/' . $image['file'])) {\n                        $filePath = $this->moveFileFromTmp($image['file']);\n                        break;\n                    }\n                } elseif (isset($image['type'])) {\n                    $filePath = $image['url'] ?? '';\n                }\n            }\n        }\n        return $filePath;\n    }\n    public function deleteImage($iconName)\n    {\n        $this->getMediaDirectory()->delete($this->getImageRelativePath($iconName));\n    }\n    public function copy($imageName)\n    {\n        $basePath = $this->getMediaDirectory()->getAbsolutePath($this->getImageRelativePath($imageName));\n        $imageName = explode('.', $imageName);\n        $imageName[0] .= '-' . random_int(1, 1000);\n        $imageName = implode('.', $imageName);\n        $newPath = $this->getMediaDirectory()->getAbsolutePath($this->getImageRelativePath($imageName));\n        try {\n            $this->ioFile->cp(\n                $basePath,\n                $newPath\n            );\n        } catch (\\Exception $e) {\n            throw new \\Magento\\Framework\\Exception\\LocalizedException(\n                __('Something went wrong while saving the file(s).')\n            );\n        }\n        return $imageName;\n    }\n    public function moveFileFromTmp($imageName, $returnRelativePath = false): string\n    {\n        $baseTmpPath = $this->imageUploader->getBaseTmpPath();\n        $basePath = $this->imageUploader->getBasePath();\n        $baseImagePath = $this->imageUploader->getFilePath(\n            $basePath,\n            Uploader::getNewFileName(\n                $this->getMediaDirectory()->getAbsolutePath($this->imageUploader->getFilePath($basePath, $imageName))\n            )\n        );\n        $baseTmpImagePath = $this->imageUploader->getFilePath($baseTmpPath, $imageName);\n        try {\n            $this->coreFileStorageDatabase->copyFile($baseTmpImagePath, $baseImagePath);\n            $this->getMediaDirectory()->renameFile($baseTmpImagePath, $baseImagePath);\n        } catch (\\Exception $e) {\n            $this->logger->critical($e);\n            throw new \\Magento\\Framework\\Exception\\LocalizedException(\n                __('Something went wrong while saving the file(s).'),\n                $e\n            );\n        }\n        return $returnRelativePath ? $baseImagePath : $imageName;\n    }\n}<\/pre>\n\n\n\n
5. Define Image Uploader configuration<\/p>\n
Open file app\\code\\Magerubik\\Simple\\etc\\di.xml<\/span> then add below code to define image uploader configuration.<\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:ObjectManager\/etc\/config.xsd\">\n\t<!-- start with image uploader -->\n\t<virtualType name=\"Magerubik\\Simple\\Model\\ImageUpload\" type=\"Magento\\Catalog\\Model\\ImageUploader\">\n        <arguments>\n            <argument name=\"baseTmpPath\" xsi:type=\"const\">Magerubik\\Simple\\Model\\ImageProcessor::SIMPLE_MEDIA_PATH<\/argument>\n            <argument name=\"basePath\" xsi:type=\"const\">Magerubik\\Simple\\Model\\ImageProcessor::SIMPLE_MEDIA_TMP_PATH<\/argument>\n            <argument name=\"allowedExtensions\" xsi:type=\"array\">\n                <item name=\"jpg\" xsi:type=\"string\">jpg<\/item>\n                <item name=\"jpeg\" xsi:type=\"string\">jpeg<\/item>\n                <item name=\"gif\" xsi:type=\"string\">gif<\/item>\n                <item name=\"png\" xsi:type=\"string\">png<\/item>\n            <\/argument>\n        <\/arguments>\n    <\/virtualType>\n    <type name=\"Magerubik\\Simple\\Controller\\Adminhtml\\Uploader\\MessageImage\">\n        <arguments>\n            <argument name=\"imageUploader\" xsi:type=\"object\">Magerubik\\Simple\\Model\\ImageUpload<\/argument>\n        <\/arguments>\n    <\/type>\n\t<type name=\"Magerubik\\Simple\\Model\\ImageProcessor\">\n        <arguments>\n            <argument name=\"imageUploader\" xsi:type=\"object\">Magerubik\\Simple\\Model\\ImageUpload<\/argument>\n        <\/arguments>\n    <\/type>\n\t<!-- end image uploader -->\n<\/config><\/pre>\n\n\n\n
Now, go back to the backend to refresh the cache and check the results. If you see the below screenshot everything is ok.<\/p>\n
\"Magento<\/figure>\t\n
5. Save Image data<\/p>\n
Finally, update the save controller to save the image name to the database.<\/p>\n
Open file app\\code\\Magerubik\\Simple\\etc\\di.xml<\/span> then add below code.<\/p>\n\n\n\n
<?php\nnamespace Magerubik\\Simple\\Controller\\Adminhtml\\Message;\nuse Magento\\Framework\\Exception\\LocalizedException;\nclass Save extends \\Magento\\Backend\\App\\Action\n{\n    protected $dataPersistor;\n    public function __construct(\n        \\Magento\\Backend\\App\\Action\\Context $context,\n        \\Magento\\Framework\\App\\Request\\DataPersistorInterface $dataPersistor\n    ) {\n        $this->dataPersistor = $dataPersistor;\n        parent::__construct($context);\n    }\n    public function execute()\n    {\n        $resultRedirect = $this->resultRedirectFactory->create();\n        $data = $this->getRequest()->getPostValue();\n        if ($data) {\n            $id = $this->getRequest()->getParam('messages_id');\n\t\t\t$data = $this->_filterAttachmentData($data); \/* save image data *\/\n\t\t\tif($id){\n\t\t\t\t$model = $this->_objectManager->create(\\Magerubik\\Simple\\Model\\Message::class)->load($id);\n\t\t\t\tif (!$model->getMessagesId()) {\n\t\t\t\t\t$this->messageManager->addErrorMessage(__('This message no longer exists.'));\n\t\t\t\t\treturn $resultRedirect->setPath('*\/*\/');\n\t\t\t\t}\n\t\t\t\t$model->setData($data)->setId($id);\n\t\t\t}else{\n\t\t\t\t$model = $this->_objectManager->create(\\Magerubik\\Simple\\Model\\Message::class);\n\t\t\t\t$model->setData($data)->setId(NULL);\n\t\t\t}\n            try {\n                $model->save();\n                $this->messageManager->addSuccessMessage(__('You saved the message.'));\n                $this->dataPersistor->clear('mrsimple_message');\n                return $resultRedirect->setPath('*\/*\/edit', ['id' => $model->getMessagesId()]);\n            } catch (LocalizedException $e) {\n                $this->messageManager->addErrorMessage($e->getMessage());\n            } catch (\\Exception $e) {\n                $this->messageManager->addExceptionMessage($e, __('Something went wrong while saving the message.'));\n            }\n            $this->dataPersistor->set('mrsimple_message', $data);\n            return $resultRedirect->setPath('*\/*\/edit', ['id' => $this->getRequest()->getParam('messages_id')]);\n        }\n        return $resultRedirect->setPath('*\/*\/');\n    }\n\tpublic function _filterAttachmentData(array $rawData)\n    {\n        $data = $rawData;\n        if (isset($data['img_attachment'][0]['name'])) {\n            $data['img_attachment'] = $data['img_attachment'][0]['name'];\n        } else {\n            $data['img_attachment'] = null;\n        }\n        return $data;\n    }\n}<\/pre>\n\n\n\n
Go to the backend flush cache then check save function. If you see like below the screenshot everything is ok.<\/p>\n
\"Magento<\/figure>\t\n
\n\t
Thanks for reading the whole article, good luck with your practice. Contact us<\/a> if you face any problems during the installation process.<\/p>\n<\/blockquote>\n
You can download the demo code for this entire series from GitHub<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Continuing with the UI component problem in this post we will learn how to create an image upload in Magento<\/p>\n","protected":false},"author":1,"featured_media":524,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-521","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento-2-extension-tutorials"],"yoast_head":"\nImage Upload in Magento 2 UI Form | MageRubik<\/title>\n<meta name=\"description\" content=\"This article will get you to know how to create an image upload in Magento 2 UI component form, step by step.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Image Upload in Magento 2 UI Form | MageRubik\" \/>\n<meta property=\"og:description\" content=\"This article will get you to know how to create an image upload in Magento 2 UI component form, step by step.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/\" \/>\n<meta property=\"og:site_name\" content=\"MageRubik\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/magerubik\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/magerubik\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-18T21:09:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-24T02:49:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2023\/02\/magento-2-create-image-upload-in-the-custom-module.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"445\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hilary howard\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/www.twitter.com\/magerubik\" \/>\n<meta name=\"twitter:site\" content=\"@magerubik\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hilary howard\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/\"},\"author\":{\"name\":\"Hilary howard\",\"@id\":\"https:\/\/magerubik.com\/blog\/#\/schema\/person\/dad797dc557c925c92436706db1359d8\"},\"headline\":\"Image Upload in Magento 2 UI Form\",\"datePublished\":\"2023-02-18T21:09:26+00:00\",\"dateModified\":\"2023-04-24T02:49:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/\"},\"wordCount\":301,\"publisher\":{\"@id\":\"https:\/\/magerubik.com\/blog\/#\/schema\/person\/dad797dc557c925c92436706db1359d8\"},\"image\":{\"@id\":\"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2023\/02\/magento-2-create-image-upload-in-the-custom-module.jpg\",\"articleSection\":[\"Magento 2 Extension Tutorials\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/\",\"url\":\"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/\",\"name\":\"Image Upload in Magento 2 UI Form | MageRubik\",\"isPartOf\":{\"@id\":\"https:\/\/magerubik.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2023\/02\/magento-2-create-image-upload-in-the-custom-module.jpg\",\"datePublished\":\"2023-02-18T21:09:26+00:00\",\"dateModified\":\"2023-04-24T02:49:46+00:00\",\"description\":\"This article will get you to know how to create an image upload in Magento 2 UI component form, step by step.\",\"breadcrumb\":{\"@id\":\"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/#primaryimage\",\"url\":\"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2023\/02\/magento-2-create-image-upload-in-the-custom-module.jpg\",\"contentUrl\":\"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2023\/02\/magento-2-create-image-upload-in-the-custom-module.jpg\",\"width\":800,\"height\":445,\"caption\":\"Magento 2 create image upload in the custom module\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Magerubik blog site\",\"item\":\"https:\/\/magerubik.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Image Upload in Magento 2 UI Form\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/magerubik.com\/blog\/#website\",\"url\":\"https:\/\/magerubik.com\/blog\/\",\"name\":\"Magerubik\",\"description\":\"MageRubik blog site\",\"publisher\":{\"@id\":\"https:\/\/magerubik.com\/blog\/#\/schema\/person\/dad797dc557c925c92436706db1359d8\"},\"alternateName\":\"Magento 2 Extension\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/magerubik.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/magerubik.com\/blog\/#\/schema\/person\/dad797dc557c925c92436706db1359d8\",\"name\":\"Hilary howard\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/magerubik.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2022\/03\/magerubik-logo.png\",\"contentUrl\":\"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2022\/03\/magerubik-logo.png\",\"width\":265,\"height\":90,\"caption\":\"Hilary howard\"},\"logo\":{\"@id\":\"https:\/\/magerubik.com\/blog\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/localhost\/blog\",\"https:\/\/www.facebook.com\/magerubik\",\"https:\/\/www.instagram.com\/magerubik\",\"https:\/\/www.linkedin.com\/magerubik\",\"https:\/\/www.pinterest.com\/magerubik\",\"https:\/\/twitter.com\/https:\/\/www.twitter.com\/magerubik\",\"https:\/\/www.myspace.com\/magerubik\",\"https:\/\/www.youtube.com\/magerubik\",\"https:\/\/www.soundcloud.com\/magerubik\",\"https:\/\/www.tumblr.com\/magerubik\",\"https:\/\/www.wikipedia.com\/magerubik\"],\"url\":\"https:\/\/magerubik.com\/blog\/author\/hilary-howard\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Image Upload in Magento 2 UI Form | MageRubik","description":"This article will get you to know how to create an image upload in Magento 2 UI component form, step by step.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/","og_locale":"en_US","og_type":"article","og_title":"Image Upload in Magento 2 UI Form | MageRubik","og_description":"This article will get you to know how to create an image upload in Magento 2 UI component form, step by step.","og_url":"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/","og_site_name":"MageRubik","article_publisher":"https:\/\/www.facebook.com\/magerubik","article_author":"https:\/\/www.facebook.com\/magerubik","article_published_time":"2023-02-18T21:09:26+00:00","article_modified_time":"2023-04-24T02:49:46+00:00","og_image":[{"width":800,"height":445,"url":"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2023\/02\/magento-2-create-image-upload-in-the-custom-module.jpg","type":"image\/jpeg"}],"author":"Hilary howard","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/www.twitter.com\/magerubik","twitter_site":"@magerubik","twitter_misc":{"Written by":"Hilary howard","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/#article","isPartOf":{"@id":"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/"},"author":{"name":"Hilary howard","@id":"https:\/\/magerubik.com\/blog\/#\/schema\/person\/dad797dc557c925c92436706db1359d8"},"headline":"Image Upload in Magento 2 UI Form","datePublished":"2023-02-18T21:09:26+00:00","dateModified":"2023-04-24T02:49:46+00:00","mainEntityOfPage":{"@id":"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/"},"wordCount":301,"publisher":{"@id":"https:\/\/magerubik.com\/blog\/#\/schema\/person\/dad797dc557c925c92436706db1359d8"},"image":{"@id":"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/#primaryimage"},"thumbnailUrl":"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2023\/02\/magento-2-create-image-upload-in-the-custom-module.jpg","articleSection":["Magento 2 Extension Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/","url":"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/","name":"Image Upload in Magento 2 UI Form | MageRubik","isPartOf":{"@id":"https:\/\/magerubik.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/#primaryimage"},"image":{"@id":"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/#primaryimage"},"thumbnailUrl":"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2023\/02\/magento-2-create-image-upload-in-the-custom-module.jpg","datePublished":"2023-02-18T21:09:26+00:00","dateModified":"2023-04-24T02:49:46+00:00","description":"This article will get you to know how to create an image upload in Magento 2 UI component form, step by step.","breadcrumb":{"@id":"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/#primaryimage","url":"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2023\/02\/magento-2-create-image-upload-in-the-custom-module.jpg","contentUrl":"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2023\/02\/magento-2-create-image-upload-in-the-custom-module.jpg","width":800,"height":445,"caption":"Magento 2 create image upload in the custom module"},{"@type":"BreadcrumbList","@id":"https:\/\/magerubik.com\/blog\/image-upload-in-magento-2-ui-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Magerubik blog site","item":"https:\/\/magerubik.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Image Upload in Magento 2 UI Form"}]},{"@type":"WebSite","@id":"https:\/\/magerubik.com\/blog\/#website","url":"https:\/\/magerubik.com\/blog\/","name":"Magerubik","description":"MageRubik blog site","publisher":{"@id":"https:\/\/magerubik.com\/blog\/#\/schema\/person\/dad797dc557c925c92436706db1359d8"},"alternateName":"Magento 2 Extension","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/magerubik.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/magerubik.com\/blog\/#\/schema\/person\/dad797dc557c925c92436706db1359d8","name":"Hilary howard","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/magerubik.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2022\/03\/magerubik-logo.png","contentUrl":"https:\/\/magerubik.com\/blog\/wp-content\/uploads\/2022\/03\/magerubik-logo.png","width":265,"height":90,"caption":"Hilary howard"},"logo":{"@id":"https:\/\/magerubik.com\/blog\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/localhost\/blog","https:\/\/www.facebook.com\/magerubik","https:\/\/www.instagram.com\/magerubik","https:\/\/www.linkedin.com\/magerubik","https:\/\/www.pinterest.com\/magerubik","https:\/\/twitter.com\/https:\/\/www.twitter.com\/magerubik","https:\/\/www.myspace.com\/magerubik","https:\/\/www.youtube.com\/magerubik","https:\/\/www.soundcloud.com\/magerubik","https:\/\/www.tumblr.com\/magerubik","https:\/\/www.wikipedia.com\/magerubik"],"url":"https:\/\/magerubik.com\/blog\/author\/hilary-howard\/"}]}},"_links":{"self":[{"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/posts\/521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/comments?post=521"}],"version-history":[{"count":4,"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/posts\/521\/revisions"}],"predecessor-version":[{"id":637,"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/posts\/521\/revisions\/637"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/media\/524"}],"wp:attachment":[{"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/media?parent=521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/categories?post=521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/magerubik.com\/blog\/wp-json\/wp\/v2\/tags?post=521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}