feat(dot-browser-selector): add Upload New File button to File Picker in New Edit Content by adrianjm-dotCMS · Pull Request #35221 · dotCMS/core

adrianjm-dotCMS · 2026-04-06T18:58:36Z

Summary

Adds an Upload New File button to the File Picker (dot-browser-selector) used in New Edit Content. Users can now upload files directly to the selected site/folder without leaving the content editor.

Upload button is visible in both Image Picker (accept=image/*) and File Picker (accept=*/*)
Button disabled only when no site/folder is selected (hostFolderId === ''); System Host and real sites enable it
Permission handling: button is always enabled — clicking without upload permissions shows an inline error message instead of disabling the button
Upload uses the same endpoint/service as Content Drive (DotUploadFileService.uploadDotAsset)
After a successful upload, the file list refreshes and the new file is visible but not auto-selected
Upload failures (403 permissions, generic server errors) show contextual inline error messages without clearing the existing file list

Screen.Recording.2026-04-06.at.4.10.12.PM.mov

Changes

dot-dataview.component.ts/html — added $uploadDisabled input and [disabled] binding on upload button
dot-browser-selector.component.ts/html — added $uploadDisabled computed signal (hostFolderId === '') and passes it to dot-dataview
dot-browser-selector.component.spec.ts — new spec file covering $uploadDisabled, $acceptAttr, onNodeSelect, and onFileUpload (13 tests)

Out of scope

Feature 2 — Global Search across all sites/folders will be handled in a separate ticket

Test plan

