add isMultipleFiles property to image form element template #36325

pacco-a · 2022-10-18T13:52:57Z

Prevent the "Browse to find or drag image here" button to disappear when an image is added in a multiple files image form element.

Description (*)

The only modification in the code is the addition of the already existing (and utilized) property "isMultipleFiles" into the condition that determine whether the "Browse to find or drag image here" button should be display or not.

In doing so, when the user add an image to the multiple files image form element, the "Browse to find or drag image here" is still there.

This is useful to inform the user that the form element can take multiple images and that these images can be drag and drop, especially when the form element is initially populated with existing images.

Manual testing scenarios (*)

Create an adminhtml UI form with an imageUploader element.
Define the "isMultipleFiles" boolean property to true in this element.
Check the form, the "Browse to find or drag image here" button disappear after the first image is uploaded.

Contribution checklist (*)

Pull request has a meaningful description of its purpose
All commits are accompanied by meaningful commit messages
All new or changed code is covered with unit/integration tests (if applicable)
README.md files for modified modules are updated and included in the pull request if any README.md predefined sections require an update
All automated tests passed successfully (all builds are green)

Resolved issues:

resolves [Issue] add isMultipleFiles property to image form element template #39219: add isMultipleFiles property to image form element template

m2-assistant · 2022-10-18T13:53:00Z

Hi @webPacco. Thank you for your contribution
Here are some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

@magento give me test instance - deploy test instance based on PR changes
@magento give me 2.4-develop instance - deploy vanilla Magento instance

❗ Automated tests can be triggered manually with an appropriate comment:

@magento run all tests - run or re-run all required tests against the PR changes
@magento run <test-build(s)> - run or re-run specific test build(s)
For example: @magento run Unit Tests

<test-build(s)> is a comma-separated list of build names. Allowed build names are:

Database Compare
Functional Tests CE
Functional Tests EE,
Functional Tests B2B
Integration Tests
Magento Health Index
Sample Data Tests CE
Sample Data Tests EE
Sample Data Tests B2B
Static Tests
Unit Tests
WebAPI Tests
Semantic Version Checker

You can find more information about the builds here

ℹ️ Run only required test builds during development. Run all test builds before sending your pull request for review.

For more details, review the Magento Contributor Guide documentation.

⚠️ According to the Magento Contribution requirements, all Pull Requests must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.

🕙 You can find the schedule on the Magento Community Calendar page.

📞 The triage of Pull Requests happens in the queue order. If you want to speed up the delivery of your contribution, join the Community Contributions Triage session to discuss the appropriate ticket.

✏️ Feel free to post questions/proposals/feedback related to the Community Contributions Triage process to the corresponding Slack Channel

…e_file_image_form

MeCapron · 2022-10-19T10:46:38Z

@magento run all tests

magento-automated-testing · 2022-10-19T10:46:46Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

ishakhsuvarov · 2022-10-20T19:44:26Z

@magento run all tests

magento-automated-testing · 2022-10-20T19:44:30Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

engcom-Echo · 2022-11-28T11:20:03Z

@magento run Integration Tests, Functional Tests EE, Functional Tests CE, Functional Tests B2B

magento-automated-testing · 2022-11-28T11:20:10Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

engcom-Echo · 2022-11-29T12:03:17Z

@magento run Integration Tests, Functional Tests EE, Functional Tests CE, Functional Tests B2B

magento-automated-testing · 2022-11-29T12:03:21Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

engcom-Echo · 2022-11-29T13:23:58Z

Hi @pacco-a

The issue is not reproducible on 2.4-develop branch.
Below are the steps we have followed to reproduce the issue.

Create an adminhtml UI form with an imageUploader element.

 <field name="image"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="dataType" xsi:type="string">string</item> <item name="source" xsi:type="string">image</item> <item name="label" xsi:type="string" translate="true">Image</item> <item name="visible" xsi:type="boolean">true</item> <item name="isMultipleFiles" xsi:type="boolean">true</item> <item name="formElement" xsi:type="string">imageUploader</item> <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item> <item name="previewTmpl" xsi:type="string">IMG_SampleImageUploader/image-preview</item> <item name="validation" xsi:type="array"> <item name="required-entry" xsi:type="boolean">true</item> </item> <item name="uploaderConfig" xsi:type="array"> <item name="url" xsi:type="url" path="sampleimageuploader/image/upload/field/image"/> </item> </item> </argument> </field>

Define the "isMultipleFiles" boolean property to true in this element.
Check the form, the "Browse to find or drag image here" button disappear after the first image is uploaded.

