Skip to content

Unable to upload bulk image when Magento_InventoryConfigurableProductAdminUi module is enabled #3409

Open
@saltomorales

Description

@saltomorales

Preconditions (*)

  1. Magento version: 2.4.7
  2. Magento_InventoryConfigurableProductAdminUi module installed and enabled

Steps to reproduce (*)

  1. Navigate to Catalog > Products > Add Configurable Product.
  2. Fill Name, SKU, Price.
  3. Navigate to the Configurations section, click Create Configurations.
  4. Select e.g. Color attribute, proceed to the 2nd step.
  5. Select some dummy values e.g. Black and Gray, proceed to the 3rd step.
  6. Check Apply unique images by attribute to each SKU and select attribute you chose in the 4rd step (e.g. Color).
  7. Try to upload image for one of the options.

Expected result (*)

Picture is uploaded and visible in the preview.

Actual result (*)

Infinite loader is visible in the image preview. Image is not uploaded.
There are errors in the console:

uppy.min.js:21 
https://website.domain/admin/catalog/product/new/set/4/type/configurable/key/<key>/undefined 404 (Not Found)

and:

uppy.min.js:2 [Uppy] [07:03:33] Upload error

How to fix

It's because there's wrong upload URL fetched (actually there is no upload URL at all) here: Magento_ConfigurableProduct/js/variations/steps/bulk.js:374

uploadUrl = $(gallery.find('.browse-file')).attr('data-url'),

and Magento_InventoryConfigurableProductAdminUi::catalog/product/edit/attribute/steps/bulk.phtml:85 does not use browse-file file class:

<input type="file"
         id=""
         name="image"
         class="admin__control-file"
         multiple="multiple"
         data-url="<?= /* @noEscape */ $block->getUrl('catalog/product_gallery/upload') ?>" />

as Magento_ConfigurableProduct::catalog/product/edit/attribute/steps/bulk.phtml uses:

<span class="browse-file" data-url="<?= /* @noEscape */ $uploadUrl ?>"></span>

There are two possible ways to solve the issue:

  1. Add addiittional selector in the bulk.js file:
uploadUrl = $(gallery.find('.browse-file, [name="image"]')).attr('data-url'),
  1. Add browse-file class to the input in the Magento_InventoryConfigurableProductAdminUi's bulk.phtml template:
<input type="file"
         id=""
         name="image"
         class="admin__control-file browse-file"
         multiple="multiple"
         data-url="<?= /* @noEscape */ $block->getUrl('catalog/product_gallery/upload') ?>" />

(Please note, that there are two inputs).

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    Ready for Grooming

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions