Open
Description
Preconditions (*)
- Magento version: 2.4.7
- Magento_InventoryConfigurableProductAdminUi module installed and enabled
Steps to reproduce (*)
- Navigate to Catalog > Products > Add Configurable Product.
- Fill Name, SKU, Price.
- Navigate to the Configurations section, click Create Configurations.
- Select e.g. Color attribute, proceed to the 2nd step.
- Select some dummy values e.g. Black and Gray, proceed to the 3rd step.
- Check Apply unique images by attribute to each SKU and select attribute you chose in the 4rd step (e.g. Color).
- 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:
- Add addiittional selector in the bulk.js file:
uploadUrl = $(gallery.find('.browse-file, [name="image"]')).attr('data-url'),
- 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
Type
Projects
Status
Ready for Grooming