diff --git a/lib/Sabre/PropFindPlugin.php b/lib/Sabre/PropFindPlugin.php
index 5fc762f555..5a619628a6 100644
--- a/lib/Sabre/PropFindPlugin.php
+++ b/lib/Sabre/PropFindPlugin.php
@@ -16,9 +16,11 @@
 use OCA\Photos\Sabre\Place\PlacePhoto;
 use OCA\Photos\Sabre\Place\PlaceRoot;
 use OCP\Files\DavUtil;
+use OCP\Files\IRootFolder;
 use OCP\Files\NotFoundException;
 use OCP\FilesMetadata\IFilesMetadataManager;
 use OCP\IPreview;
+use OCP\IUserSession;
 use Sabre\DAV\INode;
 use Sabre\DAV\PropFind;
 use Sabre\DAV\PropPatch;
@@ -37,6 +39,7 @@ class PropFindPlugin extends ServerPlugin {
 	public const NBITEMS_PROPERTYNAME = '{http://nextcloud.org/ns}nbItems';
 	public const COLLABORATORS_PROPERTYNAME = '{http://nextcloud.org/ns}collaborators';
 	public const PERMISSIONS_PROPERTYNAME = '{http://owncloud.org/ns}permissions';
+	public const PHOTOS_COLLECTION_FILE_ORIGINAL_FILENAME_PROPERTYNAME = '{http://nextcloud.org/ns}photos-collection-file-original-filename';
 
 	private IPreview $previewManager;
 	private ?Tree $tree;
@@ -46,6 +49,8 @@ public function __construct(
 		IPreview $previewManager,
 		AlbumMapper $albumMapper,
 		private IFilesMetadataManager $filesMetadataManager,
+		private readonly IUserSession $userSession,
+		private readonly IRootFolder $rootFolder,
 	) {
 		$this->previewManager = $previewManager;
 		$this->albumMapper = $albumMapper;
@@ -110,6 +115,18 @@ public function propFind(PropFind $propFind, INode $node): void {
 				return $metadata->hasKey('files-live-photo') && $node->getFileInfo()->getMimetype() === 'video/quicktime' ? 'true' : 'false';
 			});
 
+			$propFind->handle(self::PHOTOS_COLLECTION_FILE_ORIGINAL_FILENAME_PROPERTYNAME, function () use ($node) {
+				if (!($node instanceof AlbumPhoto)) {
+					return;
+				}
+
+				$currentUser = $this->userSession->getUser();
+				$fileOwner = $node->getFileInfo()->getOwner();
+				if ($currentUser !== null && $currentUser === $fileOwner) {
+					$userFolder = $this->rootFolder->getUserFolder($currentUser->getUID());
+					return $userFolder->getRelativePath($node->getFileInfo()->getPath());
+				}
+			});
 		}
 
 		if ($node instanceof AlbumRoot) {
diff --git a/src/components/Collection/CollectionContent.vue b/src/components/Collection/CollectionContent.vue
index 47069586b4..a8ac60eaf3 100644
--- a/src/components/Collection/CollectionContent.vue
+++ b/src/components/Collection/CollectionContent.vue
@@ -5,8 +5,7 @@
 <template>
 	<!-- Errors handlers-->
 	<NcEmptyContent v-if="(collection === undefined && !loading) || error === 404"
-		class="empty-content-with-illustration"
-		:name="t('photos', 'This collection does not exist')">
+		class="empty-content-with-illustration" :name="t('photos', 'This collection does not exist')">
 		<FolderMultipleImage slot="icon" />
 	</NcEmptyContent>
 	<NcEmptyContent v-else-if="error" :name="t('photos', 'An error occurred')">
@@ -15,27 +14,18 @@
 
 	<div v-else class="collection">
 		<!-- Header -->
-		<slot class="collection__header"
-			name="header"
-			:selected-file-ids="selectedFileIds"
+		<slot class="collection__header" name="header" :selected-file-ids="selectedFileIds"
 			:reset-selection="resetSelection" />
 
 		<!-- No content -->
 		<slot v-if="sortedCollectionFileIds.length === 0 && !loading" name="empty-content" />
 
 		<!-- Media list -->
-		<FilesListViewer v-if="collection !== undefined && sortedCollectionFileIds.length > 0 "
-			:container-element="appContent"
-			class="collection__media"
-			:file-ids="sortedCollectionFileIds"
-			:base-height="isMobile ? 120 : 200"
-			:loading="loading">
-			<File slot-scope="{file, distance}"
-				:file="files[file.id]"
-				:allow-selection="allowSelection"
-				:selected="selection[file.id] === true"
-				:distance="distance"
-				@click="openViewer"
+		<FilesListViewer v-if="collection !== undefined && sortedCollectionFileIds.length > 0"
+			:container-element="appContent" class="collection__media" :file-ids="sortedCollectionFileIds"
+			:base-height="isMobile ? 120 : 200" :loading="loading">
+			<File slot-scope="{file, distance}" :file="files[file.id]" :allow-selection="allowSelection"
+				:selected="selection[file.id] === true" :distance="distance" @click="openViewer"
 				@select-toggled="onFileSelectToggle" />
 		</FilesListViewer>
 	</div>
@@ -45,12 +35,14 @@
 import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
 import FolderMultipleImage from 'vue-material-design-icons/FolderMultipleImage.vue'
 
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { NcEmptyContent, isMobile } from '@nextcloud/vue'
 import { translate } from '@nextcloud/l10n'
 
 import FilesSelectionMixin from '../../mixins/FilesSelectionMixin.js'
 import FilesListViewer from '.././FilesListViewer.vue'
 import File from '.././File.vue'
+import { toViewerFileInfo } from '../../utils/fileUtils.js'
 
 export default {
 	name: 'CollectionContent',
@@ -114,17 +106,29 @@ export default {
 		},
 	},
 
+	mounted() {
+		subscribe('files:node:deleted', this.handleFileDeleted)
+	},
+
+	destroyed() {
+		unsubscribe('files:node:deleted', this.handleFileDeleted)
+	},
+
 	methods: {
 		openViewer(fileId) {
 			const file = this.files[fileId]
 			OCA.Viewer.open({
-				fileInfo: file,
-				list: this.sortedCollectionFileIds.map(fileId => this.files[fileId]).filter(file => !file.sectionHeader),
+				fileInfo: toViewerFileInfo(file),
+				list: this.sortedCollectionFileIds.map(fileId => toViewerFileInfo(this.files[fileId])).filter(file => !file.sectionHeader),
 				loadMore: file.loadMore ? async () => await file.loadMore(true) : () => [],
 				canLoop: file.canLoop,
 			})
 		},
 
+		handleFileDeleted({ fileid }) {
+			this.$store.commit('removeFilesFromCollection', { collectionFileName: this.collection.filename, fileIdsToRemove: [fileid?.toString()] })
+		},
+
 		t: translate,
 	},
 }
