Skip to content

file(file-picker): file previews/thumbnails - #6327

Open
elzody wants to merge 2 commits into
mainfrom
fix/file-picker-thumbnails
Open

elzody wants to merge 2 commits into
mainfrom
fix/file-picker-thumbnails

Conversation

@elzody

@elzody elzody commented Nov 12, 2026 •

Copy link
Copy Markdown
Collaborator

Fixes #6326

The file picker did not import the @nextcloud/dialogs stylesheet so previews were not displaying and the styles were wrong. This seems to happen when the version of @nextcloud/dialogs in server vs. richdocuments are mismatched.

Test cases to make sure that file previews/thumbnails are displayed in
the file picker when inserting an image into a document

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
Assisted-by: ClaudeCode:claude-opus-5[1m]
This is necessary for the file picker to be displayed correctly and for
file previews/thumbnails to be presented. Also imports the styles into
DocumentTargetPicker.vue as it was missing there.

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
Assisted-by: ClaudeCode:claude-opus-5[1m]
@elzody
elzody requested a review from juliusknorr as a code owner November 12, 2026 20:27
@elzody elzody changed the title fix/file picker thumbnails file(file-picker): file previews/thumbnails Nov 12, 2026

@juliusknorr juliusknorr left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, that's a pretty sane fix, and nice to have an e2e test that actually fails without it 👍 One small comment inside. Backports? Only the stable branches already on @nextcloud/dialogs 7 need this.

import SaveAs from '../components/Modal/SaveAs.vue'
import { getCurrentDirectory } from '../helpers/filesApp.js'

import '@nextcloud/dialogs/style.css'

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a blocker: should we rather import the stylesheet once per entrypoint (viewer.js, reference.js, personal.js, ...) instead of in single modules? SaveAs.vue, ZoteroHint.vue, PersonalSettings.vue, SettingsFont.vue and mixins/version.js also use toasts from @nextcloud/dialogs without importing it, so they probably only look right because server ships the same build.

cy.get('@preview')
.should('be.visible')
.and('have.css', 'width', '32px')
.and('have.css', 'height', '32px')

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pinning 32px ties the test to the current dialogs CSS, so a later dialogs bump could break it even though nothing is wrong. Could we just check that width and height are not 0px? That still fails without the stylesheet.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

File picker does not display image thumbnails when inserting files from Nextcloud

2 participants