In Magento 2.4.7 can add recordsdata by Uppy. we’ll discover ways to add a picture on the frontend in Magento 2, you’ll be able to observe these steps.
First, we have to create the route file with the title routes.xml
Code for and many others/frontend/routes.xml file
<?xml model="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/and many others/routes.xsd"> <router id="normal"> <route id="add" frontName="add"> <module title="Webkul_ImageUploader" /> </route> </router> </config>
Then, we have to create the controller file, Controller/Index/Index.php
Code for Controller/Index/Index.php file
<?php namespace WebkulImageUploaderControllerIndex; use MagentoFrameworkAppActionAction; use MagentoFrameworkAppActionContext; use MagentoFrameworkViewResultPageFactory; class Index extends Motion { non-public $pageFactory; public operate __construct( Context $context, PageFactory $pageFactory ) { father or mother::__construct($context); $this->pageFactory = $pageFactory; } public operate execute() { return $this->pageFactory->create(); } }
Now, we have to create a format file with the title upload_index_index.xml.
Code for view/frontend/format/upload_index_index.xml file.
<?xml model="1.0"?> <web page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Structure/and many others/page_configuration.xsd"> <physique> <referenceContainer title="content material"> <block class="MagentoFrameworkViewElementTemplate" title="imageupload_form" template="Webkul_ImageUploader::kind.phtml" /> </referenceContainer> </physique> </web page>
Within the templates folder, we have to create a template file with the title kind.phtml to view the shape.
Code for view/frontend/templates/kind.phtml file
<button sort="button" class="upload-img-btn">browse recordsdata</button> <button class="delete" fashion="show: none;">X</button> <div class="img-preview"></div> <div id="uppy-root"></div> <script sort="textual content/x-magento-init"> { "#uppy-root": { "Webkul_ImageUploader/js/uppy-init": { "motion": "<?= $block->getUrl('add/index/uploadimage') ?>" } } } </script>
![file-upload-button](https://cdnblog.webkul.com/blog/wp-content/uploads/2024/05/Screenshot-from-2024-05-03-14-42-10-1200x556.webp)
Within the js folder, we have to create a js file with the title uppy-init.phtml to initialize the uppy.
Code for view/frontend/internet/js/uppy-init.js file
outline([ 'jquery', 'jquery/uppy-core' ], operate($){ $.widget('mage.intUppy', { /** * Widget initialization * @non-public */ _create: operate() { config = this.choices; $('.upload-img-btn').on('click on', operate() { $('.uppy-Dashboard-input:first').click on(); }) $('.delete').on('click on', operate() { $('.uppy-StatusBar-actionBtn').click on(); $('.img-preview').html(''); $('.delete').css('show', 'none'); }) const uppy = new Uppy.Uppy({ autoProceed: true, restrictions: { maxFileSize: 2000000, maxNumberOfFiles: 1, minNumberOfFiles: 1, allowedFileTypes: ['image/*'] }, }); uppy.use(Uppy.Dashboard, { set off: '#select-files', inline: true, goal: '#uppy-root', }); uppy.use(Uppy.XHRUpload, { endpoint: config.motion, fieldName: 'picture', headers: { 'X-Requested-With': 'XMLHttpRequest' } }); uppy.on('full', operate (outcome) { $('.delete').css('show', 'block'); console.log('Add profitable:', outcome.profitable[0].response.physique.fileName); var imgpreview = $('.uppy-Dashboard-files').html(); $('.img-preview').html(imgpreview); }); } }); return $.mage.intUppy; });
We have to create a controller file with the title UploadImage.php to add the file.
Code for Controller/Index/UploadImage.php file
<?php namespace WebkulImageUploaderControllerIndex; use MagentoFrameworkAppActionAction; use MagentoFrameworkAppActionContext; use MagentoFrameworkControllerResultJsonFactory; use MagentoFrameworkAppFilesystemDirectoryList; use MagentoMediaStorageModelFileUploaderFactory as MediaUploaderFactory; use PsrLogLoggerInterface; class UploadImage extends Motion { non-public $resultJsonFactory; non-public $mediaUploaderFactory; non-public $logger; non-public $mediaDirectory; public operate __construct( Context $context, JsonFactory $resultJsonFactory, MediaUploaderFactory $mediaUploaderFactory, DirectoryList $directoryList, LoggerInterface $logger ) { father or mother::__construct($context); $this->resultJsonFactory = $resultJsonFactory; $this->mediaUploaderFactory = $mediaUploaderFactory; $this->logger = $logger; $this->mediaDirectory = $directoryList->getPath(DirectoryList::MEDIA); } public operate execute() { $outcome = $this->resultJsonFactory->create(); strive { $fileName = $this->add('picture'); return $result->setData(['fileName' => $fileName]); } catch (Exception $e) { return $result->setData(['error' => $e->getMessage()]); } } public operate add($fileId) { strive { $uploader = $this->mediaUploaderFactory->create(['fileId' => $fileId]); $uploader->setAllowedExtensions(['jpg', 'jpeg', 'gif', 'png']); $uploader->setAllowRenameFiles(true); $uploader->setFilesDispersion(true); $outcome = $uploader->save($this->mediaDirectory . '/mymodule'); return $outcome['file']; } catch (Exception $e) { $this->logger->essential($e->getMessage()); return false; } } }
![file-upload](https://cdnblog.webkul.com/blog/wp-content/uploads/2024/05/Screenshot-from-2024-05-03-14-42-52-1200x573.webp)
In Magento 2.4.7 can add recordsdata by Uppy. we’ll discover ways to add a picture on the frontend in Magento 2, you’ll be able to observe these steps.
First, we have to create the route file with the title routes.xml
Code for and many others/frontend/routes.xml file
<?xml model="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/and many others/routes.xsd"> <router id="normal"> <route id="add" frontName="add"> <module title="Webkul_ImageUploader" /> </route> </router> </config>
Then, we have to create the controller file, Controller/Index/Index.php
Code for Controller/Index/Index.php file
<?php namespace WebkulImageUploaderControllerIndex; use MagentoFrameworkAppActionAction; use MagentoFrameworkAppActionContext; use MagentoFrameworkViewResultPageFactory; class Index extends Motion { non-public $pageFactory; public operate __construct( Context $context, PageFactory $pageFactory ) { father or mother::__construct($context); $this->pageFactory = $pageFactory; } public operate execute() { return $this->pageFactory->create(); } }
Now, we have to create a format file with the title upload_index_index.xml.
Code for view/frontend/format/upload_index_index.xml file.
<?xml model="1.0"?> <web page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Structure/and many others/page_configuration.xsd"> <physique> <referenceContainer title="content material"> <block class="MagentoFrameworkViewElementTemplate" title="imageupload_form" template="Webkul_ImageUploader::kind.phtml" /> </referenceContainer> </physique> </web page>
Within the templates folder, we have to create a template file with the title kind.phtml to view the shape.
Code for view/frontend/templates/kind.phtml file
<button sort="button" class="upload-img-btn">browse recordsdata</button> <button class="delete" fashion="show: none;">X</button> <div class="img-preview"></div> <div id="uppy-root"></div> <script sort="textual content/x-magento-init"> { "#uppy-root": { "Webkul_ImageUploader/js/uppy-init": { "motion": "<?= $block->getUrl('add/index/uploadimage') ?>" } } } </script>
![file-upload-button](https://cdnblog.webkul.com/blog/wp-content/uploads/2024/05/Screenshot-from-2024-05-03-14-42-10-1200x556.webp)
Within the js folder, we have to create a js file with the title uppy-init.phtml to initialize the uppy.
Code for view/frontend/internet/js/uppy-init.js file
outline([ 'jquery', 'jquery/uppy-core' ], operate($){ $.widget('mage.intUppy', { /** * Widget initialization * @non-public */ _create: operate() { config = this.choices; $('.upload-img-btn').on('click on', operate() { $('.uppy-Dashboard-input:first').click on(); }) $('.delete').on('click on', operate() { $('.uppy-StatusBar-actionBtn').click on(); $('.img-preview').html(''); $('.delete').css('show', 'none'); }) const uppy = new Uppy.Uppy({ autoProceed: true, restrictions: { maxFileSize: 2000000, maxNumberOfFiles: 1, minNumberOfFiles: 1, allowedFileTypes: ['image/*'] }, }); uppy.use(Uppy.Dashboard, { set off: '#select-files', inline: true, goal: '#uppy-root', }); uppy.use(Uppy.XHRUpload, { endpoint: config.motion, fieldName: 'picture', headers: { 'X-Requested-With': 'XMLHttpRequest' } }); uppy.on('full', operate (outcome) { $('.delete').css('show', 'block'); console.log('Add profitable:', outcome.profitable[0].response.physique.fileName); var imgpreview = $('.uppy-Dashboard-files').html(); $('.img-preview').html(imgpreview); }); } }); return $.mage.intUppy; });
We have to create a controller file with the title UploadImage.php to add the file.
Code for Controller/Index/UploadImage.php file
<?php namespace WebkulImageUploaderControllerIndex; use MagentoFrameworkAppActionAction; use MagentoFrameworkAppActionContext; use MagentoFrameworkControllerResultJsonFactory; use MagentoFrameworkAppFilesystemDirectoryList; use MagentoMediaStorageModelFileUploaderFactory as MediaUploaderFactory; use PsrLogLoggerInterface; class UploadImage extends Motion { non-public $resultJsonFactory; non-public $mediaUploaderFactory; non-public $logger; non-public $mediaDirectory; public operate __construct( Context $context, JsonFactory $resultJsonFactory, MediaUploaderFactory $mediaUploaderFactory, DirectoryList $directoryList, LoggerInterface $logger ) { father or mother::__construct($context); $this->resultJsonFactory = $resultJsonFactory; $this->mediaUploaderFactory = $mediaUploaderFactory; $this->logger = $logger; $this->mediaDirectory = $directoryList->getPath(DirectoryList::MEDIA); } public operate execute() { $outcome = $this->resultJsonFactory->create(); strive { $fileName = $this->add('picture'); return $result->setData(['fileName' => $fileName]); } catch (Exception $e) { return $result->setData(['error' => $e->getMessage()]); } } public operate add($fileId) { strive { $uploader = $this->mediaUploaderFactory->create(['fileId' => $fileId]); $uploader->setAllowedExtensions(['jpg', 'jpeg', 'gif', 'png']); $uploader->setAllowRenameFiles(true); $uploader->setFilesDispersion(true); $outcome = $uploader->save($this->mediaDirectory . '/mymodule'); return $outcome['file']; } catch (Exception $e) { $this->logger->essential($e->getMessage()); return false; } } }
![file-upload](https://cdnblog.webkul.com/blog/wp-content/uploads/2024/05/Screenshot-from-2024-05-03-14-42-52-1200x573.webp)