Please let us know if we are missing something here.

engcom-Lima · 2022-12-05T09:58:43Z

Hi @pacco-a ,

Thanks for your contribution and collaboration.

Kindly provide us details on above comment as soon as possible . So, that we proceed further with this PR.

Thanks

engcom-Echo · 2022-12-13T06:08:23Z

Hi @pacco-a

We have noticed that this PR has not been updated for a period of 14 Days.
Hence we assume that this issue is fixed now, so we are closing it.Please raise a fresh PR or reopen this PR if you need more assistance on this.

Thanks

pacco-a · 2023-01-11T08:41:56Z

Hi @engcom-Echo,

Sorry for the time. I personally keep reproducing this behavior when using 2.4-develop branch.

Maybe there is something wrong in my process :

1 - Configuring a blank new 2.4-develop project.

2 - Creating a new module for testing purposes (here : "FormTestModule")

3 - Adding a Controller (1) , layout (2) , Ui Component form (3) , dummy DataProvider (4), dummy Uploader route (5)

(1)

<?php declare(strict_types=1); namespace Pacco\FormTestModule\Controller\Adminhtml\FormTestController; use Magento\Backend\App\Action; use Magento\Backend\App\Action\Context; use Magento\Framework\App\Action\HttpGetActionInterface; use Magento\Framework\Controller\ResultInterface; use Magento\Framework\View\Result\PageFactory; class FormTestAction extends Action implements HttpGetActionInterface { private PageFactory $resultPageFactory; public function __construct( Context $context, PageFactory $resultPageFactory ) { parent::__construct($context); $this->resultPageFactory = $resultPageFactory; } public function execute(): ResultInterface { $page = $this->resultPageFactory->create(); $page->getConfig()->getTitle()->set('Test form title'); return $page; } }

(2)

<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="content"> <uiComponent name="formtest_formtest_formtest_form"/> </referenceContainer> </body> </page>

(3)

<?xml version="1.0"?> <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <argument name="data" xsi:type="array"> <item name="js_config" xsi:type="array"> <item name="provider" xsi:type="string"> formtest_formtest_formtest_form.formtest_formtest_formtest_form_data_source </item> <item name="deps" xsi:type="string"> formtest_formtest_formtest_form.formtest_formtest_formtest_form_data_source </item> </item> <item name="config" xsi:type="array"> <item name="dataScope" xsi:type="string">data</item> </item> <item name="template" xsi:type="string">templates/form/collapsible</item> <item name="label" xsi:type="string" translate="true">FormTest Form</item> <item name="buttons" xsi:type="array"> </item> </argument> <dataSource name="formtest_formtest_formtest_form_data_source"> <argument name="dataProvider" xsi:type="configurableObject"> <argument name="class" xsi:type="string"> Pacco\FormTestModule\Ui\Component\Form\FormTestDataProvider </argument> <argument name="name" xsi:type="string">formtest_formtest_formtest_form_data_source</argument> <argument name="primaryFieldName" xsi:type="string">id</argument> <argument name="requestFieldName" xsi:type="string">id</argument> </argument> <argument name="data" xsi:type="array"> <item name="js_config" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item> </item> </argument> </dataSource> <fieldset name="config"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="label" xsi:type="string" translate="true">Configuration</item> <item name="collapsible" xsi:type="boolean">false</item> <item name="visible" xsi:type="boolean">false</item> </item> </argument> <field name="edit_type"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="dataType" xsi:type="string">text</item> <item name="formElement" xsi:type="string">input</item> <item name="default" xsi:type="string">default</item> </item> </argument> </field> </fieldset> <fieldset name="formtest"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="label" xsi:type="string" translate="true">FormTest</item> <item name="collapsible" xsi:type="boolean">false</item> <item name="dataScope" xsi:type="string">formtest</item> </item> </argument> <field name="name"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="label" xsi:type="string" translate="true">Workshop name</item> <item name="dataType" xsi:type="string">text</item> <item name="formElement" xsi:type="string">input</item> </item> </argument> </field> </fieldset> <fieldset name="image"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="label" xsi:type="string" translate="true">Media</item> </item> </argument> <field name="image"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="dataType" xsi:type="string">string</item> <item name="source" xsi:type="string">image</item> <item name="label" xsi:type="string" translate="true">Image</item> <item name="visible" xsi:type="boolean">true</item> <item name="allowedExtensions" xsi:type="string">jpg jpeg gif png webp</item> <item name="isMultipleFiles" xsi:type="boolean">true</item> <item name="formElement" xsi:type="string">imageUploader</item> <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item> <item name="previewTmpl" xsi:type="string">Magento_Catalog/image-preview</item> <item name="validation" xsi:type="array"> <item name="required-entry" xsi:type="boolean">true</item> </item> <item name="uploaderConfig" xsi:type="array"> <item name="url" xsi:type="url" path="formtest/upload/uploader"/> </item> </item> </argument> </field> </fieldset> </form>

