Magento 2.4: How to add import button in admin grid with UI Component?

Question

I have create a custom admin grid but i do not khow how to add the import button inside my code Here is my code with ui component:

<listingToolbar name="listing_top">
 <settings>
 <sticky>true</sticky>
 </settings>
 <bookmark name="bookmarks"/>
 <exportButton name="export_button"/>
 <columnsControls name="columns_controls"/>
 <filters name="listing_filters" />
 <paging name="listing_paging"/>
 <massaction name="listing_massaction">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/grid/tree-massactions</item>
 </item>
 </argument>
 <action name="delete">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="type" xsi:type="string">delete</item>
 <item name="label" xsi:type="string" translate="true">Delete</item>
 <item name="url" xsi:type="url" path="*/*/delete"/>
 <item name="confirm" xsi:type="array">
 <item name="title" xsi:type="string" translate="true">Delete Row</item>
 <item name="message" xsi:type="string" translate="true">Are you sure you wan't to delete selected items?</item>
 </item>
 </item>
 </argument>
 </action>
 </massaction>
 </listingToolbar>

How to add import button, i really appreaciate it. PLease help me

Answer 1

Add reference Block in your listing.xml

<referenceContainer name="content">
 <block class="vendor\module\Block\Adminhtml\Import\Edit" name="import-form"/>
 <uiComponent name="your_listing"/>
</referenceContainer>

Create File Edit.php on this path vendor\module\Block\Adminhtml\Import\

<?php
namespace Vendor\Module\Block\Adminhtml\Import;
class Edit extends \Magento\Backend\Block\Widget\Form\Container
{
 protected $_coreRegistry = null;
 public function __construct(
 \Magento\Backend\Block\Widget\Context $context,
 \Magento\Framework\Registry $registry,
 \Magento\Framework\App\Response\RedirectInterface $redirect,
 array $data = []
 ) {
 $this->_coreRegistry = $registry;
 $this->redirect = $redirect;
 parent::__construct($context, $data);
 }
 protected function _construct()
 {
 $this->_blockGroup = 'Vendor_Module';
 $this->_controller = 'adminhtml_import';
 }
 public function getHeaderText()
 {
 return __('Import Csv');
 }
 public function getBackUrl()
 {
 return $this->getUrl('cms/page/index');
 }
 public function _prepareLayout()
 {
 $this->_formScripts[] = "
 function toggleEditor() {
 if (tinyMCE.getInstanceById('page_content') == null) {
 tinyMCE.execCommand('mceAddControl', false, 'page_content');
 } else {
 tinyMCE.execCommand('mceRemoveControl', false, 'page_content');
 }
 };
 ";
 return parent::_prepareLayout();
 }
}

Create Field using create file Form.php in Vendor/Module/Block/Adminhtml/Import/Edit path

<?php
namespace Vendor\Module\Block\Adminhtml\Import\Edit;
use Magento\Backend\Block\Widget\Form\Generic;
class Form extends Generic
{
 protected $_formFactory;
 public function __construct(
 \Magento\Backend\Block\Template\Context $context,
 \Magento\Framework\Data\FormFactory $formFactory,
 \Magento\Framework\Registry $registry,
 array $data = []
 ) {
 $this->_formFactory = $formFactory;
 parent::__construct($context, $registry, $formFactory, $data);
 }
 protected function _prepareForm()
 {
 $form = $this->_formFactory->create(
 [
 'data' => [
 'id' => 'edit_form',
 'enctype' => 'multipart/form-data',
 'action' => $this->getUrl('import/import/index'),
 'method' => 'post',
 ],
 ]
 );
 $uploadFileFieldset = $form->addFieldset(
 'upload_file_fieldset',
 [
 'legend' => __('File to Import'),
 'class' => 'fieldset-wide',
 ]
 );
 $uploadFileFieldset->addField(
 'import_file',
 'file',
 [
 'name' => 'import_file',
 'label' => __('Select Csv File to Import'),
 'title' => __('Select Csv File to Import'),
 'required' => true,
 'class' => 'input-file',
 ]
 );
 $uploadFileFieldset->addField(
 'upload_button',
 'button',
 [
 'name' => 'upload_button',
 'label' => __('click'),
 'title' => __('click'),
 'class' => 'upload_button',
 'data_attribute' => '',
 'value' => 'Upload',
 'onclick' => 'varienImport.validateImport();'
 ]
 );
 $form->setUseContainer(true);
 $this->setForm($form);
 return parent::_prepareForm();
 }
 public function _prepareLayout()
 {
 $this->_formScripts[] = "
 function toggleEditor() {
 if (tinyMCE.getInstanceById('page_content') == null) {
 tinyMCE.execCommand('mceAddControl', false, 'page_content');
 } else {
 tinyMCE.execCommand('mceRemoveControl', false, 'page_content');
 }
 };
 ";
 return parent::_prepareLayout();
 }
}

It is seen like this :

enter image description here

• KAITO_3SS: hey, so "import data" button need to change the url to block or controller ?
• Divyarajsinh Barad: on controller you can read your file and save data.
• Divyarajsinh Barad: Also in this custom upload file you can create file validation using controller .
• KAITO_3SS: Could you show me all your files, you can push on git and send me the link, i need a visual in order to imagine this situation.
• Divyarajsinh Barad: sure i send you link .

Answer 2

Add new import button in your ui component file like this.

 <item name="buttons" xsi:type="array">
 <item name="import" xsi:type="array">
 <item name="name" xsi:type="string">import</item>
 <item name="label" xsi:type="string">Import Data</item>
 <item name="class" xsi:type="string">primary</item>
 <item name="url" xsi:type="string">route/controller/import</item>
 </item>
 </item>

In your listing grid file's buttons section & create controller Import.php , read csv in your controller & save data in your model.

• KAITO_3SS: Could you show me the controller file, i am curious
• Divyarajsinh Barad: did you save data in database before in magento.

Answer 3

your controller be like :

 public function execute()
 {
 $columns = [your_field_as_header_here];
 foreach($model as $data){
 $filePath = 'http://domain/magentoname/pub/media/import.csv';
 $fp = fopen($filePath, 'a');
 fgetcsv( $fp, $columns,",");
 ... 
 $content[] = $data->getId();
 and your other field in array
 and save in your model
 $model->setData($content);
 $model->save()
 ...
 }
 }

• KAITO_3SS: But this is like when you import CSV from your folder inside magento root, i wonder is there any way when user click the "Import Data" button, it will browser their computer so they can select the file they want to import
• Divyarajsinh Barad: sure just a min ,i change code