diff --git a/src/components/FileLegacy.vue b/src/components/FileLegacy.vue
index 6bd291516c..4cf3946364 100644
--- a/src/components/FileLegacy.vue
+++ b/src/components/FileLegacy.vue
@@ -41,6 +41,7 @@
 
 <script>
 import { generateUrl } from '@nextcloud/router'
+import { toViewerFileInfo } from '../utils/fileUtils.js'
 
 export default {
 	name: 'FileLegacy',
@@ -88,8 +89,8 @@ export default {
 	methods: {
 		openViewer() {
 			OCA.Viewer.open({
-				fileInfo: this.item.injected,
-				list: this.item.injected.list,
+				fileInfo: toViewerFileInfo(this.item.injected),
+				list: this.item.injected.list.map(file => toViewerFileInfo(file)),
 				loadMore: this.item.injected.loadMore ? async () => await this.item.injected.loadMore(true) : () => [],
 				canLoop: this.item.injected.canLoop,
 			})
diff --git a/src/components/FilesListViewer.vue b/src/components/FilesListViewer.vue
index cce02252e2..ea2e5f5569 100644
--- a/src/components/FilesListViewer.vue
+++ b/src/components/FilesListViewer.vue
@@ -213,10 +213,12 @@ export default {
 
 	mounted() {
 		subscribe('files:node:updated', this.handleFileUpdated)
+		subscribe('files:node:deleted', this.handleFileDeleted)
 	},
 
 	destroyed() {
 		unsubscribe('files:node:updated', this.handleFileUpdated)
+		unsubscribe('files:node:deleted', this.handleFileDeleted)
 	},
 
 	methods: {
@@ -251,6 +253,10 @@ export default {
 			const fetchedFile = await fetchFile(this.files[fileid].filename)
 			this.appendFiles([fetchedFile])
 		},
+
+		handleFileDeleted({ fileid }) {
+			this.$store.commit('deleteFile', fileid)
+		},
 	},
 }
 </script>
diff --git a/src/components/PhotosPicker.vue b/src/components/PhotosPicker.vue
index af87d53a7d..c5644fcbb9 100644
--- a/src/components/PhotosPicker.vue
+++ b/src/components/PhotosPicker.vue
@@ -231,6 +231,7 @@ export default defineComponent({
 
 		emitPickedEvent() {
 			this.$emit('files-picked', this.selectedFileIds)
+			this.resetSelection()
 		},
 		/**
 		 * @param {string} date - In the following format: YYYYMM
diff --git a/src/mixins/FetchCollectionContentMixin.js b/src/mixins/FetchCollectionContentMixin.js
index 560f7cb34a..03dba0bf77 100644
--- a/src/mixins/FetchCollectionContentMixin.js
+++ b/src/mixins/FetchCollectionContentMixin.js
@@ -10,6 +10,7 @@ import { showError } from '@nextcloud/dialogs'
 import AbortControllerMixin from './AbortControllerMixin.js'
 import { fetchCollection, fetchCollectionFiles } from '../services/collectionFetcher.js'
 import logger from '../services/logger.js'
+import { collectionFilesExtraProps } from '../store/collections.js'
 import SemaphoreWithPriority from '../utils/semaphoreWithPriority.js'
 
 export default {
@@ -76,11 +77,13 @@ export default {
 		 * @param {((value: import('../services/collectionFetcher.js').CollectionFile, index: number, array: import('../services/collectionFetcher.js').CollectionFile[]) => any)[]} [mappers] - Callback that can transform files before they are appended.
 		 * @return {Promise<import('../services/collectionFetcher.js').CollectionFile[]>}
 		 */
-		async fetchCollectionFiles(collectionFileName, extraProps, client, mappers = []) {
+		async fetchCollectionFiles(collectionFileName, extraProps = [], client, mappers = []) {
 			if (this.loadingCollectionFiles) {
 				return []
 			}
 
+			extraProps = [...extraProps, ...collectionFilesExtraProps]
+
 			const fetchSemaphoreSymbol = await this.fetchSemaphore.acquire()
 
 			try {
diff --git a/src/services/collectionFetcher.js b/src/services/collectionFetcher.js
index 38f6aa5700..286f8339b4 100644
--- a/src/services/collectionFetcher.js
+++ b/src/services/collectionFetcher.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-tabs */
 /**
  * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
@@ -75,7 +76,7 @@ export function getCollectionFilesDavRequest(extraProps = []) {
 					<oc:favorite />
 					<oc:fileid />
 					<oc:permissions />
-					${extraProps.join('')}
+					${extraProps.join('\n					')}
 				</d:prop>
 			</d:propfind>`
 }
diff --git a/src/store/collections.js b/src/store/collections.js
index f300f02dee..e1495ba308 100644
--- a/src/store/collections.js
+++ b/src/store/collections.js
@@ -10,6 +10,8 @@ import client from '../services/DavClient.js'
 import logger from '../services/logger.js'
 import Semaphore from '../utils/semaphoreWithPriority.js'
 
+export const collectionFilesExtraProps = ['<nc:photos-collection-file-original-filename />']
+
 /**
  * Collections are indexed by their `filename`.
  */
@@ -319,7 +321,7 @@ const actions = {
 								</d:prop>
 							</d:set>
 							</d:propertyupdate>`,
-				}
+				},
 			)
 
 			return updatedCollection
diff --git a/src/utils/fileUtils.js b/src/utils/fileUtils.js
index fa92021026..763ff4d251 100644
--- a/src/utils/fileUtils.js
+++ b/src/utils/fileUtils.js
@@ -6,6 +6,7 @@ import { generateRemoteUrl } from '@nextcloud/router'
 import camelcase from 'camelcase'
 import { rootPath } from '../services/DavClient.js'
 import { isNumber } from './numberUtils.js'
+import { getRemoteURL, getRootPath } from '@nextcloud/files/dav'
 
 /**
  * Get an url encoded path
@@ -43,7 +44,7 @@ const extractFilePaths = function(path) {
  * @param {object} fileInfo1 file 1 fileinfo
  * @param {object} fileInfo2 file 2 fileinfo
  * @param {string} key key to sort with
- * @param {boolean} [asc=true] sort ascending?
+ * @param {boolean} [asc] sort ascending?
  * @return {number}
  */
 const sortCompare = function(fileInfo1, fileInfo2, key, asc = true) {
@@ -127,4 +128,25 @@ function flattenAndFormatObject(obj, callback) {
 	}, {})
 }
 
-export { encodeFilePath, extractFilePaths, sortCompare, genFileInfo, extractTagInfo }
+/**
+ *
+ * @param file
+ */
+function toViewerFileInfo(file) {
+	let filename = file.filename
+	let source = file.source
+	// Override the filename and source to allow deleting a file from the viewer.
+	// This is needed when the filename and source are related to the albums.
+	if (file.photosCollectionFileOriginalFilename !== undefined) {
+		filename = file.photosCollectionFileOriginalFilename
+		source = getRemoteURL() + getRootPath() + filename
+	}
+
+	return {
+		...file,
+		filename,
+		source,
+	}
+}
+
+export { encodeFilePath, extractFilePaths, sortCompare, genFileInfo, extractTagInfo, toViewerFileInfo }
diff --git a/src/views/FaceContent.vue b/src/views/FaceContent.vue
index f76574110f..29c4496e5b 100644
--- a/src/views/FaceContent.vue
+++ b/src/views/FaceContent.vue
@@ -187,6 +187,7 @@ import logger from '../services/logger.js'
 import FetchFacesMixin from '../mixins/FetchFacesMixin.js'
 import Vue from 'vue'
 import FaceMergeForm from '../components/Faces/FaceMergeForm.vue'
+import { toViewerFileInfo } from '../utils/fileUtils.js'
 
 export default {
 	name: 'FaceContent',
@@ -295,7 +296,7 @@ export default {
 			const file = this.files[fileId]
 			OCA.Viewer.open({
 				path: '/' + file.filename.split('/').slice(3).join('/'),
-				list: this.faceFileIds.map(fileId => ({ ...this.files[fileId], filename: '/' + this.files[fileId].filename.split('/').slice(3).join('/') })),
+				list: this.faceFileIds.map(fileId => toViewerFileInfo({ ...this.files[fileId], filename: '/' + this.files[fileId].filename.split('/').slice(3).join('/') })),
 				loadMore: file.loadMore ? async () => await file.loadMore(true) : () => [],
 				canLoop: file.canLoop,
 			})
diff --git a/src/views/TagContent.vue b/src/views/TagContent.vue
index 1ae067a123..8ed4a64910 100644
--- a/src/views/TagContent.vue
+++ b/src/views/TagContent.vue
@@ -56,6 +56,7 @@ import FilesListViewer from '../components/FilesListViewer.vue'
 
 import FilesSelectionMixin from '../mixins/FilesSelectionMixin.js'
 import AbortControllerMixin from '../mixins/AbortControllerMixin.js'
+import { toViewerFileInfo } from '../utils/fileUtils.js'
 
 export default {
 	name: 'TagContent',
@@ -156,7 +157,7 @@ export default {
 			const file = this.files[fileId]
 			OCA.Viewer.open({
 				path: file.filename,
-				list: this.fileIds.map(fileId => this.files[fileId]),
+				list: this.fileIds.map(fileId => toViewerFileInfo(this.files[fileId])),
 				loadMore: file.loadMore ? async () => await file.loadMore(true) : () => [],
 				canLoop: file.canLoop,
 			})
diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
index ab214062d4..798d6f9f9e 100644
--- a/src/views/Timeline.vue
+++ b/src/views/Timeline.vue
@@ -158,6 +158,7 @@ import ActionDownload from '../components/Actions/ActionDownload.vue'
 import HeaderNavigation from '../components/HeaderNavigation.vue'
 import PhotosSourceLocationsSettings from '../components/Settings/PhotosSourceLocationsSettings.vue'
 import { configChangedEvent } from '../store/userConfig.js'
+import { toViewerFileInfo } from '../utils/fileUtils.js'
 
 export default {
 	name: 'Timeline',
@@ -271,7 +272,7 @@ export default {
 			const file = this.files[fileId]
 			OCA.Viewer.open({
 				fileInfo: file,
-				list: Object.values(this.fileIdsByMonth).flat().map(fileId => this.files[fileId]),
+				list: Object.values(this.fileIdsByMonth).flat().map(fileId => toViewerFileInfo(this.files[fileId])),
 				loadMore: file.loadMore ? async () => await file.loadMore(true) : () => [],
 				canLoop: file.canLoop,
 			})
diff --git a/src/views/UnassignedFaces.vue b/src/views/UnassignedFaces.vue
index e558b618a7..e3a010dad5 100644
--- a/src/views/UnassignedFaces.vue
+++ b/src/views/UnassignedFaces.vue
@@ -105,6 +105,7 @@ import logger from '../services/logger.js'
 import FetchFacesMixin from '../mixins/FetchFacesMixin.js'
 import Vue from 'vue'
 import FaceMergeForm from '../components/Faces/FaceMergeForm.vue'
+import { toViewerFileInfo } from '../utils/fileUtils.js'
 
 export default {
 	name: 'UnassignedFaces',
@@ -183,7 +184,7 @@ export default {
 			const file = this.files[fileId]
 			OCA.Viewer.open({
 				path: '/' + file.filename.split('/').slice(3).join('/'),
-				list: this.faceFileIds.map(fileId => ({ ...this.files[fileId], filename: '/' + this.files[fileId].filename.split('/').slice(3).join('/') })),
+				list: this.faceFileIds.map(fileId => toViewerFileInfo({ ...this.files[fileId], filename: '/' + this.files[fileId].filename.split('/').slice(3).join('/') })),
 				loadMore: file.loadMore ? async () => await file.loadMore(true) : () => [],
 				canLoop: file.canLoop,
 			})