(4)

<?php namespace Pacco\FormTestModule\Ui\Component\Form; use Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider; class FormTestDataProvider extends DataProvider { public function getData(): array { return []; } }

(5)

<?php declare(strict_types=1); namespace Pacco\FormTestModule\Controller\Adminhtml\Upload; use Magento\Backend\App\Action; use Magento\Framework\App\Action\HttpPostActionInterface; use Magento\Framework\Controller\Result\Json; use Magento\Framework\Controller\ResultFactory; use Magento\Framework\Controller\ResultInterface; class Uploader extends Action implements HttpPostActionInterface { public function __construct( Action\Context $context ) { parent::__construct($context); } public function execute(): ResultInterface { /** @var Json $jsonResult */ $jsonResult = $this->resultFactory->create(ResultFactory::TYPE_JSON); return $jsonResult->setData([ 'name' => 'filename', 'size' => 1234, 'type' => 'image', 'path' => 'mypathpath', 'url' => 'pathpathpathurl' ]); } }

Thanks

MeCapron · 2023-07-03T13:57:31Z

Hi @engcom-Lima, can you please reopen this issue?

Thanks you

MeCapron · 2023-07-04T07:22:28Z

Poke @engcom-Echo, can you help me please?

m2-assistant · 2023-07-07T07:41:49Z

Hi @pacco-a. Thank you for your contribution!
Here are some useful tips on how you can test your changes using Magento test environment.

Add the comment under your pull request to deploy test or vanilla Magento instance:

@magento give me test instance - deploy test instance based on PR changes
@magento give me 2.4-develop instance - deploy vanilla Magento instance

❗ Automated tests can be triggered manually with an appropriate comment:

@magento run all tests - run or re-run all required tests against the PR changes
@magento run <test-build(s)> - run or re-run specific test build(s)
For example: @magento run Unit Tests

<test-build(s)> is a comma-separated list of build names.

Allowed build names are:

Database Compare
Functional Tests CE
Functional Tests EE
Functional Tests B2B
Integration Tests
Magento Health Index
Sample Data Tests CE
Sample Data Tests EE
Sample Data Tests B2B
Static Tests
Unit Tests
WebAPI Tests
Semantic Version Checker

You can find more information about the builds here
ℹ️ Run only required test builds during development. Run all test builds before sending your pull request for review.

For more details, review the Code Contributions documentation.
Join Magento Community Engineering Slack and ask your questions in #github channel.

…e_file_image_form

engcom-November · 2024-09-26T06:32:35Z

@magento create issue

engcom-November · 2024-09-26T08:00:41Z

Hello @pacco-a,

Thanks for the collaboration & contribution!

✔️ QA Passed

Steps to reproduce:
Install the give module, inspect the Browse to find or drag image disappears or not.
P36325V.zip

Pardon the broken image here, file upload is not handled as the main issue is reproduced.

Before: ✖️

div block Browse to find or drag image disappears after uploading a file.

After: ✔️

div block Browse to find or drag image does not disappear after uploading a file.

Thank you.

…e_file_image_form

engcom-November · 2024-10-07T05:54:59Z

@magento run all tests

engcom-November · 2024-10-07T08:23:56Z

@magento run Integration Tests

engcom-November · 2024-10-08T06:54:01Z

@magento run Unit Tests, WebAPI Tests

engcom-November · 2024-10-08T09:08:37Z

All the builds are green, moving this to Merge in progress.

add isMultipleFiles property to image form element template

704f1ac

Merge branch '2.4-develop' into keep_add_image_btn_when_using_multipl…

62725ea

…e_file_image_form

ishakhsuvarov approved these changes Oct 19, 2022

View reviewed changes

m2-community-project bot assigned ishakhsuvarov Oct 19, 2022

m2-community-project bot added the Progress: ready for testing label Oct 19, 2022

sidolov added the Priority: P2 A defect with this priority could have functionality issues which are not to expectations. label Oct 20, 2022

Make static tests happy

d52d874

m2-community-project bot added Progress: testing in progress and removed Progress: ready for testing labels Nov 28, 2022

engcom-Echo self-assigned this Nov 28, 2022

