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 :