Img prop constraints require extension to be lower case

Created on 10 April 2025, 5 days ago

Overview

Media library does not mind if image file extensions are caps or not-caps, but the validation constraints for image props currently require them to be all lowercase. This can result in an image that Media Library is fine with (f.e. filename.JPG to be added as the value for a component image prop, which will then result in an error when the invalidly-named image is sent to be part of the updated preview.

Twig\Error\RuntimeError: An exception has been thrown during the rendering of a template ("[experience_builder:image/image.src] Does not match the regex  
                                         pattern ^(/|https?://)?.*\.(png|gif|jpg|jpeg|webp)(\?.*)?(#.*)?$."). in Twig\Template->yield() (line 1 of                                                 
                                         modules/custom/experience_builder/components/image/image.twig).  

Proposed resolution

User interface changes

๐Ÿ› Bug report
Status

Active

Version

0.0

Component

Page builder

Created by

๐Ÿ‡บ๐Ÿ‡ธUnited States bnjmnm Ann Arbor, MI

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @bnjmnm
  • Hey @bnjmnm !!
    This is great catch. I think we can handle this by updating regex to be case insensitive. This is the most flexible and safe fix.
    Update the regex to allow upper or lower case file extensions using the case-insensitive flag (i).
    What is your take on this ??
    Thanks !!

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia meghasharma
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia meghasharma

    Updated the regex for image-uri and stream-wrapper-image-uri to be case-insensitive using the (?i) flag.
    This allows image extensions like .JPG, .PNG, etc., from Media Library to work correctly and fixes the Twig rendering error.
    Please review, Let me know if thereโ€™s a better approach we should consider.
    Thanks @dhruv.mittal for the helpful suggestion!

  • Pipeline finished with Failed
    5 days ago
    Total: 1518s
    #471157
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States bnjmnm Ann Arbor, MI

    The case insensitivity should be specific to the file extensions, not the entire uri

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia meghasharma

    Updated the regex to apply case-insensitivity only to the file extension part using (?i:...) instead of applying it globally.

  • Pipeline finished with Failed
    4 days ago
    Total: 1732s
    #471492
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia meghasharma
  • Merge conflicts need to be resolved. so moving back to needs work.

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia meghasharma
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States bnjmnm Ann Arbor, MI

    This commit introduced ~12 files of unrelated changes. Since the actual fix is likely a single-file change, it may be worth starting a new MR vs trying to untangle all the unrelated changes.

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia meghasharma
  • Pipeline finished with Failed
    1 day ago
    Total: 1861s
    #473069
  • ๐Ÿ‡ง๐Ÿ‡ชBelgium wim leers Ghent ๐Ÿ‡ง๐Ÿ‡ช๐Ÿ‡ช๐Ÿ‡บ

    The failures here (in SdcPropToFieldTypePropTest) are legitimate

    It's because JSON Schema uses (?i) at the start of a regex to indicate case-insensitivity. But PHP uses PCRE, which uses /i at the end of a regex to indicate the same ๐Ÿ˜…

  • ๐Ÿ‡ง๐Ÿ‡ชBelgium wim leers Ghent ๐Ÿ‡ง๐Ÿ‡ช๐Ÿ‡ช๐Ÿ‡บ

    @bnjmnm Actually โ€ฆ I had this:

                  // @todo JSON schema does not support case-insensitive matching!!!! https://json-schema.org/understanding-json-schema/reference/regular_expressions
    

    in \Drupal\experience_builder\ShapeMatcher\SdcPropToFieldTypePropMatcher::matchEntityPropsForScalar() ๐Ÿ˜…

    Turns out that this ?i: prefix this MR added is not part of the JSON Schema spec, but of the ajv library that XB's JS uses.

    If this is the case, why don't we make our client automatically convert every pattern to a regex, which then would allow to use the /โ€ฆ/i syntax PHP supports?

    See

    ๐Ÿ™ Whatever we decision we make here, we must explicitly document it because it (AFAICT) deviates from the spec.

  • ๐Ÿ‡ง๐Ÿ‡ชBelgium wim leers Ghent ๐Ÿ‡ง๐Ÿ‡ช๐Ÿ‡ช๐Ÿ‡บ
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States bnjmnm Ann Arbor, MI

    If this is the case, why don't we make our client automatically convert every pattern to a regex, which then would allow to use the /โ€ฆ/i syntax PHP supports?

    I don't think this would mitigate this particular situation. The issue is that Drupal Core allows adding media that has caps characters in file extensions. Uploading new media items like some-pic.JPG is not performed anywhere that ajv even runs.

    We could modify the AJV logic so it sees caps-in-extensions as invalid and thus not making the back-end-breaking PATCH request, but it doesn't seem ideal to not support caps-in-extensions media at all in XB when it works everywhere else in Drupal. I could also see people being frustrated that such media is available to select but they're unaware it's not valid until choosing it and seeing a validation message in the input.

  • It makes sense. I agree that rejecting caps-in-extensions via AJV could lead to a confusing and inconsistent UX, especially since Drupal Core accepts them and users can upload/select those media items without issue.

    Normalizing file extensions to lowercase on the client side before sending the PATCH request seems like a practical middle ground. It avoids breaking the backend while keeping things smooth for the user. Since the casing of file extensions doesnโ€™t affect how theyโ€™re served or interpreted, this should be safe and non-invasive.

    To make it more robust, we could also log a warning or surface a note during validation when a case normalization occursโ€”just to help with debugging or future maintenance if needed.

    Longer term, if XB aims to strictly align with Drupalโ€™s media handling, it might be worth revisiting how validation is handled here to better reflect the broader system behavior.

    Open to feedback if anyone sees a downside to that approach!

  • ๐Ÿ‡ง๐Ÿ‡ชBelgium wim leers Ghent ๐Ÿ‡ง๐Ÿ‡ช๐Ÿ‡ช๐Ÿ‡บ

    Thoughts about #17, @bnjmnm? ๐Ÿ˜Š

Production build 0.71.5 2024