fix(contacts): show photos that have no TYPE parameter by MiMoHo · Pull Request #5565 · nextcloud/contacts · GitHub

Summary

Contact photos stored without an explicit TYPE parameter, e.g.

PHOTO;ENCODING=b:
iVBORw0KGgoAAAANSUhEUgAA...

were not displayed: getPhotoUrl() called photoType.toLowerCase() on the missing parameter and threw

TypeError: Cannot read properties of undefined (reading 'toLowerCase')

so the app fell back to initials, while other CardDAV clients (eM Client, iOS Contacts) display these photos fine. The TYPE parameter is optional per RFC 2426/6350.

Changes

When the TYPE parameter is missing, detect the image type from the magic bytes of the base64 data (png, jpeg, gif, webp, bmp, svg). SVG detected this way still goes through the existing sanitizeSVG path.
Unknown signatures fall back to jpeg: browsers content-sniff raster images in an img element, so a wrong subtype still renders — before this change the app just threw.
Drive-by: the error logs in getPhotoUrl() referenced this.contact, which does not exist on the Contact class and always logged undefined; they now log this.

Checklist

Jest tests added: photo with explicit TYPE, binary photo without TYPE (png + jpeg magic bytes), vCard 4.0 data-URI photo
Full Jest suite passes, npm run lint clean for the touched files, production build succeeds

Resolve #5401

🤖 Generated with Claude Code

The TYPE parameter of PHOTO is optional, but getPhotoUrl() called toLowerCase() on it unconditionally. Contacts stored e.g. as 'PHOTO;ENCODING=b:…' (without TYPE) threw a TypeError and showed initials instead of the photo, while other CardDAV clients displayed them fine. Detect the image type from the magic bytes of the base64 data when the TYPE parameter is missing. Unknown signatures fall back to jpeg, which browsers happily content-sniff in an img element anyway. Also log the contact itself in getPhotoUrl() error messages instead of the undefined this.contact. Resolves nextcloud#5401 Assisted-by: Claude:claude-fable-5 Signed-off-by: MiMoHo <37556964+MiMoHo@users.noreply.github.com>

Codecov Report

❌ Patch coverage is 88.88889% with 1 line in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
src/models/contact.js	88.88%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

@SebastianKrupinski: I don't know if we should do such a fallback here. I think adding a warning or something like this would make more sense?

Hey @MiMoHo, thank you very much for your first PR here! Looks pretty good and useful to me. But additional colleagues will have a look into it as well.

Address review feedback on nextcloud#5565: instead of silently assuming JPEG for a PHOTO whose magic bytes match no known signature, log a warning so the guess is visible in the console. The fallback itself stays, as browsers content-sniff raster images in an img element regardless of the declared subtype. Add a test for the unknown-signature path, closing the coverage gap codecov reported on the fallback branch. Assisted-by: Claude:claude-opus-4-8 Signed-off-by: MiMoHo <37556964+MiMoHo@users.noreply.github.com>

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)

We only allow upload of PNGs, GIF, SVG, JPEG, WebP and AVIF. Could you please change the signatures accordingly? See

contacts/src/components/ContactDetails/ContactDetailsAvatar.vue

Line 332 in 61c225e

getMimetype(uint) {

Please change the image types acceptable for displaying. Once that is done, it get's a go from my side.

Thanks!!

console is not accepted by out linter anymore. Please use logger instead.
See : #5624

Hey @MiMoHo, are you able to implement the requested changes? Or should we do the last steps for you? Thanks for the feedback!

MiMoHo requested review from GVodyanov, SebastianKrupinski and hamza221 as code owners July 12, 2026 17:27

DerDreschner reviewed Jul 16, 2026

View reviewed changes

hamza221 added bug Something isn't working 3. to review Waiting for reviews labels Jul 16, 2026

github-actions Bot added the feedback-requested label Jul 27, 2026

DerDreschner reviewed Aug 13, 2026

View reviewed changes

DerDreschner requested changes Aug 13, 2026

View reviewed changes

hamza221 reviewed Aug 13, 2026

View reviewed changes

+              	const signature = Object.keys(signatures).find((signature) => photoB64Data.startsWith(signature))
+              	// browsers detect raster images in an img element from the content,
+              	// so a wrong subtype still renders fine
+              	return signature ? signatures[signature] : 'jpeg'

+               */
+              function detectImageType(photoB64Data) {
+              	// base64 encodings of the magic bytes of the common image formats
+              	const signatures = {

+              	if (!signature) {
+              		// browsers detect raster images in an img element from the content,
+              		// so an assumed subtype still renders fine, but warn about the guess
+              		console.warn('Could not detect the photo type from its content, assuming JPEG')

fix(contacts): show photos that have no TYPE parameter by MiMoHo · Pull Request #5565 · nextcloud/contacts · GitHub

Uh oh!

fix(contacts): show photos that have no TYPE parameter - #5565

fix(contacts): show photos that have no TYPE parameter#5565
MiMoHo wants to merge 2 commits into
nextcloud:mainfrom
MiMoHo:fix/photo-without-type-parameter

MiMoHo commented Jul 12, 2026

Uh oh!

codecov Bot commented Jul 16, 2026 •
edited
Loading

Uh oh!

Uh oh!

DerDreschner Jul 16, 2026

Uh oh!

DerDreschner commented Jul 16, 2026

Uh oh!

github-actions Bot commented Jul 27, 2026

Uh oh!

DerDreschner Aug 13, 2026

Uh oh!

DerDreschner left a comment

Uh oh!

hamza221 Aug 13, 2026

Uh oh!

DerDreschner commented Aug 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fix(contacts): show photos that have no TYPE parameter by MiMoHo · Pull Request #5565 · nextcloud/contacts · GitHub

Uh oh!

fix(contacts): show photos that have no TYPE parameter - #5565

fix(contacts): show photos that have no TYPE parameter#5565MiMoHo wants to merge 2 commits intonextcloud:mainnextcloud/contacts:mainfrom MiMoHo:fix/photo-without-type-parameterMiMoHo/nextcloud-contacts:fix/photo-without-type-parameterCopy head branch name to clipboard

Conversation

MiMoHo commented Jul 12, 2026

Summary

Changes

Checklist

Uh oh!

codecov Bot commented Jul 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

DerDreschner Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

DerDreschner commented Jul 16, 2026

Uh oh!

github-actions Bot commented Jul 27, 2026

Uh oh!

DerDreschner Aug 13, 2026

Choose a reason for hiding this comment

Uh oh!

DerDreschner left a comment

Choose a reason for hiding this comment

Uh oh!

hamza221 Aug 13, 2026

Choose a reason for hiding this comment

Uh oh!

DerDreschner commented Aug 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fix(contacts): show photos that have no TYPE parameter#5565
MiMoHo wants to merge 2 commits into
nextcloud:mainfrom
MiMoHo:fix/photo-without-type-parameter

codecov Bot commented Jul 16, 2026 •
edited
Loading