Photos won't show up in Photos app (through browser) when image doesn't have a specific metadata

[adriano-pinaffo]

**Describe the bug**
After uploading some image files the Photo app stops showing the images (thumbnails don't load).
===> Issue identified (check below)
===> Fix suggested (check below)

To Reproduce

1. Upload specific images into the Photo folder (or any folder that is in the scope of the Photo app). A photo example is provided here.
2. Open the Photo app (no thumbnail will show up)

Expected behavior
Thumbnails show up in Photo app

Screenshots

Desktop (please complete the following information):

• OS: Linux Mint
• Browser: Brave Version 1.46.153 Chromium: 108.0.5359.128, also happens in Firefox
• Version: Nextcloud 26 (AIO v5.1.0)

Issue identified
The problem happens only in the browser in the front-end of the Photos app. When generating the thumbnails. the object file has a property fileMetadataSize which is a string representing the width and height of the image. The program will parse it to extract the width and height as properties of fileMetadataSizeParsed. The problem happens when the property fileMetadataSize is an empty string, this throws an error because JSON.parse() can't parse empty strings and the Nullish coalescing operator (??) won't assign '{}' because .replace() won't return null and the Optional chaining (?.) won't break the chain since an empty string is not null.

Note line 54 in the snippet below (in photos/src/store/files.js):

 52       if (file.fileid >= 0) {
 53         if (file.fileMetadataSize?.length > 1) {
 54           file.fileMetadataSizeParsed = JSON.parse(file.fileMetadataSize?.replace(/"/g, '"') ?? '{}')
 55           file.fileMetadataSizeParsed.width = file.fileMetadataSizeParsed?.width ?? 256
 56           file.fileMetadataSizeParsed.height = file.fileMetadataSizeParsed?.height ?? 256
 57         } else {
 58           file.fileMetadataSizeParsed = { width: 256, height: 256 }
 59         }
 60       }

Line 54 causes the following error:

FetchFilesMixin.js:114 SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at files.js:53:40
    at Array.forEach (<anonymous>)
    at h.updateFiles (files.js:45:12)
    at vuex.esm.js:844:13
    at vuex.esm.js:466:7
    at Array.forEach (<anonymous>)
    at vuex.esm.js:465:11
    at h._withCommit (vuex.esm.js:624:3)
    at h.commit (vuex.esm.js:464:8)

This happens because "" does not parse.
My proposed solution is to make a check before that and assign "{}" if the file.fileMetadataSize is "". I will be making a pull request for that.

Below is the proposed solution in conext.

 52       if (file.fileid >= 0) {
 53         if (file.fileMetadataSize?.length > 1) {
 54           file.fileMetadataSize = file.fileMetadataSize === '' ? '{}' : file.fileMetadataSize
 55           file.fileMetadataSizeParsed = JSON.parse(file.fileMetadataSize?.replace(/"/g, '"') ?? '{}')
 56           file.fileMetadataSizeParsed.width = file.fileMetadataSizeParsed?.width ?? 256
 57           file.fileMetadataSizeParsed.height = file.fileMetadataSizeParsed?.height ?? 256
 58         } else {
 59           file.fileMetadataSizeParsed = { width: 256, height: 256 }
 60         }
 61       }

Sample image causing error
IMG_2471.HEIC.zip

[zedocrob]

Same problem here

[adriano-pinaffo]

if you change photos/src/store/files.js like I indicated your problem will be fixed

Same problem here

[SeanDS]

@adriano-pinaffo I take it there's no easy way to fix this in production without a proper new release with the fix? I looked and there's no files.js but rather a minified script photos-src_mixins_FetchFilesMixin_js.js which I don't fancy trying to patch directly.

[artonge]

The code has changed since then. I don't see how the error could occur at the time, and don't see how it could occur now. Feel free to reopen if needed.