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

[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

[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?

[xelayz]

The command sudo -u www-data php /var/www/nextcloud/occ user:setting robin photos photosSourceFolders '["/Private/Pictures"]' worked fine for me. No issues.

[glossyio]

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

Do you have another solution?

I had to use the backward-slashes in front of the double quotes INSIDE the single quotes to make it work: my command was: occ user:setting ${USER} photos photosSourceFolders ['\"/Photos\"'] to bring it back to default state.

if you have another user that you didn't change, run occ user:setting USER to see what their settings are for photos, and you'll see it there. You can also check what's happening with your assignment with that command. It should look like ["/Photos"] with the double quotes around it as output from the occ user:setting USER command.

[WesRos]

Thank you. The setting from another user isn't available:
The setting does not exist for user "joe".

Maybe because this is a new Nextcloud installation. The Photo page works when I login as Joe. After removing the setting from the database:
DELETE FROM oc_preferences WHERE userid = 'joe2' AND appid = 'photos' AND configkey = 'photosSourceFolders';
The Photo page works again. Thank you!

In my situation I can change the photo folder with this command:
occ user:setting ${USER} photos photosSourceFolders ['"/Photos"']

[tglemser]

Thanks for sharing the fixes. What worked for me:
Default Setting: occ user:setting $user photos photosSourceFolders --delete
Default Path: occ user:setting $user photos photosSourceFolders ['"/Photos"']
Setting multiple folders: occ user:setting $userphotos photosSourceFolders ['"/Photos"','"/FolderA/FolderB"']

[PatrikJasek]

Hi,

do you know how long it takes to fix it with the new version?

[joshtrichards]

Cc: @artonge, @skjnldsv: This regression popped up in 30.0.5. Did not happen in prior v30 maintenance releases (and does not impact v29). Any idea what might be going on here? There weren't a lot of changes in-app, so maybe a component update via #2641 introduced this?