Magento 2.2.1: Add Custom Upload file attribute in Checkout

Question

I tried to add an Upload file attribute to the Checkout form, I am now able to add a custom field, but still, I am unable to save values to the database -

I used add Plugin -

added Below code

Amit\Fileupload\etc\di.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="file_upload" type="Amit\Fileupload\Model\Plugin\Checkout\LayoutProcessor" sortOrder="100"/>        
    </type>
</config>

Amit\Fileupload\Model\Plugin\Checkout\LayoutProcessor.php

<?php
namespace Amit\Fileupload\Model\Plugin\Checkout;
class LayoutProcessor
{
    /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array  $jsLayout
    ) {
        
            $fileupload = 'file_upload';
            $datascope = 'shippingAddress.custom_attributes';

            $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
            ['shippingAddress']['children']['shipping-address-fieldset']['children'][$fileupload] = [
                'component' => 'Magento_Ui/js/form/element/media',
                'config' => [
                    'customScope' => 'shippingAddress.custom_attributes',
                    'customEntry' => null,
                    'template' => 'ui/form/field',
                    'elementTmpl' => 'ui/form/element/media',
                    'tooltip' => ['description' => 'Field to Upload File'],                 
                    'id' => $fileupload
                ],
                'dataScope' => $datascope,
                'label' => 'File Upload',
                'provider' => 'checkoutProvider',
                'visible' => true,
                'validation' => ['required-entry' => true],
                'options' => [],
                'sortOrder' => 250,
                'id' => $fileupload
            ];
        
        return $jsLayout;
    }
}

Now, further how to save the data of this field, looking for help on this thanks!

where (in which table) do you want to save the custom field value. Do you want to save it in any custom table? — Pritam Biswas
– Pritam Biswas, Commented Dec 7, 2018 at 12:47

Divyarajsinh Barad · Accepted Answer · 2023-11-24 12:17:30Z

To create custom attr :

class InstallData implements InstallDataInterface
{
    private $customerSetupFactory;

    public function __construct(CustomerSetupFactory $customerSetupFactory)
    {
        $this->customerSetupFactory = $customerSetupFactory;
    }

    public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
    {
        $installer = $setup;
        $installer->startSetup();

        $customerSetup = $this->customerSetupFactory->create(['setup' => $setup]);

        $customerSetup->addAttribute(
            \Magento\Customer\Model\Customer::ENTITY,
            'custom_file',
            [
                'type' => 'varchar',
                'label' => 'Custom File',
                'input' => 'file',
                'position' => 1000,
                'visible' => true,
                'required' => false,
                'system' => false,
                'user_defined' => true,
                'position' => 1000,
                'is_used_in_grid' => true,
                'is_visible_in_grid' => false,
                'is_filterable_in_grid' => true,
                'is_searchable_in_grid' => false
            ]
        );

        $customFileAttribute = $customerSetup->getEavConfig()->getAttribute(\Magento\Customer\Model\Customer::ENTITY, 'custom_file');
        $customFileAttribute->setData('used_in_forms', ['adminhtml_customer']);
        $customFileAttribute->save();

        $installer->endSetup();
    }
}

Define field in checkout_index_index.xml :

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="shippingAdditional" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="custom-file-upload" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Custom_Module/js/view/checkout/shipping/custom-file-upload</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Add js file in module :

define([
    'uiComponent'
], function (Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Custom_Module/checkout/shipping/custom-file-upload'
        },

        initialize: function () {
            this._super();
            // add your initialization logic here
        }
    });
});

Create html file as per define in js file :

<input type="file" data-bind="
    attr: {
        'id': 'custom-file-upload',
        'name': 'custom_file'
    },
    value: customFile"
/>

And Add uploaded file after order in custom table with order id.

class InstallSchema implements InstallSchemaInterface
{
    public function install(SchemaSetupInterface $setup, ModuleContextInterface $context)
    {
        $installer = $setup;
        $installer->startSetup();

        $table = $installer->getConnection()->newTable(
            $installer->getTable('custom_module_uploaded_files')
        )->addColumn(
            'file_id',
            \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
            null,
            ['identity' => true, 'nullable' => false, 'primary' => true],
            'File ID'
        )->addColumn(
            'order_id',
            \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
            null,
            ['nullable' => false],
            'Order ID'
        )->addColumn(
            'file_path',
            \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
            255,
            ['nullable' => true],
            'File Path'
        )->addIndex(
            $installer->getIdxName('custom_module_uploaded_files', ['order_id']),
            ['order_id']
        )->addForeignKey(
            $installer->getFkName('custom_module_uploaded_files', 'order_id', 'sales_order', 'entity_id'),
            'order_id',
            $installer->getTable('sales_order'),
            'entity_id',
            \Magento\Framework\DB\Ddl\Table::ACTION_CASCADE
        )->setComment(
            'Custom Module Uploaded Files'
        );

        $installer->getConnection()->createTable($table);
        $installer->endSetup();
    }
}

Add below file to save data :

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Sales\Api\OrderRepositoryInterface">
        <plugin name="custom_module_save_image_data" type="Custom\Module\Plugin\OrderRepositoryPlugin" sortOrder="1" disabled="false" />
    </type>
</config>

Add plugin class :

  class OrderRepositoryPlugin
    {
        public function beforeSave(OrderRepositoryInterface $subject, OrderInterface $order, $saveOptions = false)
        {
            $customImageData = $this->getCustomImageData();
            $order->setCustomImageData($customImageData);
            return [$order, $saveOptions];
        }
    
        private function getCustomImageData()
        {
            ..
        }
    }

Stack Exchange Network

Magento 2.2.1: Add Custom Upload file attribute in Checkout

1 Answer 1

Your Answer

Hot Network Questions

Magento 2.2.1: Add Custom Upload file attribute in Checkout

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions