Fix errors

[nicobytes]

This pull request improves the thumbnail field handling in the template creation/editing UI and refines the binary upload button implementation. The main changes enhance accessibility, ensure correct behavior when no thumbnail is provided, and simplify the file input logic.

Template Thumbnail Field Improvements:

• Added an explicit id and name="thumbnail" to the thumbnail input field for better accessibility and form integration (dot-template-props.component.html, dot-template-thumbnail-field.component.html). [1] [2]
• Updated the writeValue method in DotTemplateThumbnailFieldComponent to properly handle empty or null IDs by resetting state and avoiding unnecessary service calls (dot-template-thumbnail-field.component.ts).
• Added and updated tests to verify that no fetch or state changes occur when the thumbnail ID is empty, improving test coverage and reliability (dot-template-thumbnail-field.component.spec.ts). [1] [2]

Binary Upload Button Refactoring:

• Removed the redundant fileInput property and componentDidLoad lifecycle method, replacing direct references with a new getFileInput() helper for safer DOM access (dot-binary-upload-button.tsx). [1] [2]
• Updated file selection and change handling to use the new helper, ensuring the component gracefully handles cases where no file is selected.

Fix #35930

[claude]

Claude finished @nicobytes's task in 1m 4s —— View job

---

PR Review

Reviewed the diff against origin/main. The three prior Copilot findings are all correctly resolved, and I found no new issues.

Resolved

• ✅ dot-binary-upload-button.tsx:70 — getFileInput() now uses querySelector<HTMLInputElement>(...), so the return type matches the declared HTMLInputElement | null. No compile mismatch.
• ✅ dot-binary-upload-button.tsx:74 — fileChangeHandler reads from (event.target as HTMLInputElement).files?.[0] instead of re-querying the DOM. getFileInput() is now only used on the Browse-click path. Optional chaining + if (!file) return correctly no-ops when nothing is selected.
• ✅ dot-template-props.component.html:31 — Label now uses for="dot-thumbnail", which matches the file input's id. Verified the chain: dot-binary-file name="thumbnail" → dot-binary-upload-button name="thumbnail" → id={getId("thumbnail")} = "dot-thumbnail" (utils.tsx:100). All components render in light DOM (no shadow: true), so the external <label for> associates with the real <input type="file">.

Notes (non-blocking)

• dot-template-thumbnail-field.component.ts:110 — writeValue(id: string | null) short-circuiting on empty/null is correct: it resets asset/loading and skips the fetch, avoiding a getDataById call with an empty id. Test coverage for both the empty and populated paths is present (dot-template-thumbnail-field.component.spec.ts:117, :366).
• getFileInput() returning null is handled with ?.click() on the Browse path; worst case is a no-op click, which is safe.

No issues found. The PR looks good to merge.

· nicobytes/35930-migrate-angular-22-fix

[Copilot]

Pull request overview

This pull request updates the template thumbnail field used in the template create/edit UI and refactors the binary upload button web component to better handle empty values and simplify file input access.

Changes:

• Adds name="thumbnail" wiring for the template thumbnail binary field and updates writeValue to short-circuit/reset state when the ID is empty.
• Extends unit tests to ensure no fetch happens when the thumbnail ID/form value is empty.
• Refactors the Stencil upload button to query the file input on demand and no-op when no file is selected.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
core-web/libs/dotcms-webcomponents/src/components/contenttypes-fields/dot-binary-file/components/dot-binary-upload-button/dot-binary-upload-button.tsx	Refactors file input access and file-selection handling in the upload button component.
core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-props/dot-template-thumbnail-field/dot-template-thumbnail-field.component.ts	Updates CVA writeValue to reset state when provided an empty/null thumbnail ID.
core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-props/dot-template-thumbnail-field/dot-template-thumbnail-field.component.spec.ts	Adds tests ensuring empty IDs don’t trigger fetches or disabled state changes.
core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-props/dot-template-thumbnail-field/dot-template-thumbnail-field.component.html	Sets name="thumbnail" on the dot-binary-file used for thumbnail uploads.
core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-props/dot-template-props.component.html	Attempts to improve label association for the thumbnail field by adding an id to the thumbnail field component.

[nicobytes]

Confirmed on the two Medium notes for dot-binary-upload-button:

1. Selector change (input[type="file"]) — Safe. This component’s render() has always put the file input directly under <Host> (no nested dot-label). The only consumer is dot-binary-file, which wraps the upload button in a parent dot-label, so the old this.el.querySelector('dot-label input') could never find it (descendant-only). E2E also queries input/button on the host directly. No other consumer depended on a dot-label structure inside this component.

2. getFileInput()?.files[0] — Agreed; optional chaining + if (!file) return is intentional. The previous cached this.fileInput path would throw on Browse when the reference was null.

No further code change needed for these notes.

[mergify]

Tick the box to add this pull request to the merge queue (same as @mergifyio queue).

• Queue this pull request