6

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.

1
  • how did you completed this task, Can you please help me on this? – Mujahidh Jan 27 '20 at 11:31
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.

3
  • how can i process the image upload from checkout , please help me. – Mujahidh Jan 27 '20 at 11:30
  • @mujahidh you have to upload the file using ajax. – Dharmendra Jadav Jan 27 '20 at 11:38
  • Explain in brief and also share checkout_index_index.xml file – Sayyed Hasan Feb 20 '20 at 10:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.