UI Issue in Photos App - Unable to Select Folder

[xelayz]

Describe the bug

There is a UI issue in the Photos app where the interface appears broken. Specifically, users are unable to select a source folder for media. The folder selection dialog overlaps incorrectly, preventing interaction with the options.

To Reproduce

Steps to reproduce the behavior:

1. Open the Photos app
2. Attempt to select a media folder
3. Notice the broken UI and inability to choose a folder

Expected behavior

The folder selection dialog should display correctly, allowing users to select folders without any overlapping or visual errors.

Screenshots

System (please complete the following information):

• Photos App: 3.0.2
• Nextcloud: 30.0.5

[PatrikJasek]

Hi, I have the same problem. With 30.0.4 was everything ok. Plase fix it soon. Thank you

[FragileDeviations]

Having the same problem.

[Biguibi]

I'm having this problem too, I am using the Snap package with a self signed certificate.

Console logs an SSL and Service Worker registration error as soon as I open the photos app, then I get both
PhotosSourceLocationsSettings.vue:78 RangeError: Invalid array length and PhotosSourceLocationsSettings.vue:78 TypeError: Cannot read properties of undefined (reading 'authType') errors logged in the console when trying to select a folder.

Here's the log file exported from the browser's developer tools. I have redacted usernames and parts of the URL which relate to my local network.

nextcloud photos log redacted.log

[thomaswwp]

I see it too on Nextcloud 30.0.5 and Photos 3.0.2 on both Firefox and Chrome. This is a completely vanilla setup from docker image so I was panicking, but glad to see I am not alone.

Here are the error messages I get in console in Firefox when I click "Add Folder..."

RangeError: invalid array length
    Yt VueJS
    hi FilePicker-oSc3I_BN.mjs:484
    VueJS 13
    t FilePicker-oSc3I_BN.mjs:465
    VueJS 4
    t FilePicker-oSc3I_BN.mjs:459
    setup FilePicker-oSc3I_BN.mjs:468
    VueJS 25
    render legacy.mjs:36
    VueJS 8
    u legacy.mjs:33
    c legacy.mjs:100
    pick index-CRno7JSe.mjs:18
    pick index-CRno7JSe.mjs:10
    openFilePicker PhotosSourceLocationsSettings.vue:78
    addSourceFolder PhotosSourceLocationsSettings.vue:82
    debounceAddSourceFolder PhotosSourceLocationsSettings.vue:66
    l index.js:27
    setTimeout handler*u index.js:38
    VueJS 4
    click NcButton.mjs:231
    En VueJS
photos-main.js:1:1736914
    VueJS 16
    t FilePicker-oSc3I_BN.mjs:465
    VueJS 4
    t FilePicker-oSc3I_BN.mjs:459
    setup FilePicker-oSc3I_BN.mjs:468
    VueJS 25
    render legacy.mjs:36
    VueJS 8
    u legacy.mjs:33
    c legacy.mjs:100
    pick index-CRno7JSe.mjs:18
    pick index-CRno7JSe.mjs:10
    openFilePicker PhotosSourceLocationsSettings.vue:78
    addSourceFolder PhotosSourceLocationsSettings.vue:82
    debounceAddSourceFolder PhotosSourceLocationsSettings.vue:66
    l index.js:27
    (Async: setTimeout handler)
    u index.js:38
    VueJS 4
    click NcButton.mjs:231
    En VueJS
TypeError: e is undefined
    dn request.js:71
    Mn index.mjs:405
    get index.js:2
    execute index.js:2
    patchInline index.js:2
    pt index.js:2
    ct index.js:2
    it index.js:2
    De index.js:2
    De index.js:2
    getDirectoryContents index.js:2
    h FilePicker-oSc3I_BN.mjs:876
    loadFiles FilePicker-oSc3I_BN.mjs:887
    setup FilePicker-oSc3I_BN.mjs:966
    VueJS 25
    render legacy.mjs:36
    VueJS 8
    u legacy.mjs:33
    c legacy.mjs:100
    pick index-CRno7JSe.mjs:18
    pick index-CRno7JSe.mjs:10
    openFilePicker PhotosSourceLocationsSettings.vue:78
    addSourceFolder PhotosSourceLocationsSettings.vue:82
    debounceAddSourceFolder PhotosSourceLocationsSettings.vue:66
    l index.js:27
    setTimeout handler*u index.js:38
    VueJS 4
    click NcButton.mjs:231
    En VueJS
photos-main.js:1:1736914

[beardhatcode]

I am also facing this issue.

Very non user-friendly workaround:

occ user:setting ${USER} photos photosSourceFolders '["/Path/to/folder"]'

edit people below seem to have shell escaping issues, so depending on your shell you might need to use the following instead:

 occ user:setting ${USER} photos photosSourceFolders ['"/Photos"']

Note that all the paths must be relative to the root of the USERs main Nextcloud directory

[danpeig]

Me too. Nextcloud 30.0.5 AIO installed yesterday.

[dipelta]

Having the same problem too

[devfoo-one]

I got the same behaviour with 30.0.5 on Safari and Chrome.

[glossyio]

I am also facing this issue.

Very non user-friendly workaround:

occ user:setting ${USER} photos photosSourceFolders '["/Path/to/folder"]'

Facing same issue after upgrading to 30.0.5 from 30.0.4 using lscr.io/linuxserver/nextcloud Docker image.

@beardhatcode - I appreciate that you shared this. I would not have pieced that command together based on the docs. However, after running this to specify 1 folder (a folder shared by another user) it is causing me more issues. After adding it for my user, Nextcloud fails to load the "Photos" app page at all: just shows the top nav and background image but doesn't load anything else on the page. The Files app page loads normally. I used that as my path definition; e.g. from my files I used "/myphotos/" and "/MYUSER/files/myphotos/" as the path to no avail. Is that supposed to be relative to my home or the server?
Any recommendation on how to back out of that?

Ah, Edit: The command I needed to run was relative to the user, so "/myphotos" is correct, but I needed escape characters for the double quotes and single quotes inside the square brackets. Changed the command to this:

occ user:setting ${USER} photos photosSourceFolders ['\"/Path/to/folder\"']

The default path in the config is photosSourceFolders: ["/Photos"]

[WesRos]

This evening I tried to change the Photo folder. I have the same situation as you @glossyio . Nextcloud fails to load the photo app after the occ command.

I tried to fix it with yours solution, but That not working in my situation. The occ command does change the setting, but the photo page does not show any picture.

Command:
occ user:setting ${USER} photos photosSourceFolders

Replies:
["/Photos"] or Photos or /Photos

Do you have another solution?