I have a custom requirement to upload customer id during checkout.

I have created a custom module with a text type input file. data saved and everything fine the process was.

I want to update the text type to file uploading type.

i tried below method in my custom module. But i am getting an error.

Created a phtml file in


<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 }" />

And defined in the plugin file like below

namespace Ayakil\CheckoutCustomField\Plugin;
use Magento\Checkout\Block\Checkout\LayoutProcessor;
class SmsPlugin
public function afterProcess(LayoutProcessor $subject, $jsLayout) {
    $customAttributeCode = 'sms';
    $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' => 'Ayakil_CheckoutCustomField/form/element/newtempfile',
            'tooltip' => [
                'description' => 'Mobile (Courier text notifications)',
        'dataScope' => 'shippingAddress.custom_attributes' . '.' . $customAttributeCode,
        'label' => 'Custom SMS Attribute',
        'provider' => 'checkoutProvider',
        'sortOrder' => 0,
        'validation' => [
            'required-entry' => true
        'options' => [],
        'filterBy' => null,
        'customEntry' => null,
        'visible' => true,

    $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children'][$customAttributeCode] = $customField;

    return $jsLayout;

But i am getting an error.

 [2020-01-27 01:12:57] [ERROR] Failed to load the "Ayakil_CheckoutCustomField/form/element/newtempfile" template requested by "checkout.steps.shipping-step.shippingAddress.shipping-address-fieldset.sms".

How to upload and save an image in magento 2 checout in shipping form section.Please help me to solve this task.

  • newtempfile.phtml should be an html file and not phtml
    – Piyush
    Jan 27 '20 at 7:50
  • @Piyush thank you very much, Any idea to handle the upload file and processed in the order section to see by admin ?
    – Mujahidh
    Jan 27 '20 at 7:52
  • are you managed to get this working? @Mujahidh Sep 2 '21 at 15:48

In Magento Marketplace there are some extensions are available to order attachment. it will be helpful for you. please check the below extension https://marketplace.magento.com/meetanshi-magento2-order-attachment.html (paid) https://marketplace.magento.com/sp-orderattachment.html (free)

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.