{"id":438345,"date":"2024-05-06T06:12:48","date_gmt":"2024-05-06T06:12:48","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=438345"},"modified":"2026-02-05T05:03:16","modified_gmt":"2026-02-05T05:03:16","slug":"upload-image-by-uppy-on-frontend-in-magento-2-4-7","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/","title":{"rendered":"Upload Image by Uppy on Frontend in Magento 2.4.7"},"content":{"rendered":"\n

Learn how to seamlessly integrate Uppy for frontend image uploads in Magento\u202f2.4.7, complete with step-by-step guidance and code examples.<\/p>\n\n\n\n

In Magento 2.4.7 we can upload files using Uppy JS library. Here, We will learn how to upload an image on the frontend in Magento 2 extension.<\/a><\/p>\n\n\n\n

First, we need to create the route file with the name routes.xml<\/p>\n\n\n\n

Code for etc\/frontend\/routes.xml file<\/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:App\/etc\/routes.xsd">\n    <router id="standard">\n        <route id="upload" frontName="upload">\n            <module name="Webkul_ImageUploader" \/>\n        <\/route>\n    <\/router>\n<\/config><\/pre>\n\n\n\n
Then, we need to create the controller file, Controller\/Index\/Index.php<\/p>\n\n\n\n
Code for Controller\/Index\/Index.php file<\/p>\n\n\n\n
<?php\nnamespace Webkul\\ImageUploader\\Controller\\Index;\n\nuse Magento\\Framework\\App\\Action\\Action;\nuse Magento\\Framework\\App\\Action\\Context;\nuse Magento\\Framework\\View\\Result\\PageFactory;\n\nclass Index extends Action\n{\n    private $pageFactory;\n\n    public function __construct(\n        Context $context,\n        PageFactory $pageFactory\n    ) {\n        parent::__construct($context);\n        $this->pageFactory = $pageFactory;\n    }\n\n    public function execute()\n    {\n        return $this->pageFactory->create();\n    }\n}<\/pre>\n\n\n\n
Now, we need to create a layout file with the name upload_index_index.xml.<\/p>\n\n\n\n
Code for view\/frontend\/layout\/upload_index_index.xml file.<\/p>\n\n\n\n
<?xml version="1.0"?>\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n    <body>\n        <referenceContainer name="content">\n            <block class="Magento\\Framework\\View\\Element\\Template" name="imageupload_form" template="Webkul_ImageUploader::form.phtml" \/>\n        <\/referenceContainer>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
In the templates folder, we need to create a template file with the name form.phtml to view the form.<\/p>\n\n\n\n
Code for view\/frontend\/templates\/form.phtml file<\/p>\n\n\n\n
<button type="button" class="upload-img-btn">browse files<\/button>\n\n<button class="delete" style="display: none;">X<\/button>\n<div class="img-preview"><\/div>\n\n<div id="uppy-root"><\/div>\n\n<script type="text\/x-magento-init">\n{\n    "#uppy-root": {\n        "Webkul_ImageUploader\/js\/uppy-init": {\n            "action": "<?= $block->getUrl('upload\/index\/uploadimage') ?>"\n        }\n    }\n}\n<\/script><\/pre>\n\n\n\n
\"file-upload-button\"<\/figure>\n\n\n\n
In the js folder, we need to create a js file with the name uppy-init.phtml to initialize the uppy.<\/p>\n\n\n\n
Code for view\/frontend\/web\/js\/uppy-init.js file<\/p>\n\n\n\n
define([\n    'jquery',\n    'jquery\/uppy-core'\n    ], function($){\n        $.widget('mage.intUppy', {\n            \/**\n             * Widget initialization\n             * @private\n             *\/\n             _create: function() {\n                config = this.options;\n                $('.upload-img-btn').on('click', function() {\n                    $('.uppy-Dashboard-input:first').click();\n                })\n                $('.delete').on('click', function() {\n                    $('.uppy-StatusBar-actionBtn').click();\n                    $('.img-preview').html('');\n                    $('.delete').css('display', 'none');\n                })\n\n                const uppy = new Uppy.Uppy({\n                    autoProceed: true,\n                    restrictions: {\n                        maxFileSize: 2000000,\n                        maxNumberOfFiles: 1,\n                        minNumberOfFiles: 1,\n                        allowedFileTypes: ['image\/*']\n                    },\n                });\n        \n                uppy.use(Uppy.Dashboard, {\n                    trigger: '#select-files',\n                    inline: true,\n                    target: '#uppy-root',\n                });\n        \n                uppy.use(Uppy.XHRUpload, {\n                    endpoint: config.action,\n                    fieldName: 'image',\n                    headers: {\n                        'X-Requested-With': 'XMLHttpRequest'\n                    }\n                });\n        \n                uppy.on('complete', function (result) {\n                    $('.delete').css('display', 'block');\n                    console.log('Upload successful:', result.successful[0].response.body.fileName);\n                    var imgpreview = $('.uppy-Dashboard-files').html();\n                    $('.img-preview').html(imgpreview);\n                });\n            }\n        });\n\n    return $.mage.intUppy;\n});<\/pre>\n\n\n\n
We need to create a controller file with the name UploadImage.php to upload the file.<\/p>\n\n\n\n
Code for Controller\/Index\/UploadImage.php file<\/p>\n\n\n\n
<?php\nnamespace Webkul\\ImageUploader\\Controller\\Index;\n\nuse Magento\\Framework\\App\\Action\\Action;\nuse Magento\\Framework\\App\\Action\\Context;\nuse Magento\\Framework\\Controller\\Result\\JsonFactory;\nuse Magento\\Framework\\App\\Filesystem\\DirectoryList;\nuse Magento\\MediaStorage\\Model\\File\\UploaderFactory as MediaUploaderFactory;\nuse Psr\\Log\\LoggerInterface;\n\nclass UploadImage extends Action\n{\n    private $resultJsonFactory;\n    private $mediaUploaderFactory;\n    private $logger;\n    private $mediaDirectory;\n\n    public function __construct(\n        Context $context,\n        JsonFactory $resultJsonFactory,\n        MediaUploaderFactory $mediaUploaderFactory,\n        DirectoryList $directoryList,\n        LoggerInterface $logger\n    ) {\n        parent::__construct($context);\n        $this->resultJsonFactory = $resultJsonFactory;\n        $this->mediaUploaderFactory = $mediaUploaderFactory;\n        $this->logger = $logger;\n        $this->mediaDirectory = $directoryList->getPath(DirectoryList::MEDIA);\n    }\n\n    public function execute()\n    {\n        $result = $this->resultJsonFactory->create();\n        try {\n            $fileName = $this->upload('image');\n            return $result->setData(['fileName' => $fileName]);\n        } catch (\\Exception $e) {\n            return $result->setData(['error' => $e->getMessage()]);\n        }\n    }\n    \n    public function upload($fileId)\n    {\n        try {\n            $uploader = $this->mediaUploaderFactory->create(['fileId' => $fileId]);\n            $uploader->setAllowedExtensions(['jpg', 'jpeg', 'gif', 'png']);\n            $uploader->setAllowRenameFiles(true);\n            $uploader->setFilesDispersion(true);\n            $result = $uploader->save($this->mediaDirectory . '\/mymodule');\n            return $result['file'];\n        } catch (\\Exception $e) {\n            $this->logger->critical($e->getMessage());\n            return false;\n        }\n    }\n}<\/pre>\n\n\n\n
\"file-upload\"<\/figure>\n\n\n\n
Moreover, there is no need to seek elsewhere; avail yourself of the chance to commence your projects with the endorsed Magento 2 development company<\/a>.<\/p>\n\n\n\n
For a personalized touch, engage and hire Magento developers<\/a> who are focused on delivering exceptional results for your custom e-commerce projects.<\/p>\n","protected":false},"excerpt":{"rendered":"
Learn how to seamlessly integrate Uppy for frontend image uploads in Magento\u202f2.4.7, complete with step-by-step guidance and code examples. In Magento 2.4.7 we can upload files using Uppy JS library. Here, We will learn how to upload an image on the frontend in Magento 2 extension. First, we need to create the route file with […]<\/a><\/p>\n","protected":false},"author":621,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9121],"tags":[2070],"class_list":["post-438345","post","type-post","status-publish","format-standard","hentry","category-magento-2","tag-magento2"],"yoast_head":"\nUpload Image by Uppy on Frontend in Magento 2.4.7 - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Upload Image by Uppy on Frontend in Magento 2.4.7 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Learn how to seamlessly integrate Uppy for frontend image uploads in Magento\u202f2.4.7, complete with step-by-step guidance and code examples. In Magento 2.4.7 we can upload files using Uppy JS library. Here, We will learn how to upload an image on the frontend in Magento 2 extension. First, we need to create the route file with [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-06T06:12:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-05T05:03:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-from-2024-05-03-14-42-10-1200x556.webp\" \/>\n<meta name=\"author\" content=\"Udayveer Singh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Udayveer Singh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/\"},\"author\":{\"name\":\"Udayveer Singh\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/9196173859399bfbdc4b7759b51a821e\"},\"headline\":\"Upload Image by Uppy on Frontend in Magento 2.4.7\",\"datePublished\":\"2024-05-06T06:12:48+00:00\",\"dateModified\":\"2026-02-05T05:03:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/\"},\"wordCount\":243,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-from-2024-05-03-14-42-10-1200x556.webp\",\"keywords\":[\"Magento2\"],\"articleSection\":[\"Magento 2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/\",\"url\":\"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/\",\"name\":\"Upload Image by Uppy on Frontend in Magento 2.4.7 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-from-2024-05-03-14-42-10-1200x556.webp\",\"datePublished\":\"2024-05-06T06:12:48+00:00\",\"dateModified\":\"2026-02-05T05:03:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-from-2024-05-03-14-42-10.webp\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-from-2024-05-03-14-42-10.webp\",\"width\":1527,\"height\":708,\"caption\":\"file-upload-button\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Upload Image by Uppy on Frontend in Magento 2.4.7\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/9196173859399bfbdc4b7759b51a821e\",\"name\":\"Udayveer Singh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b4da463936a7e30519937382c538900c226e9551d3cc48a8473c3bf9a62bad26?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b4da463936a7e30519937382c538900c226e9551d3cc48a8473c3bf9a62bad26?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Udayveer Singh\"},\"description\":\"Udayveer is a dedicated Quality Analyst with expertise in the Magento platform. Specializing in software testing for product information management and product data, he ensures the accuracy, performance, and functionality of eCommerce systems, driving flawless user experiences and delivering high-quality solutions for businesses.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/udayveersingh-mg233\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Upload Image by Uppy on Frontend in Magento 2.4.7 - Webkul Blog","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:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/","og_locale":"en_US","og_type":"article","og_title":"Upload Image by Uppy on Frontend in Magento 2.4.7 - Webkul Blog","og_description":"Learn how to seamlessly integrate Uppy for frontend image uploads in Magento\u202f2.4.7, complete with step-by-step guidance and code examples. In Magento 2.4.7 we can upload files using Uppy JS library. Here, We will learn how to upload an image on the frontend in Magento 2 extension. First, we need to create the route file with [...]","og_url":"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2024-05-06T06:12:48+00:00","article_modified_time":"2026-02-05T05:03:16+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-from-2024-05-03-14-42-10-1200x556.webp","type":"","width":"","height":""}],"author":"Udayveer Singh","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Udayveer Singh","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/"},"author":{"name":"Udayveer Singh","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/9196173859399bfbdc4b7759b51a821e"},"headline":"Upload Image by Uppy on Frontend in Magento 2.4.7","datePublished":"2024-05-06T06:12:48+00:00","dateModified":"2026-02-05T05:03:16+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/"},"wordCount":243,"commentCount":1,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-from-2024-05-03-14-42-10-1200x556.webp","keywords":["Magento2"],"articleSection":["Magento 2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/","url":"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/","name":"Upload Image by Uppy on Frontend in Magento 2.4.7 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-from-2024-05-03-14-42-10-1200x556.webp","datePublished":"2024-05-06T06:12:48+00:00","dateModified":"2026-02-05T05:03:16+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-from-2024-05-03-14-42-10.webp","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-from-2024-05-03-14-42-10.webp","width":1527,"height":708,"caption":"file-upload-button"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/upload-image-by-uppy-on-frontend-in-magento-2-4-7\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Upload Image by Uppy on Frontend in Magento 2.4.7"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/9196173859399bfbdc4b7759b51a821e","name":"Udayveer Singh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b4da463936a7e30519937382c538900c226e9551d3cc48a8473c3bf9a62bad26?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b4da463936a7e30519937382c538900c226e9551d3cc48a8473c3bf9a62bad26?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Udayveer Singh"},"description":"Udayveer is a dedicated Quality Analyst with expertise in the Magento platform. Specializing in software testing for product information management and product data, he ensures the accuracy, performance, and functionality of eCommerce systems, driving flawless user experiences and delivering high-quality solutions for businesses.","url":"https:\/\/webkul.com\/blog\/author\/udayveersingh-mg233\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/438345","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/621"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=438345"}],"version-history":[{"count":10,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/438345\/revisions"}],"predecessor-version":[{"id":524949,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/438345\/revisions\/524949"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=438345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=438345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=438345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}