2

**enter image description here**

I'm very new to Magento. This is what is tried to achieve, an image uploader in custom checkout.

But the problem is that I have no idea how to upload the image. The code below is what I had tried.

I have no idea how the UploaderFactory model work, I realized $uploader = $this->_fileUploaderFactory->create(['fileId' => 'image']); doesn't get any files from my input component in form HTML.

I have no confidence in what I do the incorrect path.

Please help, thanks a lot.

Debug log message:

[2020-06-04 11:39:33] main.DEBUG: $_FILES array is empty {"exception":"[object] (DomainException(code: 0): $_FILES array is empty at /opt/bitnami/apps/magento/htdocs/vendor/magento/framework/File/Uploader.php:573)"} []

Most of my code is referring: https://github.com/mageplaza/magento-2-sample-payment-method And I like to modify it to upload an image. Upload text field already worked, but image upload drove me crazy.

Please help!

My template payment form HTML.

<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div
    class="payment-method"
    enctype="multipart/form-data"
    data-bind="css: {'_active': (getCode() == isChecked())}"
>
    <div class="payment-method-title field choice">
        <input
            type="radio"
            name="payment[method]"
            class="radio"
            data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"
        />
        <label class="label" data-bind="attr: {'for': getCode()}">
            <span data-bind="text: getTitle()"></span>
        </label>
    </div>

    <div class="payment-method-content">
        <!-- ko foreach: getRegion('messages') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
        <div class="payment-method-billing-address">
            <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>

        <div class="field required">
            <label data-bind="attr: {for: getCode() + '_amount'}" class="label">
                <span> <!-- ko i18n: 'Amount'--><!-- /ko --> </span>
            </label>

            <div>
                <input
                    name="payment[amount]"
                    class="input-text"
                    type="number"
                    min="0.00"
                    step="0.01"
                    data-bind="
                                valueUpdate: 'keyup',
                                value: amount,
                                attr: {
                                        name: 'amount',
                                        placeholder: 'Transfered amount',
                                        'aria-describedby': 'noticeId',
                                        id: 'uid',
                                        disabled: false
                                    }"
                />
            </div>
        </div>

        <div class="field image">
            <label
                data-bind="attr: {for: getCode() + '_receiptimage'}"
                class="label"
            >
                <span> <!-- ko i18n: 'Bank Receipt Image'--><!-- /ko --> </span>
            </label>

            <div class="control">
                <input
                    type="file"
                    name="image"
                    id="image"
                    accept="*"
                    multiple="multiple"
                    data-bind="event: {change: receiptImageUpload},
                                attr:{
                                    name: 'image'
                                }"
                />
            </div>
        </div>

        <div class="actions-toolbar">
            <div class="primary">
                <button
                    class="action primary checkout"
                    type="submit"
                    data-bind="
                        click: placeOrder,
                        attr: {title: $t('Place Order')}
                        "
                >
                    <span data-bind="i18n: 'Place Order'"></span>
                </button>
            </div>
        </div>
    </div>
</div>

event.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
<event name="payment_method_assign_data">
    <observer name="bank_transfer_with_form_payment_gateway_data_assign" instance="Marslab\BankTransferWithFormPaymentGateway\Observer\DataAssignObserver" />
</event>

My observer DataAssignObserver.php

    <?php

/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

namespace Marslab\BankTransferWithFormPaymentGateway\Observer;

use Magento\Framework\Event\Observer;
use Magento\Payment\Observer\AbstractDataAssignObserver;

use Magento\Framework\Event\ObserverInterface;
use Magento\Framework\App\Filesystem\DirectoryList;
use Magento\Framework\Filesystem;

class DataAssignObserver extends AbstractDataAssignObserver implements ObserverInterface
{
    protected $_logger;

    /**
     * @param Observer $observer
     * @return void
     */

    /**
     * File Uploader factory.
     *
     * @var \Magento\MediaStorage\Model\File\UploaderFactory
     */
    protected $_fileUploaderFactory;

    protected $_mediaDirectory;

    /**
     * @param Filesystem                                       $filesystem,
     * @param \Magento\MediaStorage\Model\File\UploaderFactory $fileUploaderFactory
     */

    public function __construct(
        Filesystem $filesystem,
        \Psr\Log\LoggerInterface $logger,
        \Magento\MediaStorage\Model\File\UploaderFactory $fileUploaderFactory
    ) {
        $this->_logger = $logger;
        $this->_mediaDirectory = $filesystem->getDirectoryWrite(DirectoryList::MEDIA);
        $this->_fileUploaderFactory = $fileUploaderFactory;
    }

    public function execute(Observer $observer)
    {
        try {
            $method = $this->readMethodArgument($observer);
            $data = $this->readDataArgument($observer);

            $paymentInfo = $method->getInfoInstance();
            $this->_logger->debug("testing");

            $paymentInfo->setAdditionalInformation(
                'amount',
                $data->getDataByKey('additional_data')['amount']
            );

            $target = $this->_mediaDirectory->getAbsolutePath('customimage/image/');

            $this->_logger->debug($target);

            /** @var $uploader \Magento\MediaStorage\Model\File\Uploader */
            $uploader = $this->_fileUploaderFactory->create(
                ['fileId' => 'image']
            );
            $this->_logger->debug(" ['fileId' => 'image']");
            $uploader->setAllowedExtensions(
                ['jpg', 'jpeg', 'gif', 'png']
            );
            $uploader->setAllowRenameFiles(true);

            $resul = $uploader->save($target);

            $this->_logger->debug($resul);
        } catch (\Exception $e) {
            $this->_logger->debug($e);
            return '';
        }

        return $this;
    } 
}
2
  • I am facing the same issue, have you found anything on this? – Pribhav Aug 14 '20 at 4:37
  • any updated on this? – Rizwan Khan Nov 9 '20 at 14:13

Your Answer

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

Browse other questions tagged or ask your own question.