\n\t\t\t\n\t\t
\n\t')),i=n.querySelector(".basicLightbox__placeholder");e.forEach((function(e){return i.appendChild(e)}));var a=o(i,"IMG"),c=o(i,"VIDEO"),l=o(i,"IFRAME");return!0===a&&n.classList.add("basicLightbox--img"),!0===c&&n.classList.add("basicLightbox--video"),!0===l&&n.classList.add("basicLightbox--iframe"),n}(e=function(e){var t="string"==typeof e,n=e instanceof HTMLElement==1;if(!1===t&&!1===n)throw new Error("Content must be a DOM element/node or string");return!0===t?Array.from(r(e,!0)):"TEMPLATE"===e.tagName?[e.content.cloneNode(!0)]:Array.from(e.children)}(e),t=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(null==(e=Object.assign({},e)).closable&&(e.closable=!0),null==e.className&&(e.className=""),null==e.onShow&&(e.onShow=function(){}),null==e.onClose&&(e.onClose=function(){}),"boolean"!=typeof e.closable)throw new Error("Property `closable` must be a boolean");if("string"!=typeof e.className)throw new Error("Property `className` must be a string");if("function"!=typeof e.onShow)throw new Error("Property `onShow` must be a function");if("function"!=typeof e.onClose)throw new Error("Property `onClose` must be a function");return e}(t)),a=function(e){return!1!==t.onClose(c)&&function(e,t){return e.classList.remove("basicLightbox--visible"),setTimeout((function(){return!1===i(e)||e.parentElement.removeChild(e),t()}),410),!0}(n,(function(){if("function"==typeof e)return e(c)}))};!0===t.closable&&n.addEventListener("click",(function(e){e.target===n&&a()}));var c={element:function(){return n},visible:function(){return i(n)},show:function(e){return!1!==t.onShow(c)&&function(e,t){return document.body.appendChild(e),setTimeout((function(){requestAnimationFrame((function(){return e.classList.add("basicLightbox--visible"),t()}))}),10),!0}(n,(function(){if("function"==typeof e)return e(c)}))},close:a};return c}},{}]},{},[1])(1)}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{"use strict";var e=n(619);function t(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!n){if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return r(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var o=0,i=function(){};return{s:i,n:function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,c=!0,l=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return c=e.done,e},e:function(e){l=!0,a=e},f:function(){try{c||null==n.return||n.return()}finally{if(l)throw a}}}}function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n\n\t\t\t\n\t\t
\n\t')),i=n.querySelector(".basicLightbox__placeholder");t.forEach((function(t){return i.appendChild(t)}));var a=o(i,"IMG"),c=o(i,"VIDEO"),u=o(i,"IFRAME");return!0===a&&n.classList.add("basicLightbox--img"),!0===c&&n.classList.add("basicLightbox--video"),!0===u&&n.classList.add("basicLightbox--iframe"),n}(t=function(t){var e="string"==typeof t,n=t instanceof HTMLElement==1;if(!1===e&&!1===n)throw new Error("Content must be a DOM element/node or string");return!0===e?Array.from(r(t,!0)):"TEMPLATE"===t.tagName?[t.content.cloneNode(!0)]:Array.from(t.children)}(t),e=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(null==(t=Object.assign({},t)).closable&&(t.closable=!0),null==t.className&&(t.className=""),null==t.onShow&&(t.onShow=function(){}),null==t.onClose&&(t.onClose=function(){}),"boolean"!=typeof t.closable)throw new Error("Property `closable` must be a boolean");if("string"!=typeof t.className)throw new Error("Property `className` must be a string");if("function"!=typeof t.onShow)throw new Error("Property `onShow` must be a function");if("function"!=typeof t.onClose)throw new Error("Property `onClose` must be a function");return t}(e)),a=function(t){return!1!==e.onClose(c)&&function(t,e){return t.classList.remove("basicLightbox--visible"),setTimeout((function(){return!1===i(t)||t.parentElement.removeChild(t),e()}),410),!0}(n,(function(){if("function"==typeof t)return t(c)}))};!0===e.closable&&n.addEventListener("click",(function(t){t.target===n&&a()}));var c={element:function(){return n},visible:function(){return i(n)},show:function(t){return!1!==e.onShow(c)&&function(t,e){return document.body.appendChild(t),setTimeout((function(){requestAnimationFrame((function(){return t.classList.add("basicLightbox--visible"),e()}))}),10),!0}(n,(function(){if("function"==typeof t)return t(c)}))},close:a};return c}},{}]},{},[1])(1)}},e={};function n(r){var o=e[r];if(void 0!==o)return o.exports;var i=e[r]={exports:{}};return t[r](i,i.exports,n),i.exports}n.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return n.d(e,{a:e}),e},n.d=(t,e)=>{for(var r in e)n.o(e,r)&&!n.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),(()=>{"use strict";var t=n(619);function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},e(t)}function r(t,e){for(var n=0;n
+ {% if show_preview %}
+
+{% endblock ea_imageupload_widget %}
+
{% block TODO_ea_fileupload_widget %}
{% set placeholder = '' %}
{% set title = '' %}
diff --git a/tests/Functional/Apps/DefaultApp/src/Controller/Synthetic/ImageFieldNoPreviewCrudController.php b/tests/Functional/Apps/DefaultApp/src/Controller/Synthetic/ImageFieldNoPreviewCrudController.php
new file mode 100644
index 0000000000..a8b9557a18
--- /dev/null
+++ b/tests/Functional/Apps/DefaultApp/src/Controller/Synthetic/ImageFieldNoPreviewCrudController.php
@@ -0,0 +1,30 @@
+
+ */
+class ImageFieldNoPreviewCrudController extends AbstractCrudController
+{
+ public static function getEntityFqcn(): string
+ {
+ return FieldTestEntity::class;
+ }
+
+ public function configureFields(string $pageName): iterable
+ {
+ yield IdField::new('id')->hideOnForm();
+ yield ImageField::new('imageField')
+ ->setBasePath('uploads/')
+ ->setUploadDir('public/uploads/')
+ ->setUploadedFileNamePattern('[randomhash].[extension]')
+ ->setRequired(false)
+ ->showPreview(false);
+ }
+}
diff --git a/tests/Functional/Fields/Media/ImageFieldTest.php b/tests/Functional/Fields/Media/ImageFieldTest.php
index 44e07c1345..97a796ecde 100644
--- a/tests/Functional/Fields/Media/ImageFieldTest.php
+++ b/tests/Functional/Fields/Media/ImageFieldTest.php
@@ -3,6 +3,7 @@
namespace EasyCorp\Bundle\EasyAdminBundle\Tests\Functional\Fields\Media;
use EasyCorp\Bundle\EasyAdminBundle\Tests\Functional\AbstractFieldFunctionalTest;
+use EasyCorp\Bundle\EasyAdminBundle\Tests\Functional\Apps\DefaultApp\Controller\Synthetic\ImageFieldNoPreviewCrudController;
class ImageFieldTest extends AbstractFieldFunctionalTest
{
@@ -47,15 +48,17 @@ public function testImageFieldInForm(): void
$form = $crawler->filter('form[name="FieldTestEntity"]');
static::assertCount(1, $form, 'Form should exist');
- // image field may be rendered as a file input or as a container with file input
- // check that the image field container or input exists
- $imageFieldContainer = $crawler->filter('.field-image');
- $imageFieldInput = $crawler->filter('input[type="file"][name*="imageField"]');
+ // image field should be wrapped in the ea-imageupload container
+ $imageUploadContainer = $crawler->filter('.ea-imageupload');
+ static::assertGreaterThan(0, $imageUploadContainer->count(), 'Image upload container (.ea-imageupload) should exist');
- static::assertTrue(
- $imageFieldContainer->count() > 0 || $imageFieldInput->count() > 0,
- 'Image field should exist in form'
- );
+ // the preview container should be present (for JS to populate on file selection)
+ $previewContainer = $crawler->filter('[data-ea-imageupload-preview]');
+ static::assertGreaterThan(0, $previewContainer->count(), 'Preview container should exist in new form');
+
+ // a file input should exist inside the container
+ $imageFieldInput = $crawler->filter('.ea-imageupload input[type="file"]');
+ static::assertGreaterThan(0, $imageFieldInput->count(), 'File input should exist inside image upload container');
}
public function testImageFieldWithNullValue(): void
@@ -83,18 +86,63 @@ public function testImageFieldEdit(): void
$crawler = $this->client->request('GET', $this->generateEditFormUrl($entity->getId()));
- // the edit form should load successfully and contain an image field
$form = $crawler->filter('form[name="FieldTestEntity"]');
static::assertCount(1, $form, 'Edit form should exist');
- // check that image field exists in form
- $imageFieldContainer = $crawler->filter('.field-image');
- $imageFieldInput = $crawler->filter('input[type="file"][name*="imageField"]');
+ $imageUploadContainer = $crawler->filter('.ea-imageupload');
+ static::assertGreaterThan(0, $imageUploadContainer->count(), 'Image upload container should exist in edit form');
+
+ $previewContainer = $crawler->filter('[data-ea-imageupload-preview]');
+ static::assertGreaterThan(0, $previewContainer->count(), 'Preview container should exist in edit form');
+
+ $previewImage = $previewContainer->filter('.ea-lightbox-thumbnail img');
+ static::assertGreaterThan(0, $previewImage->count(), 'Preview should show existing image thumbnail');
+ static::assertStringContainsString('original-image.jpg', $previewImage->attr('src'));
+
+ $lightboxDiv = $previewContainer->filter('.ea-lightbox');
+ static::assertGreaterThan(0, $lightboxDiv->count(), 'Lightbox div should exist for the preview image');
+ }
+
+ public function testImageFieldNewFormHasEmptyPreviewContainer(): void
+ {
+ $crawler = $this->client->request('GET', $this->generateNewFormUrl());
+
+ $previewContainer = $crawler->filter('[data-ea-imageupload-preview]');
+ static::assertGreaterThan(0, $previewContainer->count(), 'Preview container should exist in new form');
+
+ $previewImages = $previewContainer->filter('.ea-lightbox-thumbnail');
+ static::assertCount(0, $previewImages, 'No image thumbnails should exist in new form preview');
+ }
+
+ public function testImageFieldShowPreviewFalseHidesPreview(): void
+ {
+ $noPreviewController = ImageFieldNoPreviewCrudController::class;
+
+ $crawler = $this->client->request('GET', $this->generateNewFormUrl(controllerFqcn: $noPreviewController));
+
+ $imageUploadContainer = $crawler->filter('.ea-imageupload');
+ static::assertGreaterThan(0, $imageUploadContainer->count(), 'Image upload container should still exist');
+
+ $previewContainer = $crawler->filter('[data-ea-imageupload-preview]');
+ static::assertCount(0, $previewContainer, 'Preview container should not exist when showPreview(false)');
+ }
+
+ public function testImageFieldShowPreviewFalseHidesPreviewOnEdit(): void
+ {
+ $noPreviewController = ImageFieldNoPreviewCrudController::class;
+
+ $entity = $this->createFieldTestEntity([
+ 'imageField' => 'hidden-preview.jpg',
+ ]);
+
+ $crawler = $this->client->request('GET', $this->generateEditFormUrl($entity->getId(), controllerFqcn: $noPreviewController));
+
+ $previewContainer = $crawler->filter('[data-ea-imageupload-preview]');
+ static::assertCount(0, $previewContainer, 'Preview container should not exist on edit when showPreview(false)');
- static::assertTrue(
- $imageFieldContainer->count() > 0 || $imageFieldInput->count() > 0,
- 'Image field should exist in edit form'
- );
+ // the file input should still work
+ $fileInput = $crawler->filter('.ea-imageupload input[type="file"]');
+ static::assertGreaterThan(0, $fileInput->count(), 'File input should still exist when preview is disabled');
}
public function testImageFieldWithDifferentExtensions(): void
diff --git a/tests/Unit/Field/ImageFieldTest.php b/tests/Unit/Field/ImageFieldTest.php
index 80a5f1cd63..9809b6aed7 100644
--- a/tests/Unit/Field/ImageFieldTest.php
+++ b/tests/Unit/Field/ImageFieldTest.php
@@ -7,7 +7,7 @@
use EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto;
use EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto;
use EasyCorp\Bundle\EasyAdminBundle\Field\ImageField;
-use EasyCorp\Bundle\EasyAdminBundle\Form\Type\FileUploadType;
+use EasyCorp\Bundle\EasyAdminBundle\Form\Type\ImageUploadType;
use Symfony\Component\Validator\Constraints\Image;
use Symfony\Component\Validator\Constraints\NotNull;
@@ -40,10 +40,27 @@ public function testDefaultOptions(): void
self::assertNull($fieldDto->getCustomOption(ImageField::OPTION_BASE_PATH));
self::assertNull($fieldDto->getCustomOption(ImageField::OPTION_UPLOAD_DIR));
self::assertSame('[name].[extension]', $fieldDto->getCustomOption(ImageField::OPTION_UPLOADED_FILE_NAME_PATTERN));
- self::assertSame(FileUploadType::class, $fieldDto->getFormType());
+ self::assertSame(ImageUploadType::class, $fieldDto->getFormType());
self::assertStringContainsString('field-image', $fieldDto->getCssClass());
}
+ public function testDefaultShowPreview(): void
+ {
+ $field = ImageField::new('image');
+ $fieldDto = $this->configure($field);
+
+ self::assertTrue($fieldDto->getCustomOption(ImageField::OPTION_SHOW_PREVIEW));
+ }
+
+ public function testShowPreviewFalse(): void
+ {
+ $field = ImageField::new('image');
+ $field->showPreview(false);
+ $fieldDto = $this->configure($field);
+
+ self::assertFalse($fieldDto->getCustomOption(ImageField::OPTION_SHOW_PREVIEW));
+ }
+
public function testDefaultFileConstraints(): void
{
$field = ImageField::new('image');
+ {% set images = field ? field.formattedValue : null %}
+ {% if images is not null %}
+ {% if images is not iterable %}{% set images = [images] %}{% endif %}
+ {% for image in images %}
+ {% if image is not empty %}
+ {% set _lightbox_id = 'ea-lightbox-' ~ form.vars.id ~ '-' ~ loop.index %}
+
+  }})
+
+
+ {% endif %}
+ {{ block('ea_fileupload_widget') }}
+
+
+
+ {% endif %}
+ {% endfor %}
+ {% endif %}
+