m2-community-project bot added Progress: ready for testing and removed Progress: testing in progress labels Nov 28, 2022

m2-community-project bot added Progress: testing in progress and removed Progress: ready for testing labels Nov 28, 2022

engcom-Lima added the Triage: Dev.Experience Issue related to Developer Experience and needs help with Triage to Confirm or Reject it label Dec 5, 2022

m2-community-project bot added Progress: ready for testing Progress: testing in progress and removed Progress: testing in progress Progress: ready for testing labels Dec 5, 2022

engcom-Echo closed this Dec 13, 2022

m2-community-project bot removed the Progress: testing in progress label Dec 13, 2022

engcom-Echo reopened this Jul 7, 2023

m2-community-project bot added the Progress: ready for testing label Jul 7, 2023

Merge branch '2.4-develop' into keep_add_image_btn_when_using_multipl…

1b536c7

…e_file_image_form

engcom-November self-assigned this Sep 24, 2024

m2-assistant bot mentioned this pull request Sep 26, 2024

[Issue] add isMultipleFiles property to image form element template #39219

Closed

5 tasks

engcom-November added Progress: extended testing and removed Progress: ready for testing labels Sep 26, 2024

Merge branch '2.4-develop' into keep_add_image_btn_when_using_multipl…

0aef4de

…e_file_image_form

engcom-November added Progress: accept and removed Progress: extended testing labels Oct 8, 2024

magento-devops-reposync-svc merged commit f645b64 into magento:2.4-develop Feb 24, 2025
12 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

add isMultipleFiles property to image form element template #36325

add isMultipleFiles property to image form element template #36325

Uh oh!

pacco-a commented Oct 18, 2022 •

edited by m2-assistant bot

Loading

m2-assistant bot commented Oct 18, 2022

MeCapron commented Oct 19, 2022

magento-automated-testing bot commented Oct 19, 2022

ishakhsuvarov commented Oct 20, 2022

magento-automated-testing bot commented Oct 20, 2022

engcom-Echo commented Nov 28, 2022

magento-automated-testing bot commented Nov 28, 2022

engcom-Echo commented Nov 29, 2022

magento-automated-testing bot commented Nov 29, 2022

engcom-Echo commented Nov 29, 2022 •

edited

Loading

engcom-Lima commented Dec 5, 2022

engcom-Echo commented Dec 13, 2022 •

edited

Loading

pacco-a commented Jan 11, 2023

MeCapron commented Jul 3, 2023

MeCapron commented Jul 4, 2023

m2-assistant bot commented Jul 7, 2023

engcom-November commented Sep 26, 2024

engcom-November commented Sep 26, 2024 •

edited

Loading

engcom-November commented Oct 7, 2024

engcom-November commented Oct 7, 2024

engcom-November commented Oct 8, 2024

engcom-November commented Oct 8, 2024

Uh oh!

add isMultipleFiles property to image form element template #36325

add isMultipleFiles property to image form element template #36325

Uh oh!

Conversation

pacco-a commented Oct 18, 2022 • edited by m2-assistant bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description (*)

Manual testing scenarios (*)

Contribution checklist (*)

Resolved issues:

m2-assistant bot commented Oct 18, 2022

MeCapron commented Oct 19, 2022

magento-automated-testing bot commented Oct 19, 2022

ishakhsuvarov commented Oct 20, 2022

magento-automated-testing bot commented Oct 20, 2022

engcom-Echo commented Nov 28, 2022

magento-automated-testing bot commented Nov 28, 2022

engcom-Echo commented Nov 29, 2022

magento-automated-testing bot commented Nov 29, 2022

engcom-Echo commented Nov 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

engcom-Lima commented Dec 5, 2022

engcom-Echo commented Dec 13, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

pacco-a commented Jan 11, 2023

MeCapron commented Jul 3, 2023

MeCapron commented Jul 4, 2023

m2-assistant bot commented Jul 7, 2023

engcom-November commented Sep 26, 2024

engcom-November commented Sep 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✔️ QA Passed

Before: ✖️

After: ✔️

engcom-November commented Oct 7, 2024

engcom-November commented Oct 7, 2024

engcom-November commented Oct 8, 2024

engcom-November commented Oct 8, 2024

Uh oh!

pacco-a commented Oct 18, 2022 •

edited by m2-assistant bot

Loading

engcom-Echo commented Nov 29, 2022 •

edited

Loading

engcom-Echo commented Dec 13, 2022 •

edited

Loading

engcom-November commented Sep 26, 2024 •

edited

Loading