File Upload field on checkout page with shipping address Magento 2

Question

I have create a file upload field on check out page with shipping address.But file is not going to upload.

I want to upload a file in specific folder and save the file path in data base.Please see the below code and where am i doing wrong?.

$customAttributeCode = 'custom_field';
    $customField = [
    'component' => 'Magento_Ui/js/form/element/abstract',
    'config' => [
        // customScope is used to group elements within a single form (e.g. they can be validated separately)
        'customScope' => 'shippingAddress.custom_attributes',
        'customEntry' => null,
        'template' => 'ui/form/field',
        'elementTmpl' => 'ui/form/element/media',
        'tooltip' => [
            'description' => 'this is what the field is for',
        ],
    ],
    'dataScope' => 'shippingAddress.custom_attributes' . '.' . $customAttributeCode,
    'label' => "Client's ID",
    'provider' => 'checkoutProvider',
    'sortOrder' => 255,
    /* 'validation' => [
       'required-entry' => true
    ], */
    'options' => [],
    'filterBy' => null,
    'customEntry' => null,
    'visible' => true,
    'formId'=>'client',
];
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children'][$customAttributeCode] = $customField;

       return $jsLayout;

Can any one help me on this problem ? Any references or suggestions are highly appreciated.

Answer 1

You have to add a custom template for a form field on Checkout page

Create a new .html template in the following directory: /view/frontend/web/template/form/element

Example of a field template:

<input class="input-file" type="file" data-bind="
value: value,
valueUpdate: 'keyup',
hasFocus: focused,
attr: {
    name: inputName,
    placeholder: placeholder,
    'aria-describedby': getDescriptionId(),
    'aria-required': required,
    'aria-invalid': error() ? true : 'false',
    id: uid,
    disabled: disabled
}" />

After that replace your "elementTmpl" in your code like :

$customAttributeCode = 'custom_field';
    $customField = [
    'component' => 'Magento_Ui/js/form/element/abstract',
    'config' => [
        // customScope is used to group elements within a single form (e.g. they can be validated separately)
        'customScope' => 'shippingAddress.custom_attributes',
        'customEntry' => null,
        'template' => 'ui/form/field',
        'elementTmpl' => 'Vendor_ModuleName/form/element/newtemplatefilename',
        'tooltip' => [
            'description' => 'this is what the field is for',
        ],
    ],
    'dataScope' => 'shippingAddress.custom_attributes' . '.' . $customAttributeCode,
    'label' => "Client's ID",
    'provider' => 'checkoutProvider',
    'sortOrder' => 255,
    /* 'validation' => [
       'required-entry' => true
    ], */
    'options' => [],
    'filterBy' => null,
    'customEntry' => null,
    'visible' => true,
    'formId'=>'client',
];
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children'][$customAttributeCode] = $customField;

       return $jsLayout;

After that clean cache and check.