Cannot delete default image from an optional image: it reappears
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3548282. -->
Reported by: [lauriii](https://www.drupal.org/user/1078742)
Related to !749 !670 !160
>>>
<h3 id="overview">Overview</h3>
<p>It's not possible to delete the default image from an optional image or video prop. Not having an image in an optional image/video prop is definitely a valid state because why otherwise make the prop optional in the first place.</p>
<p>Tricky cluster of past issues where this oversight occurred:</p>
<ul>
<li>2025-04-30 BE: <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/experience_builder/issues/3518253" title="Status: Closed (fixed)">#3518253: SDCs with optional images without examples cannot be placed</a></span></li>
<li>2025-06-03 FE: <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/experience_builder/issues/3508170" title="Status: Closed (fixed)">#3508170: Image in preview persists after clicking "Remove" in MediaLibraryWidget</a></span></li>
<li>2025-06-04 BE: <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/experience_builder/issues/3528393" title="Status: Closed (fixed)">#3528393: Required image can't be removed without error: should fall back to default value</a></span></li>
</ul>
<p><img src="https://www.drupal.org/files/issues/2025-09-23/CleanShot%202025-09-23%20at%2020.53.31.gif" alt=""></p>
<h3 id="proposed-resolution">Proposed resolution</h3>
<p>It must be possible to delete the default image directly using the widget. Also, if image has been selected and it's deleted, it should <em>not</em> load the default image.</p>
<h3 id="ui-changes">Steps to Reproduce</h3>
<ul>
<li>On 1.x, Add a component with an optional image prop. Eg <code>Canvas test SDC with optional image and heading</code></li>
<li>Observe that there is no way to remove the default image</li>
<li>Add another image, this will replace the default image.</li>
<li>Remove uploaded image from widget, default image will again start appearing.</li>
</ul>
<h3 id="ui-changes">User interface changes</h3>
<ul>
<li>Show default image with a remove button, so that it can be removed from optional props.</li>
<li>Once deleted, default image should not appear in Canvas page.</li>
<li>Same if uploaded image is deleted, default image should not re-appear</li>
</ul>
<h3 id="ui-changes">Technical Implementation</h3>
<p>The fix involves distinguishing between "no value set yet" (use default) vs "user intentionally removed the value" (respect empty state).</p>
<p>Backend Changes (<code>GeneratedFieldExplicitInputUxComponentSourceBase.php</code>):<br>
• Preserve NULL values in prop sources to indicate explicit user deletion intent<br>
• When user removes optional prop value, store as StaticPropSource with value: null<br>
• Skip validation for optional props with NULL values to avoid ComponentValidator errors<br>
• Do NOT fall back to DefaultRelativeUrlPropSource when user has explicitly cleared an optional field</p>
<p>Frontend Changes:<br>
• New <code>DefaultImagePreview</code> React component displays thumbnail of default image<br>
• Shows "Remove default" button only for optional props<br>
• Button triggers PATCH request with <code>value: null </code>to persist deletion<br>
• Component hides when media is present in the widget</p>
<p>Template Integration:<br>
• Added <code><canvas-default-image-preview></code> custom element to media library fieldset template<br>
• Pass <code>#canvas_prop_name</code> through render array for prop identification</p>
> Related issue: [Issue #3518253](https://www.drupal.org/node/3518253)
> Related issue: [Issue #3508170](https://www.drupal.org/node/3508170)
> Related issue: [Issue #3528393](https://www.drupal.org/node/3528393)
issue