magento / inventory

Magento Inventory Project (a.k.a MSI)
Open Software License 3.0
337 stars 247 forks source link

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

Open saltomorales opened 4 months ago

saltomorales commented 4 months ago

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'),
  2. 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).

m2-assistant[bot] commented 4 months ago

Hi @saltomorales. Thank you for your report. To speed up processing of this issue, make sure that you provided sufficient information. Add a comment to assign the issue: @magento I am working on this


Join Magento Community Engineering Slack and ask your questions in #github channel.