Upload button visible in Image Picker and File Picker dialogs
Button enabled when System Host or any site/folder is selected
Button disabled only in the edge case where hostFolderId is empty
Clicking Upload without permissions shows inline error; file list remains intact
Happy path: select a site/folder → upload image/file → file appears in list, not auto-selected
Generic server error shows generic inline error message
Image Picker restricts file input to image/*; File Picker accepts all files

This PR fixes: #33103

…ser selector component - Enhanced to handle file uploads via a new method. - Updated the HTML template to include a file input and an upload button, triggering the file selection dialog. - Introduced output in to emit the selected file. - Implemented unit tests for the new upload functionality in . This feature allows users to upload files directly from the browser, improving the content management experience.

…amic accept attribute

…tion key

- Updated the file upload logic to preserve existing content when an upload fails, displaying appropriate error messages based on the error type (generic or permissions-related). - Added new internationalization keys for error messages related to file uploads. - Improved unit tests to cover new error handling scenarios. This change improves the user experience by providing clearer feedback during file upload operations.

…event handling - Removed unused references and signals in the DotBrowserSelectorComponent and DotSideBarComponent. - Updated event handling for node expansion to directly call the store's loadChildren method. - Cleaned up the HTML template by removing redundant attributes and improving readability. These changes streamline the component's functionality and enhance maintainability.

…folder selection - Introduced a computed property to determine if the upload button should be disabled when no site or folder is selected. - Updated the HTML templates in both and components to bind the upload button's disabled state to the new property. These changes enhance user experience by preventing uploads until a valid destination is selected.

claude · 2026-04-06T18:59:24Z

Claude finished @adrianjm-dotCMS's task in 3m 35s —— View job

Claude finished @adrianjm-dotCMS's task in 34s —— View job

Rollback Safety Analysis (re-run on sync)

Read rollback-unsafe categories reference
Get full PR diff
Analyzed diff against all unsafe categories
Applied rollback safety label

Result: ✅ Safe To Rollback

All 12 changed files are frontend-only (Angular/TypeScript components and i18n property files). Checked against every rollback-unsafe category:

Category	Verdict
C-1 Structural Data Model Change	✅ Not applicable — no DB changes
C-2 Elasticsearch Mapping Change	✅ Not applicable — no ES changes
C-3 Content JSON Model Version Bump	✅ Not applicable — no Java model changes
C-4 DROP TABLE / DROP COLUMN	✅ Not applicable — no SQL DDL
H-1 One-Way Data Migration	✅ Not applicable — no data transforms
H-2 RENAME TABLE / RENAME COLUMN	✅ Not applicable
H-3 PK Restructuring	✅ Not applicable
H-4 New Content Type Field Type	✅ Not applicable
H-5 Binary Storage Provider Change	✅ Not applicable
H-6 DROP PROCEDURE / FUNCTION	✅ Not applicable
H-7 NOT NULL Column Without Default	✅ Not applicable
M-1 Non-Broadening Column Type Change	✅ Not applicable
M-2 Push Publishing Bundle Format	✅ Not applicable
M-3 REST/GraphQL API Contract Change	✅ Not applicable — UI-only changes
M-4 OSGi Public Interface Change	✅ Not applicable

Language property files (Language.properties) only add new i18n keys — no existing keys removed or modified. Additive i18n changes are safe to roll back (N-1 simply won't have the new keys, which is harmless).

Label applied: AI: Safe To Rollback

claude · 2026-04-06T19:01:50Z

Rollback Safety Analysis

Read rollback-unsafe categories reference
Analyzed PR diff against all unsafe categories
Applied rollback safety label

Result: ✅ Safe To Rollback

All 12 changed files are frontend-only (Angular/TypeScript components and i18n property files). Checked against every rollback-unsafe category:

Category	Verdict
C-1 Structural Data Model Change	✅ Not applicable — no DB changes
C-2 Elasticsearch Mapping Change	✅ Not applicable — no ES changes
C-3 Content JSON Model Version Bump	✅ Not applicable — no Java model changes
C-4 DROP TABLE / DROP COLUMN	✅ Not applicable — no SQL DDL
H-1 One-Way Data Migration	✅ Not applicable — no data transforms
H-2 RENAME TABLE / RENAME COLUMN	✅ Not applicable
H-3 PK Restructuring	✅ Not applicable
H-4 New Content Type Field Type	✅ Not applicable
H-5 Binary Storage Provider Change	✅ Not applicable
H-6 DROP PROCEDURE / FUNCTION	✅ Not applicable
H-7 NOT NULL Column Without Default	✅ Not applicable
M-1 Non-Broadening Column Type Change	✅ Not applicable
M-2 Push Publishing Bundle Format	✅ Not applicable
M-3 REST/GraphQL API Contract Change	✅ Not applicable — UI-only changes
M-4 OSGi Public Interface Change	✅ Not applicable

Language property files (Language.properties, Language_es.properties) only add new i18n keys — no existing keys removed or modified. Additive i18n changes are safe to roll back (N-1 simply won't have the new keys, which is harmless).

Label applied: AI: Safe To Rollback

View job run

Copilot

Pull request overview

Adds in-place asset uploading to the dot-browser-selector file picker used by New Edit Content, aligning it more closely with Content Drive behavior so users can upload without leaving the editor.

Changes:

Adds an Upload button + hidden file input to dot-dataview and wires it up through dot-browser-selector.
Introduces a new store method to upload via DotUploadFileService.uploadDotAsset and refresh the content list while preserving existing results on failure.
Extends i18n keys and adds unit tests for the new upload/accept/disabled behaviors.

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
dotCMS/src/main/webapp/WEB-INF/messages/Language.properties	Adds new upload error message keys.
dotCMS/src/main/webapp/WEB-INF/messages/Language_es.properties	Adds Spanish translation for the Upload action label.
core-web/libs/ui/src/lib/components/dot-browser-selector/store/browser.store.ts	Removes `nodeExpaned`, updates folder expansion behavior, adds `uploadFile` method using `DotUploadFileService`.
core-web/libs/ui/src/lib/components/dot-browser-selector/store/browser.store.test.ts	Adds upload tests and mocks `DotUploadFileService`.
core-web/libs/ui/src/lib/components/dot-browser-selector/dot-browser-selector.component.ts	Adds computed `uploadDisabled` + `accept` derivation and upload handler, simplifies node expand handling.
core-web/libs/ui/src/lib/components/dot-browser-selector/dot-browser-selector.component.spec.ts	New component unit tests for accept/disabled/node selection/upload delegation.
core-web/libs/ui/src/lib/components/dot-browser-selector/dot-browser-selector.component.html	Wires new inputs/outputs between selector and dataview.
core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-sidebar/dot-sidebar.component.ts	Updates System Host matching logic to use `data.id`; removes manual change detection method.
core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-sidebar/dot-sidebar.component.html	Removes duplicate attribute.
core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.ts	Adds accept/uploadDisabled inputs and onUploadFile output; imports PrimeNG Message module.
core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.html	Adds Upload button, hidden file input, and inline error message area.
core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.spec.ts	New unit tests covering the upload UI and file selection behavior.

- Replace switchMap with exhaustMap in uploadFile to prevent cancelling in-flight POST requests when multiple uploads are triggered quickly - Replace throw with early return in onNodeSelect to avoid surfacing uncaught errors from an Angular event handler - Remove stale nodeExpaned assertions from store tests — the field does not exist in BrowserSelectorState; tests were asserting on undefined - Add missing Spanish translations for upload error keys: dot.file.field.dialog.upload.file.error and dot.file.field.dialog.upload.file.error.permissions Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

claude · 2026-04-07T17:13:11Z

Rollback Safety Analysis (re-run on sync)

All 12 changed files remain frontend-only. Result unchanged: ✅ Safe To Rollback

Label AI: Safe To Rollback applied.

View job run

… in New Edit Content (#35221) ## Summary Closes #33103 Adds an **Upload New File** button to the File Picker (`dot-browser-selector`) used in New Edit Content. Users can now upload files directly to the selected site/folder without leaving the content editor. - **Upload button** is visible in both Image Picker (`accept=image/*`) and File Picker (`accept=*/*`) - **Button disabled** only when no site/folder is selected (`hostFolderId === ''`); System Host and real sites enable it - **Permission handling**: button is always enabled — clicking without upload permissions shows an **inline error message** instead of disabling the button - **Upload uses the same endpoint/service as Content Drive** (`DotUploadFileService.uploadDotAsset`) - After a successful upload, the file list refreshes and the new file is visible but **not auto-selected** - Upload failures (403 permissions, generic server errors) show contextual inline error messages without clearing the existing file list https://github.com/user-attachments/assets/467d30ea-218c-40fd-b482-8066dd584dc0 ## Changes - `dot-dataview.component.ts/html` — added `$uploadDisabled` input and `[disabled]` binding on upload button - `dot-browser-selector.component.ts/html` — added `$uploadDisabled` computed signal (`hostFolderId === ''`) and passes it to `dot-dataview` - `dot-browser-selector.component.spec.ts` — **new spec file** covering `$uploadDisabled`, `$acceptAttr`, `onNodeSelect`, and `onFileUpload` (13 tests) ## Out of scope - Feature 2 — Global Search across all sites/folders will be handled in a separate ticket - - ## Test plan - [ ] Upload button visible in Image Picker and File Picker dialogs - [ ] Button enabled when System Host or any site/folder is selected - [ ] Button disabled only in the edge case where `hostFolderId` is empty - [ ] Clicking Upload without permissions shows inline error; file list remains intact - [ ] Happy path: select a site/folder → upload image/file → file appears in list, not auto-selected - [ ] Generic server error shows generic inline error message - [ ] Image Picker restricts file input to `image/*`; File Picker accepts all files --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

…button (#35301) ## Summary Follow-up UX improvement to #35221. After a successful upload, the newly uploaded file is now **automatically selected** in the file list and the **Add button is immediately enabled** — eliminating the extra click that was previously required. ### Changes - **`browser.store.ts`** — `uploadFile`: captures the `DotCMSContentlet` returned by `uploadDotAsset` and calls `setSelectedContent(uploadedContentlet)` before reloading the content list, so `selectedContent` is populated as soon as the upload succeeds. - **`dot-dataview.component.ts`** — Renamed `$selectedProduct` → `$selectedContent` and added `alias: 'selectedContent'` so the parent can drive the table's visual selection from outside the component. - **`dot-browser-selector.component.html`** — Added `[selectedContent]="store.selectedContent()"` binding on `dot-dataview`. This feeds the store's selection state into the PrimeNG table's `[(selection)]` binding, highlighting the uploaded row automatically after the content list refreshes. ### Before / After | | Before | After | |---|---|---| | Upload file | File appears in list, nothing selected, Add disabled | File appears in list, **row highlighted**, Add enabled | ## Video https://github.com/user-attachments/assets/8c5d4fd0-2dfa-40f4-8031-d5f0b9e34c3e ## Test plan - [ ] Upload a file → it appears in the list highlighted and Add button is enabled - [ ] Clicking a different row still selects it and keeps Add enabled - [ ] Upload error (403 / generic) shows the inline error message and does not auto-select anything - [ ] Cancelling the dialog after upload works normally This PR fixes: #33103

adrianjm-dotCMS added 8 commits April 1, 2026 11:40

feat(dot-browser-selector): enhance file upload capabilities with dyn…

08abef1

…amic accept attribute

test

abe1b23

fix(dot-dataview): update upload button label to use internationaliza…

960cc19

…tion key

fix(dot-browser-selector): improve upload button state management

97bb052

Copilot AI review requested due to automatic review settings April 6, 2026 18:58

github-project-automation bot added this to dotCMS - Product Planning Apr 6, 2026

github-actions bot mentioned this pull request Apr 6, 2026

File Picker in New Edit Content: Add Upload New File Button and Global Search #33103

Closed

9 tasks

github-actions bot added Area : Backend PR changes Java/Maven backend code Area : Frontend PR changes Angular/TypeScript frontend code labels Apr 6, 2026

Copilot started reviewing on behalf of adrianjm-dotCMS April 6, 2026 18:59 View session

claude bot added the AI: Safe To Rollback label Apr 6, 2026

Copilot AI reviewed Apr 6, 2026

View reviewed changes

adrianjm-dotCMS and others added 2 commits April 6, 2026 15:09

fix(dot-browser-selector): clarify upload button state documentation

3458d7c

adrianjm-dotCMS requested review from KevinDavilaDotCMS, nicobytes, oidacra, rjvelazco and zJaaal April 6, 2026 20:03

adrianjm-dotCMS requested review from dario-daza April 6, 2026 20:03

fix tests

b101a27

zJaaal requested changes Apr 7, 2026

View reviewed changes

Comment thread ...ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.ts Outdated

Comment thread dotCMS/src/main/webapp/WEB-INF/messages/Language_es.properties

adrianjm-dotCMS added 3 commits April 7, 2026 09:35

Team feedback

87032aa

Merge branch 'main' into 33103-file-picker-in-new-edit-content

59dca93

remove unncecesary blank space

ccfc297

zJaaal approved these changes Apr 7, 2026

View reviewed changes

dario-daza approved these changes Apr 7, 2026

View reviewed changes

adrianjm-dotCMS enabled auto-merge April 7, 2026 15:26

Merge branch 'main' into 33103-file-picker-in-new-edit-content

efd3dba

adrianjm-dotCMS added 2 commits April 7, 2026 15:09

Merge branch 'main' into 33103-file-picker-in-new-edit-content

749cd5b

Merge branch 'main' into 33103-file-picker-in-new-edit-content

0f86438

adrianjm-dotCMS added this pull request to the merge queue Apr 7, 2026

Merged via the queue into main with commit d2a0d2c Apr 7, 2026
50 checks passed

adrianjm-dotCMS deleted the 33103-file-picker-in-new-edit-content branch April 7, 2026 22:08

adrianjm-dotCMS mentioned this pull request Apr 13, 2026

feat(dot-browser-selector): auto-select uploaded file and enable Add button #35301

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(dot-browser-selector): add Upload New File button to File Picker in New Edit Content#35221

feat(dot-browser-selector): add Upload New File button to File Picker in New Edit Content#35221
adrianjm-dotCMS merged 17 commits intomainfrom
33103-file-picker-in-new-edit-content

adrianjm-dotCMS commented Apr 6, 2026 •

edited by github-actions bot

Loading

Uh oh!

claude bot commented Apr 6, 2026 •

edited

Loading

Uh oh!

claude bot commented Apr 6, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

claude bot commented Apr 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

adrianjm-dotCMS commented Apr 6, 2026 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Out of scope

Test plan

Uh oh!

claude bot commented Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rollback Safety Analysis (re-run on sync)

Uh oh!

claude bot commented Apr 6, 2026

Rollback Safety Analysis

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

claude bot commented Apr 7, 2026

Rollback Safety Analysis (re-run on sync)

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

adrianjm-dotCMS commented Apr 6, 2026 •

edited by github-actions bot

Loading

claude bot commented Apr 6, 2026 •

edited

Loading