From bbe7bc56891e88e01117c37f3fa8db4959b6a7c8 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Mon, 16 Sep 2024 16:51:34 +0200
Subject: [PATCH 01/10] Add save as

---
 .../components/AppTemplates/AppWrapper.vue    |  18 +-
 .../src/components/Modals/SaveAsModal.vue     | 154 ++++++++++++++++++
 .../web-pkg/src/components/Modals/index.ts    |   1 +
 .../src/composables/actions/files/index.ts    |   1 +
 .../actions/files/useFileActionsSaveAs.ts     |  53 ++++++
 5 files changed, 223 insertions(+), 4 deletions(-)
 create mode 100644 packages/web-pkg/src/components/Modals/SaveAsModal.vue
 create mode 100644 packages/web-pkg/src/composables/actions/files/useFileActionsSaveAs.ts

diff --git a/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue b/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
index e593cb8ba32..ab3a169e1da 100644
--- a/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
+++ b/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
@@ -67,7 +67,8 @@ import {
   useFileActionsShowShares,
   FileActionOptions,
   FileAction,
-  useLoadingService
+  useLoadingService,
+  useFileActionsSaveAs
 } from '../../composables'
 import {
   Action,
@@ -161,6 +162,8 @@ export default defineComponent({
     const serverContent = ref()
     const currentContent = ref()
 
+    const { actions: saveAsActions } = useFileActionsSaveAs({ content: currentContent })
+
     const isEditor = computed(() => {
       return Boolean(props.wrappedComponent.emits?.includes('update:currentContent'))
     })
@@ -479,9 +482,16 @@ export default defineComponent({
     }
 
     const menuItemsContext = computed(() => {
-      return [...unref(openWithAppActions), ...unref(fileActionsSave)].filter((item) =>
-        item.isVisible(unref(actionOptions))
-      )
+      return [
+        ...unref(openWithAppActions),
+        ...unref(fileActionsSave),
+        ...unref(saveAsActions).map((action) => {
+          return {
+            ...action,
+            isVisible: (args: FileActionOptions) => isEditor.value && action.isVisible(args)
+          }
+        })
+      ].filter((item) => item.isVisible(unref(actionOptions)))
     })
     const menuItemsShare = computed(() => {
       return [...unref(showSharesActions), ...unref(createQuickLinkActions)].filter((item) =>
diff --git a/packages/web-pkg/src/components/Modals/SaveAsModal.vue b/packages/web-pkg/src/components/Modals/SaveAsModal.vue
new file mode 100644
index 00000000000..083fcab1631
--- /dev/null
+++ b/packages/web-pkg/src/components/Modals/SaveAsModal.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="oc-height-1-1" tabindex="0">
+    <app-loading-spinner v-if="isLoading" />
+    <iframe
+      v-show="!isLoading"
+      ref="iframeRef"
+      class="oc-width-1-1 oc-height-1-1"
+      :title="iframeTitle"
+      :src="iframeSrc"
+      tabindex="0"
+      @load="onLoad"
+    ></iframe>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onBeforeUnmount, onMounted, PropType, ref } from 'vue'
+import {
+  Modal,
+  useClientService,
+  useGetMatchingSpace,
+  useMessages,
+  useModals,
+  useRouter,
+  useThemeStore
+} from '../../composables'
+import { RouteLocationRaw } from 'vue-router'
+import AppLoadingSpinner from '../AppLoadingSpinner.vue'
+import { Resource } from '@ownclouders/web-client'
+import { unref } from 'vue'
+import { resolveFileNameDuplicate } from '../../helpers'
+import { useGettext } from 'vue3-gettext'
+
+export default defineComponent({
+  name: 'SaveAsModal',
+  components: { AppLoadingSpinner },
+  props: {
+    modal: { type: Object as PropType<Modal>, required: true },
+    parentFolderLink: { type: Object as PropType<RouteLocationRaw>, required: true },
+    originalResource: { type: Object as PropType<Resource>, required: true },
+    content: { type: String, required: true }
+  },
+  setup(props) {
+    const iframeRef = ref<HTMLIFrameElement>()
+    const isLoading = ref(true)
+    const themeStore = useThemeStore()
+    const { $gettext } = useGettext()
+    const router = useRouter()
+    const { webdav } = useClientService()
+    const { removeModal } = useModals()
+    const { showMessage, showErrorMessage } = useMessages()
+    const { getMatchingSpace } = useGetMatchingSpace()
+    const parentFolderRoute = router.resolve(props.parentFolderLink)
+
+    const iframeTitle = themeStore.currentTheme.common?.name
+    const iframeUrl = new URL(parentFolderRoute.href, window.location.origin)
+    iframeUrl.searchParams.append('hide-logo', 'true')
+    iframeUrl.searchParams.append('embed', 'true')
+    iframeUrl.searchParams.append('embed-target', 'location')
+
+    const onLoad = () => {
+      isLoading.value = false
+      unref(iframeRef).contentWindow.focus()
+    }
+
+    const onLocationPick = async ({ data }: MessageEvent) => {
+      if (data.name !== 'owncloud-embed:select') {
+        return
+      }
+
+      const destinationFolder: Resource = data.data[0]
+      const space = getMatchingSpace(destinationFolder)
+
+      let fileName = props.originalResource.name
+      const { children: existingResources } = await webdav.listFiles(space, {
+        fileId: destinationFolder.fileId
+      })
+      if (existingResources.find((resource) => resource.name === props.originalResource.name)) {
+        fileName = resolveFileNameDuplicate(
+          props.originalResource.name,
+          props.originalResource.extension,
+          existingResources
+        )
+      }
+
+      try {
+        await webdav.putFileContents(space, {
+          fileName,
+          parentFolderId: destinationFolder.id,
+          content: props.content
+        })
+        showMessage({ title: $gettext('"%{fileName}" was saved successfully', { fileName }) })
+      } catch (e) {
+        console.error(e)
+        showErrorMessage({
+          title: $gettext('Unable to save "%{fileName}"', { fileName }),
+          errors: [e]
+        })
+        console.error(e)
+      }
+
+      removeModal(props.modal.id)
+    }
+
+    const onCancel = ({ data }: MessageEvent) => {
+      if (data.name !== 'owncloud-embed:cancel') {
+        return
+      }
+
+      removeModal(props.modal.id)
+    }
+
+    onMounted(() => {
+      window.addEventListener('message', onLocationPick)
+      window.addEventListener('message', onCancel)
+    })
+
+    onBeforeUnmount(() => {
+      window.removeEventListener('message', onLocationPick)
+      window.removeEventListener('message', onCancel)
+    })
+
+    return {
+      isLoading,
+      onLoad,
+      iframeTitle,
+      iframeSrc: iframeUrl.href,
+      iframeRef,
+      onLocationPick
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.save-as-modal {
+  max-width: 80vw;
+  border: none;
+  overflow: hidden;
+
+  .oc-modal-title {
+    display: none;
+  }
+
+  .oc-modal-body {
+    padding: 0;
+
+    &-message {
+      height: 60vh;
+      margin: 0;
+    }
+  }
+}
+</style>
diff --git a/packages/web-pkg/src/components/Modals/index.ts b/packages/web-pkg/src/components/Modals/index.ts
index ab3922b7dcf..607684e2c33 100644
--- a/packages/web-pkg/src/components/Modals/index.ts
+++ b/packages/web-pkg/src/components/Modals/index.ts
@@ -2,3 +2,4 @@ export { default as ResourceConflictModal } from './ResourceConflictModal.vue'
 export { default as SpaceMoveInfoModal } from './SpaceMoveInfoModal.vue'
 export { default as EmojiPickerModal } from './EmojiPickerModal.vue'
 export { default as FilePickerModal } from './FilePickerModal.vue'
+export { default as SaveAsModal } from './SaveAsModal.vue'
diff --git a/packages/web-pkg/src/composables/actions/files/index.ts b/packages/web-pkg/src/composables/actions/files/index.ts
index cd92f89c3a5..f9b42b934a5 100644
--- a/packages/web-pkg/src/composables/actions/files/index.ts
+++ b/packages/web-pkg/src/composables/actions/files/index.ts
@@ -25,3 +25,4 @@ export * from './useFileActionsCreateNewShortcut'
 export * from './useFileActionsOpenShortcut'
 export * from './useFileActionsCreateLink'
 export * from './useFileActionsOpenWithApp'
+export * from './useFileActionsSaveAs'
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsSaveAs.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsSaveAs.ts
new file mode 100644
index 00000000000..c600ca5381e
--- /dev/null
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsSaveAs.ts
@@ -0,0 +1,53 @@
+import { FileAction, FileActionOptions } from '../types'
+import { computed, unref, Ref } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import { useAppsStore, useModals } from '../../piniaStores'
+import { storeToRefs } from 'pinia'
+import SaveAsModal from '../../../components/Modals/SaveAsModal.vue'
+import { useFolderLink } from '../../folderLink'
+import { useIsFilesAppActive } from '../helpers'
+
+export const useFileActionsSaveAs = ({ content }: { content: Ref<unknown> }) => {
+  const { $gettext } = useGettext()
+  const isFilesAppActive = useIsFilesAppActive()
+  const { dispatchModal } = useModals()
+  const appsStore = useAppsStore()
+  const { apps } = storeToRefs(appsStore)
+  const { getParentFolderLink } = useFolderLink()
+
+  const handler = ({ resources }: FileActionOptions) => {
+    const parentFolderLink = getParentFolderLink(resources[0])
+
+    dispatchModal({
+      elementClass: 'save-as-modal',
+      title: $gettext('Save as'),
+      customComponent: SaveAsModal,
+      hideActions: true,
+      customComponentAttrs: () => ({
+        content: unref(content),
+        parentFolderLink,
+        originalResource: resources[0]
+      }),
+      focusTrapInitial: false
+    })
+  }
+
+  const actions = computed((): FileAction[] => [
+    {
+      name: 'save-as',
+      icon: 'save-2',
+      handler,
+      label: () => {
+        return $gettext('Save as')
+      },
+      isVisible: ({ resources }) => {
+        return !unref(isFilesAppActive) || resources.length !== 1
+      },
+      class: 'oc-files-actions-save-as-trigger'
+    }
+  ])
+
+  return {
+    actions
+  }
+}

From 0fbbd11b7bdce348a07e180a35a6122b4ad05fd1 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 17 Sep 2024 14:47:10 +0200
Subject: [PATCH 02/10] Disable trash in embed mode

---
 packages/web-app-files/src/index.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/index.ts b/packages/web-app-files/src/index.ts
index c84091314ea..c0f369dd1b5 100644
--- a/packages/web-app-files/src/index.ts
+++ b/packages/web-app-files/src/index.ts
@@ -12,6 +12,7 @@ import {
   ApplicationInformation,
   defineWebApplication,
   useCapabilityStore,
+  useEmbedMode,
   useSpacesStore,
   useUserStore
 } from '@ownclouders/web-pkg'
@@ -22,7 +23,7 @@ import { AppNavigationItem } from '@ownclouders/web-pkg'
 // dirty: importing view from other extension within project
 import SearchResults from '../../web-app-search/src/views/List.vue'
 import { isPersonalSpaceResource, isShareSpaceResource } from '@ownclouders/web-client'
-import { ComponentCustomProperties } from 'vue'
+import { ComponentCustomProperties, unref } from 'vue'
 import { extensionPoints } from './extensionPoints'
 
 // just a dummy function to trick gettext tools
@@ -42,6 +43,7 @@ export const navItems = (context: ComponentCustomProperties): AppNavigationItem[
   const spacesStores = useSpacesStore()
   const userStore = useUserStore()
   const capabilityStore = useCapabilityStore()
+  const { isEnabled: isEmbedModeEnabled } = useEmbedMode()
 
   return [
     {
@@ -117,7 +119,11 @@ export const navItems = (context: ComponentCustomProperties): AppNavigationItem[
       },
       activeFor: [{ path: `/${appInfo.id}/trash` }],
       isVisible() {
-        return capabilityStore.davTrashbin === '1.0' && capabilityStore.filesUndelete
+        return (
+          capabilityStore.davTrashbin === '1.0' &&
+          capabilityStore.filesUndelete &&
+          !unref(isEmbedModeEnabled)
+        )
       },
       priority: 50
     }

From 1e9812a8a13e1d232876ee2eb1a363d61edc9be3 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 17 Sep 2024 14:58:39 +0200
Subject: [PATCH 03/10] Fix bug where hide-logo query is not persistent

---
 .../web-pkg/src/composables/piniaStores/config/config.ts     | 3 ++-
 packages/web-pkg/src/composables/piniaStores/config/types.ts | 3 ++-
 packages/web-runtime/src/components/Topbar/TopBar.vue        | 5 +----
 packages/web-runtime/src/container/bootstrap.ts              | 3 ++-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/web-pkg/src/composables/piniaStores/config/config.ts b/packages/web-pkg/src/composables/piniaStores/config/config.ts
index 201c1c3d583..5511545eb9a 100644
--- a/packages/web-pkg/src/composables/piniaStores/config/config.ts
+++ b/packages/web-pkg/src/composables/piniaStores/config/config.ts
@@ -36,7 +36,8 @@ const defaultOptions = {
   },
   runningOnEos: false,
   tokenStorageLocal: true,
-  userListRequiresFilter: false
+  userListRequiresFilter: false,
+  hideLogo: false
 } satisfies Partial<OptionsConfig>
 
 export const useConfigStore = defineStore('config', () => {
diff --git a/packages/web-pkg/src/composables/piniaStores/config/types.ts b/packages/web-pkg/src/composables/piniaStores/config/types.ts
index 7480306d819..3f3c56a6bb8 100644
--- a/packages/web-pkg/src/composables/piniaStores/config/types.ts
+++ b/packages/web-pkg/src/composables/piniaStores/config/types.ts
@@ -116,7 +116,8 @@ const OptionsConfigSchema = z.object({
       companionUrl: z.string().optional()
     })
     .optional(),
-  userListRequiresFilter: z.boolean().optional()
+  userListRequiresFilter: z.boolean().optional(),
+  hideLogo: z.boolean().optional()
 })
 
 export type OptionsConfig = z.infer<typeof OptionsConfigSchema>
diff --git a/packages/web-runtime/src/components/Topbar/TopBar.vue b/packages/web-runtime/src/components/Topbar/TopBar.vue
index 3791759eef7..b2510fc663c 100644
--- a/packages/web-runtime/src/components/Topbar/TopBar.vue
+++ b/packages/web-runtime/src/components/Topbar/TopBar.vue
@@ -98,10 +98,7 @@ export default {
     })
 
     const logoWidth = ref('150px')
-    const hideLogoQuery = useRouteQuery('hide-logo', 'false')
-    const hideLogo = computed(() => {
-      return queryItemAsString(unref(hideLogoQuery)) === 'true'
-    })
+    const hideLogo = computed(() => unref(configOptions).hideLogo)
 
     const isNotificationBellEnabled = computed(() => {
       return (
diff --git a/packages/web-runtime/src/container/bootstrap.ts b/packages/web-runtime/src/container/bootstrap.ts
index 4cb26dc3787..5e12f0e85c8 100644
--- a/packages/web-runtime/src/container/bootstrap.ts
+++ b/packages/web-runtime/src/container/bootstrap.ts
@@ -149,7 +149,8 @@ export const announceConfiguration = async ({
 
   rawConfig.options = {
     ...rawConfig.options,
-    embed: { ...rawConfig.options?.embed, ...embedConfigFromQuery }
+    embed: { ...rawConfig.options?.embed, ...embedConfigFromQuery },
+    hideLogo: getQueryParam('hide-logo') === 'true'
   }
 
   configStore.loadConfig(rawConfig)

From 9384c3c9f246592048db6c292f919a9cf19d0bfb Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Wed, 18 Sep 2024 11:12:08 +0200
Subject: [PATCH 04/10] Add name input

---
 .../components/EmbedActions/EmbedActions.vue  | 135 ++++++++++++------
 .../EmbedActions/EmbedActions.spec.ts         |   1 +
 .../src/components/Modals/SaveAsModal.vue     |  15 +-
 .../src/composables/embedMode/useEmbedMode.ts |  15 ++
 .../composables/piniaStores/config/types.ts   |   4 +-
 .../src/components/Topbar/TopBar.vue          |   2 -
 .../web-runtime/src/container/bootstrap.ts    |  12 ++
 7 files changed, 135 insertions(+), 49 deletions(-)

diff --git a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
index 0cf7bd383e2..0e2b7af4b14 100644
--- a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
+++ b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
@@ -1,39 +1,52 @@
 <template>
-  <section class="files-embed-actions">
-    <oc-button
-      data-testid="button-cancel"
-      appearance="raw-inverse"
-      variation="brand"
-      @click="emitCancel"
-      >{{ $gettext('Cancel') }}
-    </oc-button>
-    <oc-button
-      v-if="!isLocationPicker && !isFilePicker"
-      key="btn-share"
-      data-testid="button-share"
-      variation="inverse"
-      appearance="filled"
-      :disabled="
-        areSelectActionsDisabled || !createLinkAction.isVisible({ resources: selectedFiles, space })
-      "
-      @click="createLinkAction.handler({ resources: selectedFiles, space })"
-      >{{ $gettext('Share link(s)') }}
-    </oc-button>
-    <oc-button
-      v-if="!isFilePicker"
-      data-testid="button-select"
-      variation="inverse"
-      appearance="filled"
-      :disabled="areSelectActionsDisabled"
-      @click="emitSelect"
-      >{{ selectLabel }}
-    </oc-button>
+  <section class="files-embed-actions oc-width-1-1 oc-flex oc-flex-middle oc-flex-between oc-my-s">
+    <oc-text-input
+      v-if="chooseFileName"
+      v-model="fileName"
+      class="files-embed-actions-file-name oc-flex oc-flex-row oc-flex-middle"
+      :selection-range="fileNameInputSelectionRange"
+      :label="$gettext('File name')"
+    />
+
+    <div class="files-embed-actions-buttons oc-flex oc-flex-middle">
+      <oc-button
+        class="oc-mr-s"
+        data-testid="button-cancel"
+        appearance="raw-inverse"
+        variation="brand"
+        @click="emitCancel"
+        >{{ $gettext('Cancel') }}
+      </oc-button>
+      <oc-button
+        v-if="!isLocationPicker && !isFilePicker"
+        key="btn-share"
+        data-testid="button-share"
+        variation="inverse"
+        appearance="filled"
+        :disabled="
+          areSelectActionsDisabled ||
+          !createLinkAction.isVisible({ resources: selectedFiles, space })
+        "
+        @click="createLinkAction.handler({ resources: selectedFiles, space })"
+        >{{ $gettext('Share link(s)') }}
+      </oc-button>
+      <oc-button
+        v-if="!isFilePicker"
+        data-testid="button-select"
+        variation="inverse"
+        appearance="filled"
+        :disabled="areSelectActionsDisabled"
+        @click="emitSelect"
+        >{{ selectLabel }}
+      </oc-button>
+    </div>
   </section>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, unref } from 'vue'
+import { computed, defineComponent, ref, unref } from 'vue'
 import {
+  embedModeLocationPickMessageData,
   FileAction,
   useAbility,
   useEmbedMode,
@@ -49,12 +62,18 @@ export default defineComponent({
   setup() {
     const ability = useAbility()
     const { $gettext } = useGettext()
-    const { isLocationPicker, isFilePicker, postMessage } = useEmbedMode()
+    const {
+      isLocationPicker,
+      isFilePicker,
+      postMessage,
+      chooseFileName,
+      chooseFileNameSuggestion
+    } = useEmbedMode()
     const spacesStore = useSpacesStore()
     const { currentSpace: space } = storeToRefs(spacesStore)
-
     const resourcesStore = useResourcesStore()
     const { currentFolder, selectedResources } = storeToRefs(resourcesStore)
+    const fileName = ref(unref(chooseFileNameSuggestion))
 
     const selectedFiles = computed<Resource[]>(() => {
       if (isLocationPicker.value) {
@@ -75,7 +94,19 @@ export default defineComponent({
       isLocationPicker.value ? $gettext('Choose') : $gettext('Attach as copy')
     )
 
+    const fileNameInputSelectionRange = computed(() => {
+      return [0, unref(fileName).split('.')[0].length] as [number, number]
+    })
+
     const emitSelect = (): void => {
+      if (unref(chooseFileName)) {
+        postMessage<embedModeLocationPickMessageData>('owncloud-embed:select', {
+          resources: JSON.parse(JSON.stringify(selectedFiles.value)),
+          fileName: unref(fileName)
+        })
+      }
+
+      // TODO: adjust type to embedModeLocationPickMessageData later (breaking)
       postMessage<Resource[]>(
         'owncloud-embed:select',
         JSON.parse(JSON.stringify(selectedFiles.value))
@@ -87,6 +118,8 @@ export default defineComponent({
     }
 
     return {
+      chooseFileName,
+      chooseFileNameSuggestion,
       selectedFiles,
       areSelectActionsDisabled,
       canCreatePublicLinks,
@@ -96,22 +129,40 @@ export default defineComponent({
       emitCancel,
       emitSelect,
       space,
-      createLinkAction
+      createLinkAction,
+      fileName,
+      fileNameInputSelectionRange
     }
   }
 })
 </script>
 
-<style scoped>
+<style lang="scss">
 .files-embed-actions {
-  align-items: center;
-  box-sizing: border-box;
-  display: flex;
   flex-wrap: wrap;
-  gap: var(--oc-space-medium);
-  justify-content: flex-end;
-  padding: var(--oc-space-medium) 0;
-  padding-right: var(--oc-space-small);
-  width: 100%;
+  gap: var(--oc-space-small);
+
+  color: var(--oc-color-text-inverse);
+
+  &-file-name {
+    margin-left: 230px;
+    gap: var(--oc-space-small);
+
+    input {
+      width: 400px;
+    }
+
+    @media (max-width: $oc-breakpoint-medium-default) {
+      margin-left: 0;
+
+      input {
+        width: auto;
+      }
+    }
+  }
+
+  &-buttons {
+    margin-left: auto;
+  }
 }
 </style>
diff --git a/packages/web-app-files/tests/unit/components/EmbedActions/EmbedActions.spec.ts b/packages/web-app-files/tests/unit/components/EmbedActions/EmbedActions.spec.ts
index 2a0257aa3d5..765e5937260 100644
--- a/packages/web-app-files/tests/unit/components/EmbedActions/EmbedActions.spec.ts
+++ b/packages/web-app-files/tests/unit/components/EmbedActions/EmbedActions.spec.ts
@@ -134,6 +134,7 @@ function getWrapper(
     mock<ReturnType<typeof useEmbedMode>>({
       isLocationPicker: ref(isLocationPicker),
       isFilePicker: ref(isFilePicker),
+      chooseFileName: ref(false),
       postMessage: postMessageMock
     })
   )
diff --git a/packages/web-pkg/src/components/Modals/SaveAsModal.vue b/packages/web-pkg/src/components/Modals/SaveAsModal.vue
index 083fcab1631..ad6b05d05fc 100644
--- a/packages/web-pkg/src/components/Modals/SaveAsModal.vue
+++ b/packages/web-pkg/src/components/Modals/SaveAsModal.vue
@@ -16,6 +16,7 @@
 <script lang="ts">
 import { defineComponent, onBeforeUnmount, onMounted, PropType, ref } from 'vue'
 import {
+  embedModeLocationPickMessageData,
   Modal,
   useClientService,
   useGetMatchingSpace,
@@ -57,6 +58,8 @@ export default defineComponent({
     iframeUrl.searchParams.append('hide-logo', 'true')
     iframeUrl.searchParams.append('embed', 'true')
     iframeUrl.searchParams.append('embed-target', 'location')
+    iframeUrl.searchParams.append('embed-choose-file-name', 'true')
+    iframeUrl.searchParams.append('embed-choose-file-name-suggestion', props.originalResource.name)
 
     const onLoad = () => {
       isLoading.value = false
@@ -68,16 +71,20 @@ export default defineComponent({
         return
       }
 
-      const destinationFolder: Resource = data.data[0]
+      let { resources, fileName }: embedModeLocationPickMessageData = data.data
+
+      const destinationFolder: Resource = resources[0]
       const space = getMatchingSpace(destinationFolder)
 
-      let fileName = props.originalResource.name
       const { children: existingResources } = await webdav.listFiles(space, {
         fileId: destinationFolder.fileId
       })
-      if (existingResources.find((resource) => resource.name === props.originalResource.name)) {
+      const resourceAlreadyExists = existingResources.find(
+        (existingResource) => existingResource.name === fileName
+      )
+      if (resourceAlreadyExists) {
         fileName = resolveFileNameDuplicate(
-          props.originalResource.name,
+          fileName,
           props.originalResource.extension,
           existingResources
         )
diff --git a/packages/web-pkg/src/composables/embedMode/useEmbedMode.ts b/packages/web-pkg/src/composables/embedMode/useEmbedMode.ts
index dbd4286da4b..99c9f9a157b 100644
--- a/packages/web-pkg/src/composables/embedMode/useEmbedMode.ts
+++ b/packages/web-pkg/src/composables/embedMode/useEmbedMode.ts
@@ -8,6 +8,11 @@ export interface embedModeFilePickMessageData {
   locationQuery: LocationQuery
 }
 
+export interface embedModeLocationPickMessageData {
+  resources: Resource[]
+  fileName?: string
+}
+
 export const useEmbedMode = () => {
   const configStore = useConfigStore()
 
@@ -17,6 +22,14 @@ export const useEmbedMode = () => {
     return configStore.options.embed?.target === 'location'
   })
 
+  const chooseFileName = computed(() => {
+    return configStore.options.embed?.chooseFileName
+  })
+
+  const chooseFileNameSuggestion = computed(() => {
+    return configStore.options.embed?.chooseFileNameSuggestion
+  })
+
   const isFilePicker = computed(() => {
     return configStore.options.embed?.target === 'file'
   })
@@ -56,6 +69,8 @@ export const useEmbedMode = () => {
   return {
     isEnabled,
     isLocationPicker,
+    chooseFileName,
+    chooseFileNameSuggestion,
     isFilePicker,
     messagesTargetOrigin,
     isDelegatingAuthentication,
diff --git a/packages/web-pkg/src/composables/piniaStores/config/types.ts b/packages/web-pkg/src/composables/piniaStores/config/types.ts
index 3f3c56a6bb8..9147608bca6 100644
--- a/packages/web-pkg/src/composables/piniaStores/config/types.ts
+++ b/packages/web-pkg/src/composables/piniaStores/config/types.ts
@@ -85,7 +85,9 @@ const OptionsConfigSchema = z.object({
       messagesOrigin: z.string().optional(),
       delegateAuthentication: z.boolean().optional(),
       delegateAuthenticationOrigin: z.string().optional(),
-      fileTypes: z.array(z.string()).optional()
+      fileTypes: z.array(z.string()).optional(),
+      chooseFileName: z.boolean().optional(),
+      chooseFileNameSuggestion: z.string().optional()
     })
     .optional(),
   feedbackLink: z
diff --git a/packages/web-runtime/src/components/Topbar/TopBar.vue b/packages/web-runtime/src/components/Topbar/TopBar.vue
index b2510fc663c..5bd0af009c3 100644
--- a/packages/web-runtime/src/components/Topbar/TopBar.vue
+++ b/packages/web-runtime/src/components/Topbar/TopBar.vue
@@ -50,14 +50,12 @@ import {
   ApplicationInformation,
   AppMenuItemExtension,
   CustomComponentTarget,
-  queryItemAsString,
   useAuthStore,
   useCapabilityStore,
   useConfigStore,
   useEmbedMode,
   useExtensionRegistry,
   useOpenEmptyEditor,
-  useRouteQuery,
   useRouter,
   useThemeStore
 } from '@ownclouders/web-pkg'
diff --git a/packages/web-runtime/src/container/bootstrap.ts b/packages/web-runtime/src/container/bootstrap.ts
index 5e12f0e85c8..64160e561d9 100644
--- a/packages/web-runtime/src/container/bootstrap.ts
+++ b/packages/web-runtime/src/container/bootstrap.ts
@@ -94,6 +94,18 @@ const getEmbedConfigFromQuery = (
     config.target = embedTarget
   }
 
+  // Can enable file name input for location picker
+  const embedChooseFileName = getQueryParam('embed-choose-file-name')
+
+  config.chooseFileName = embedChooseFileName === 'true'
+
+  // Initial value for file name input in location picker
+  const embedChooseFileNameSuggestion = getQueryParam('embed-choose-file-name-suggestion')
+
+  if (embedChooseFileNameSuggestion) {
+    config.chooseFileNameSuggestion = embedChooseFileNameSuggestion
+  }
+
   const embedFileTypes = getQueryParam('embed-file-types')
 
   if (embedFileTypes) {

From 6fc28870603cd826f7fa59038b823b98c967f5cd Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Thu, 19 Sep 2024 13:02:40 +0200
Subject: [PATCH 05/10] Add tests

---
 .../EmbedActions/EmbedActions.spec.ts         |  41 ++++++-
 .../components/Modals/SaveAsModal.spec.ts     | 113 ++++++++++++++++++
 2 files changed, 151 insertions(+), 3 deletions(-)
 create mode 100644 packages/web-pkg/tests/unit/components/Modals/SaveAsModal.spec.ts

diff --git a/packages/web-app-files/tests/unit/components/EmbedActions/EmbedActions.spec.ts b/packages/web-app-files/tests/unit/components/EmbedActions/EmbedActions.spec.ts
index 765e5937260..3bb133d547b 100644
--- a/packages/web-app-files/tests/unit/components/EmbedActions/EmbedActions.spec.ts
+++ b/packages/web-app-files/tests/unit/components/EmbedActions/EmbedActions.spec.ts
@@ -14,7 +14,8 @@ vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
 const selectors = Object.freeze({
   btnSelect: '[data-testid="button-select"]',
   btnCancel: '[data-testid="button-cancel"]',
-  btnShare: '[data-testid="button-share"]'
+  btnShare: '[data-testid="button-share"]',
+  fileNameInput: '.files-embed-actions-file-name'
 })
 
 describe('EmbedActions', () => {
@@ -60,6 +61,37 @@ describe('EmbedActions', () => {
 
       expect(mocks.postMessageMock).toHaveBeenCalledWith('owncloud-embed:select', [{ id: '1' }])
     })
+    it('should display the file name input when chooseFileName is configured', () => {
+      const { wrapper, mocks } = getWrapper({
+        currentFolder: { id: '1' } as Resource,
+        isLocationPicker: true,
+        chooseFileName: true
+      })
+
+      expect(wrapper.find(selectors.fileNameInput).exists()).toBe(true)
+    })
+    it('should hide the file name input when chooseFileName is not configured', () => {
+      const { wrapper, mocks } = getWrapper({
+        currentFolder: { id: '1' } as Resource,
+        isLocationPicker: true
+      })
+
+      expect(wrapper.find(selectors.fileNameInput).exists()).toBe(false)
+    })
+    it('should emit select event with currentFolder as selected resource and fileName when select action is triggered and chooseFileName is configured', async () => {
+      const { wrapper, mocks } = getWrapper({
+        currentFolder: { id: '1' } as Resource,
+        isLocationPicker: true,
+        chooseFileName: true
+      })
+
+      await wrapper.find(selectors.btnSelect).trigger('click')
+
+      expect(mocks.postMessageMock).toHaveBeenCalledWith('owncloud-embed:select', {
+        fileName: 'file.txt',
+        resources: [{ id: '1' }]
+      })
+    })
   })
 
   describe('cancel action', () => {
@@ -118,13 +150,15 @@ function getWrapper(
     currentFolder = undefined,
     createLinksActionEnabled = true,
     isLocationPicker = false,
-    isFilePicker = false
+    isFilePicker = false,
+    chooseFileName = false
   }: {
     selectedIds?: string[]
     currentFolder?: Resource
     createLinksActionEnabled?: boolean
     isLocationPicker?: boolean
     isFilePicker?: boolean
+    chooseFileName?: boolean
   } = {
     selectedIds: []
   }
@@ -134,7 +168,8 @@ function getWrapper(
     mock<ReturnType<typeof useEmbedMode>>({
       isLocationPicker: ref(isLocationPicker),
       isFilePicker: ref(isFilePicker),
-      chooseFileName: ref(false),
+      chooseFileName: ref(chooseFileName),
+      chooseFileNameSuggestion: ref('file.txt'),
       postMessage: postMessageMock
     })
   )
diff --git a/packages/web-pkg/tests/unit/components/Modals/SaveAsModal.spec.ts b/packages/web-pkg/tests/unit/components/Modals/SaveAsModal.spec.ts
new file mode 100644
index 00000000000..1c2c65a1c43
--- /dev/null
+++ b/packages/web-pkg/tests/unit/components/Modals/SaveAsModal.spec.ts
@@ -0,0 +1,113 @@
+import SaveAsModal from '../../../../src/components/Modals/SaveAsModal.vue'
+import { defaultComponentMocks, defaultPlugins, nextTicks, shallowMount } from 'web-test-helpers'
+import { mock, mockDeep } from 'vitest-mock-extended'
+import { Resource, SpaceResource } from '@ownclouders/web-client'
+import { ListFilesResult } from '@ownclouders/web-client/src'
+import { Modal, useMessages, useModals } from '../../../../src/composables/piniaStores'
+import { ClientService } from '../../../../src'
+
+describe('SaveAsModal', () => {
+  describe('iframe', () => {
+    it('sets the iframe src correctly', () => {
+      const { wrapper } = getWrapper()
+      expect(wrapper.vm.iframeSrc).toEqual(
+        'http://localhost:3000/files-spaces-generic?hide-logo=true&embed=true&embed-target=location&embed-choose-file-name=true&embed-choose-file-name-suggestion=test.txt'
+      )
+    })
+    it('sets the iframe title correctly', () => {
+      const { wrapper } = getWrapper()
+      expect(wrapper.vm.iframeTitle).toEqual('ownCloud')
+    })
+  })
+  describe('method "onLocationPick"', () => {
+    it('does nothing if the event message does not equal "owncloud-embed:select"', () => {
+      const { mocks } = getWrapper()
+
+      expect(mocks.$clientService.webdav.listFiles).not.toHaveBeenCalled()
+      expect(mocks.$clientService.webdav.putFileContents).not.toHaveBeenCalled()
+    })
+    it('saves the file when message does equal "owncloud-embed:select"', async () => {
+      const { wrapper, mocks } = getWrapper()
+      const modalStore = useModals()
+      const messageStore = useMessages()
+
+      mocks.$clientService.webdav.putFileContents.mockResolvedValue(mock<Resource>())
+
+      wrapper.vm.onLocationPick(
+        mock<MessageEvent>({
+          data: {
+            name: 'owncloud-embed:select',
+            data: {
+              resources: [mock<Resource>({ storageId: '1' })],
+              fileName: 'test with new name.txt'
+            }
+          }
+        })
+      )
+
+      await nextTicks(2)
+      expect(messageStore.showMessage).toHaveBeenCalled()
+      expect(modalStore.removeModal).toHaveBeenCalled()
+    })
+    it('shows an error message when the file when message does equal "owncloud-embed:select and request fails"', async () => {
+      console.error = vi.fn()
+      const { wrapper, mocks } = getWrapper()
+      const modalStore = useModals()
+      const messageStore = useMessages()
+
+      mocks.$clientService.webdav.putFileContents.mockRejectedValue(new Error(''))
+
+      wrapper.vm.onLocationPick(
+        mock<MessageEvent>({
+          data: {
+            name: 'owncloud-embed:select',
+            data: {
+              resources: [mock<Resource>({ storageId: '1' })],
+              fileName: 'test with new name.txt'
+            }
+          }
+        })
+      )
+
+      await nextTicks(2)
+      expect(messageStore.showErrorMessage).toHaveBeenCalled()
+      expect(modalStore.removeModal).toHaveBeenCalled()
+    })
+  })
+})
+
+function getWrapper() {
+  const $clientService = mockDeep<ClientService>()
+  const mocks = { ...defaultComponentMocks(), $clientService }
+  mocks.$clientService.webdav.listFiles.mockResolvedValue(mock<ListFilesResult>({ children: [] }))
+
+  return {
+    mocks,
+    wrapper: shallowMount(SaveAsModal, {
+      props: {
+        modal: mock<Modal>(),
+        content: 'some text',
+        originalResource: { id: '1', path: '/test.txt', name: 'test.txt', extension: 'txt' },
+        parentFolderLink: {
+          name: 'files-spaces-generic',
+          params: {
+            driveAliasAndItem: 'personal/admin'
+          },
+          query: {
+            fileId:
+              '61dcd768-0bc4-4dd5-975a-2fe2bc9bc664$f1e4f3ec-1f24-460d-9f9a-4416ab6ddb6b!36cce768-8c9d-45e4-9c7d-4c9611962a75'
+          }
+        }
+      },
+      global: {
+        plugins: [
+          ...defaultPlugins({
+            piniaOptions: { spacesState: { spaces: [mock<SpaceResource>({ id: '1' })] } }
+          })
+        ],
+        mocks,
+        provide: mocks
+      }
+    })
+  }
+}

From 34ec77823b9a38497aae744028239334f6143875 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Thu, 19 Sep 2024 14:03:26 +0200
Subject: [PATCH 06/10] Add changelog item

---
 .../unreleased/enhancement-app-top-bar-save-as-function    | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 changelog/unreleased/enhancement-app-top-bar-save-as-function

diff --git a/changelog/unreleased/enhancement-app-top-bar-save-as-function b/changelog/unreleased/enhancement-app-top-bar-save-as-function
new file mode 100644
index 00000000000..b3498862854
--- /dev/null
+++ b/changelog/unreleased/enhancement-app-top-bar-save-as-function
@@ -0,0 +1,7 @@
+Enhancement: Add a "Save As" function to the app top bar
+
+We've added a "Save As" function to the app top bar.
+This allows the user to save a file with a new name or in a different location out of our regular editors.
+
+https://github.com/owncloud/web/pull/11586
+https://github.com/owncloud/web/issues/11525

From 253ce66043f8bac4d261c9baaa4a7c51b00ddbce Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Thu, 19 Sep 2024 14:08:49 +0200
Subject: [PATCH 07/10] Ehance documentation

---
 docs/embed-mode/_index.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/embed-mode/_index.md b/docs/embed-mode/_index.md
index 27511139fa1..8edaa87253b 100644
--- a/docs/embed-mode/_index.md
+++ b/docs/embed-mode/_index.md
@@ -61,6 +61,8 @@ To maintain uniformity and ease of handling, each event encapsulates the same st
 ## Location picker
 
 By default, the Embed mode allows users to select resources. In certain cases (e.g. uploading a file), this needs to be changed to allow selecting a location. This can be achieved by running the embed mode with additional parameter `embed-target=location`. With this parameter, resource selection is disabled and the selected resources array always includes the current folder as the only item.
+In special scenarios you also want the user to set a file name, this can be archived by adding the `embed-choose-file-name=true` parameter, or if you also want to set a default file name, you can use `default-file-name-suggestion=my file.text`.
+
 
 ### Example
 

From a0385c52b85d0b1173cfe83894568bb7ee2b4732 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Thu, 19 Sep 2024 14:12:46 +0200
Subject: [PATCH 08/10] Fix: wrong import

---
 .../web-pkg/tests/unit/components/Modals/SaveAsModal.spec.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-pkg/tests/unit/components/Modals/SaveAsModal.spec.ts b/packages/web-pkg/tests/unit/components/Modals/SaveAsModal.spec.ts
index 1c2c65a1c43..ab24bb16e6a 100644
--- a/packages/web-pkg/tests/unit/components/Modals/SaveAsModal.spec.ts
+++ b/packages/web-pkg/tests/unit/components/Modals/SaveAsModal.spec.ts
@@ -2,7 +2,7 @@ import SaveAsModal from '../../../../src/components/Modals/SaveAsModal.vue'
 import { defaultComponentMocks, defaultPlugins, nextTicks, shallowMount } from 'web-test-helpers'
 import { mock, mockDeep } from 'vitest-mock-extended'
 import { Resource, SpaceResource } from '@ownclouders/web-client'
-import { ListFilesResult } from '@ownclouders/web-client/src'
+import { ListFilesResult } from '@ownclouders/web-client/webdav'
 import { Modal, useMessages, useModals } from '../../../../src/composables/piniaStores'
 import { ClientService } from '../../../../src'
 

From c096a95e40857aece497d1630ece11e8c822dcf0 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Thu, 19 Sep 2024 16:31:52 +0200
Subject: [PATCH 09/10] Fix: snackbar overlying embed actions

---
 .../src/components/EmbedActions/EmbedActions.vue             | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
index 0e2b7af4b14..e3abf4f4e62 100644
--- a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
+++ b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
@@ -139,11 +139,12 @@ export default defineComponent({
 
 <style lang="scss">
 .files-embed-actions {
+  // Prevent .snackbar from overlapping the actions
+  z-index: calc(var(--oc-z-index-modal) + 2);
+  color: var(--oc-color-text-inverse);
   flex-wrap: wrap;
   gap: var(--oc-space-small);
 
-  color: var(--oc-color-text-inverse);
-
   &-file-name {
     margin-left: 230px;
     gap: var(--oc-space-small);

From e310c6bb024ca31f46e544034e2c7e43896f6f3b Mon Sep 17 00:00:00 2001
From: Alex <jan.alexander.ackermann@outlook.com>
Date: Fri, 20 Sep 2024 14:14:25 +0200
Subject: [PATCH 10/10] Open in new tab

Co-authored-by: Benedikt Kulmann <benedikt@kulmann.biz>
---
 .../enhancement-app-top-bar-save-as-function  |  2 +-
 docs/embed-mode/_index.md                     |  2 +-
 .../components/EmbedActions/EmbedActions.vue  |  7 +-
 .../EmbedActions/EmbedActions.spec.ts         | 27 +++++-
 .../src/components/Modals/SaveAsModal.vue     | 96 ++++++++++++++-----
 .../src/composables/embedMode/useEmbedMode.ts |  1 +
 .../components/Modals/SaveAsModal.spec.ts     |  9 +-
 7 files changed, 112 insertions(+), 32 deletions(-)

diff --git a/changelog/unreleased/enhancement-app-top-bar-save-as-function b/changelog/unreleased/enhancement-app-top-bar-save-as-function
index b3498862854..ab46a14c9f3 100644
--- a/changelog/unreleased/enhancement-app-top-bar-save-as-function
+++ b/changelog/unreleased/enhancement-app-top-bar-save-as-function
@@ -1,7 +1,7 @@
 Enhancement: Add a "Save As" function to the app top bar
 
 We've added a "Save As" function to the app top bar.
-This allows the user to save a file with a new name or in a different location out of our regular editors.
+This allows the user to save a file with a new name or in a different location with our regular editors.
 
 https://github.com/owncloud/web/pull/11586
 https://github.com/owncloud/web/issues/11525
diff --git a/docs/embed-mode/_index.md b/docs/embed-mode/_index.md
index 8edaa87253b..7eb37cc2723 100644
--- a/docs/embed-mode/_index.md
+++ b/docs/embed-mode/_index.md
@@ -61,7 +61,7 @@ To maintain uniformity and ease of handling, each event encapsulates the same st
 ## Location picker
 
 By default, the Embed mode allows users to select resources. In certain cases (e.g. uploading a file), this needs to be changed to allow selecting a location. This can be achieved by running the embed mode with additional parameter `embed-target=location`. With this parameter, resource selection is disabled and the selected resources array always includes the current folder as the only item.
-In special scenarios you also want the user to set a file name, this can be archived by adding the `embed-choose-file-name=true` parameter, or if you also want to set a default file name, you can use `default-file-name-suggestion=my file.text`.
+In special scenarios you also want the user to set a file name, this can be achieved by adding the `embed-choose-file-name=true` parameter, or if you also want to set a default file name, you can use `embed-choose-file-name-suggestion=my file.text`.
 
 
 ### Example
diff --git a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
index e3abf4f4e62..ca7eece48fb 100644
--- a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
+++ b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
@@ -20,6 +20,7 @@
       <oc-button
         v-if="!isLocationPicker && !isFilePicker"
         key="btn-share"
+        class="oc-mr-s"
         data-testid="button-share"
         variation="inverse"
         appearance="filled"
@@ -48,10 +49,12 @@ import { computed, defineComponent, ref, unref } from 'vue'
 import {
   embedModeLocationPickMessageData,
   FileAction,
+  routeToContextQuery,
   useAbility,
   useEmbedMode,
   useFileActionsCreateLink,
   useResourcesStore,
+  useRouter,
   useSpacesStore
 } from '@ownclouders/web-pkg'
 import { Resource } from '@ownclouders/web-client'
@@ -70,6 +73,7 @@ export default defineComponent({
       chooseFileNameSuggestion
     } = useEmbedMode()
     const spacesStore = useSpacesStore()
+    const router = useRouter()
     const { currentSpace: space } = storeToRefs(spacesStore)
     const resourcesStore = useResourcesStore()
     const { currentFolder, selectedResources } = storeToRefs(resourcesStore)
@@ -102,7 +106,8 @@ export default defineComponent({
       if (unref(chooseFileName)) {
         postMessage<embedModeLocationPickMessageData>('owncloud-embed:select', {
           resources: JSON.parse(JSON.stringify(selectedFiles.value)),
-          fileName: unref(fileName)
+          fileName: unref(fileName),
+          locationQuery: JSON.parse(JSON.stringify(routeToContextQuery(unref(router.currentRoute))))
         })
       }
 
diff --git a/packages/web-app-files/tests/unit/components/EmbedActions/EmbedActions.spec.ts b/packages/web-app-files/tests/unit/components/EmbedActions/EmbedActions.spec.ts
index 3bb133d547b..f9ad9f350c0 100644
--- a/packages/web-app-files/tests/unit/components/EmbedActions/EmbedActions.spec.ts
+++ b/packages/web-app-files/tests/unit/components/EmbedActions/EmbedActions.spec.ts
@@ -1,4 +1,9 @@
-import { defaultPlugins, shallowMount } from 'web-test-helpers'
+import {
+  defaultComponentMocks,
+  defaultPlugins,
+  RouteLocation,
+  shallowMount
+} from 'web-test-helpers'
 import EmbedActions from '../../../../src/components/EmbedActions/EmbedActions.vue'
 import { FileAction, useEmbedMode, useFileActionsCreateLink } from '@ownclouders/web-pkg'
 import { mock } from 'vitest-mock-extended'
@@ -89,7 +94,11 @@ describe('EmbedActions', () => {
 
       expect(mocks.postMessageMock).toHaveBeenCalledWith('owncloud-embed:select', {
         fileName: 'file.txt',
-        resources: [{ id: '1' }]
+        resources: [{ id: '1' }],
+        locationQuery: {
+          contextRouteName: 'files-spaces-generic',
+          contextRouteQuery: {}
+        }
       })
     })
   })
@@ -187,11 +196,23 @@ function getWrapper(
   )
 
   const resources = selectedIds.map((id) => ({ id })) as Resource[]
+  const mocks = {
+    ...defaultComponentMocks({
+      currentRoute: mock<RouteLocation>({
+        name: 'files-spaces-generic',
+        path: '/files/spaces/personal/admin'
+      })
+    }),
+    createLinkHandlerMock,
+    postMessageMock
+  }
 
   return {
-    mocks: { createLinkHandlerMock, postMessageMock },
+    mocks,
     wrapper: shallowMount(EmbedActions, {
       global: {
+        mocks,
+        provide: mocks,
         stubs: { OcButton: false },
         plugins: [
           ...defaultPlugins({
diff --git a/packages/web-pkg/src/components/Modals/SaveAsModal.vue b/packages/web-pkg/src/components/Modals/SaveAsModal.vue
index ad6b05d05fc..612ebd34304 100644
--- a/packages/web-pkg/src/components/Modals/SaveAsModal.vue
+++ b/packages/web-pkg/src/components/Modals/SaveAsModal.vue
@@ -16,21 +16,24 @@
 <script lang="ts">
 import { defineComponent, onBeforeUnmount, onMounted, PropType, ref } from 'vue'
 import {
+  EDITOR_MODE_EDIT,
   embedModeLocationPickMessageData,
   Modal,
   useClientService,
+  useFileActions,
   useGetMatchingSpace,
   useMessages,
   useModals,
   useRouter,
   useThemeStore
 } from '../../composables'
-import { RouteLocationRaw } from 'vue-router'
+import { LocationQuery, RouteLocationRaw } from 'vue-router'
 import AppLoadingSpinner from '../AppLoadingSpinner.vue'
-import { Resource } from '@ownclouders/web-client'
+import { isShareSpaceResource, Resource, SpaceResource, urlJoin } from '@ownclouders/web-client'
 import { unref } from 'vue'
 import { resolveFileNameDuplicate } from '../../helpers'
 import { useGettext } from 'vue3-gettext'
+import { DavProperty } from '@ownclouders/web-client/webdav'
 
 export default defineComponent({
   name: 'SaveAsModal',
@@ -47,12 +50,13 @@ export default defineComponent({
     const themeStore = useThemeStore()
     const { $gettext } = useGettext()
     const router = useRouter()
-    const { webdav } = useClientService()
+    const clientService = useClientService()
     const { removeModal } = useModals()
     const { showMessage, showErrorMessage } = useMessages()
     const { getMatchingSpace } = useGetMatchingSpace()
-    const parentFolderRoute = router.resolve(props.parentFolderLink)
+    const { getEditorRouteOpts } = useFileActions()
 
+    const parentFolderRoute = router.resolve(props.parentFolderLink)
     const iframeTitle = themeStore.currentTheme.common?.name
     const iframeUrl = new URL(parentFolderRoute.href, window.location.origin)
     iframeUrl.searchParams.append('hide-logo', 'true')
@@ -71,32 +75,17 @@ export default defineComponent({
         return
       }
 
-      let { resources, fileName }: embedModeLocationPickMessageData = data.data
+      const { resources, fileName, locationQuery }: embedModeLocationPickMessageData = data.data
 
       const destinationFolder: Resource = resources[0]
       const space = getMatchingSpace(destinationFolder)
 
-      const { children: existingResources } = await webdav.listFiles(space, {
-        fileId: destinationFolder.fileId
-      })
-      const resourceAlreadyExists = existingResources.find(
-        (existingResource) => existingResource.name === fileName
-      )
-      if (resourceAlreadyExists) {
-        fileName = resolveFileNameDuplicate(
-          fileName,
-          props.originalResource.extension,
-          existingResources
-        )
-      }
-
       try {
-        await webdav.putFileContents(space, {
-          fileName,
-          parentFolderId: destinationFolder.id,
-          content: props.content
+        const resource = await saveFile({ destinationFolder, fileName, space })
+        showMessage({
+          title: $gettext('"%{fileName}" was saved successfully', { fileName: resource.name })
         })
-        showMessage({ title: $gettext('"%{fileName}" was saved successfully', { fileName }) })
+        openFile({ resource, space, locationQuery })
       } catch (e) {
         console.error(e)
         showErrorMessage({
@@ -109,6 +98,65 @@ export default defineComponent({
       removeModal(props.modal.id)
     }
 
+    const saveFile = async ({
+      destinationFolder,
+      fileName,
+      space
+    }: {
+      destinationFolder: Resource
+      fileName: string
+      space: SpaceResource
+    }) => {
+      const { children: existingResources } = await clientService.webdav.listFiles(
+        space,
+        {
+          fileId: destinationFolder.fileId
+        },
+        { davProperties: [DavProperty.Name] }
+      )
+      const resourceAlreadyExists = existingResources.find(
+        (existingResource) => existingResource.name === fileName
+      )
+      if (resourceAlreadyExists) {
+        fileName = resolveFileNameDuplicate(
+          fileName,
+          props.originalResource.extension,
+          existingResources
+        )
+      }
+
+      return clientService.webdav.putFileContents(space, {
+        fileName,
+        parentFolderId: destinationFolder.id,
+        content: props.content,
+        path: urlJoin(destinationFolder.path, fileName)
+      })
+    }
+
+    const openFile = ({
+      locationQuery,
+      resource,
+      space
+    }: {
+      locationQuery: LocationQuery
+      resource: Resource
+      space: SpaceResource
+    }) => {
+      const remoteItemId = isShareSpaceResource(space) ? space.id : undefined
+      const routeOpts = getEditorRouteOpts(
+        unref(router.currentRoute).name,
+        space,
+        resource,
+        EDITOR_MODE_EDIT,
+        remoteItemId
+      )
+      routeOpts.query = { ...routeOpts.query, ...locationQuery }
+
+      const editorRoute = router.resolve(routeOpts)
+      const editorRouteUrl = new URL(editorRoute.href, window.location.origin)
+      window.open(editorRouteUrl.href, '_blank')
+    }
+
     const onCancel = ({ data }: MessageEvent) => {
       if (data.name !== 'owncloud-embed:cancel') {
         return
diff --git a/packages/web-pkg/src/composables/embedMode/useEmbedMode.ts b/packages/web-pkg/src/composables/embedMode/useEmbedMode.ts
index 99c9f9a157b..f7c5ce2ceda 100644
--- a/packages/web-pkg/src/composables/embedMode/useEmbedMode.ts
+++ b/packages/web-pkg/src/composables/embedMode/useEmbedMode.ts
@@ -11,6 +11,7 @@ export interface embedModeFilePickMessageData {
 export interface embedModeLocationPickMessageData {
   resources: Resource[]
   fileName?: string
+  locationQuery?: LocationQuery
 }
 
 export const useEmbedMode = () => {
diff --git a/packages/web-pkg/tests/unit/components/Modals/SaveAsModal.spec.ts b/packages/web-pkg/tests/unit/components/Modals/SaveAsModal.spec.ts
index ab24bb16e6a..e73c268313f 100644
--- a/packages/web-pkg/tests/unit/components/Modals/SaveAsModal.spec.ts
+++ b/packages/web-pkg/tests/unit/components/Modals/SaveAsModal.spec.ts
@@ -6,6 +6,8 @@ import { ListFilesResult } from '@ownclouders/web-client/webdav'
 import { Modal, useMessages, useModals } from '../../../../src/composables/piniaStores'
 import { ClientService } from '../../../../src'
 
+window.open = vi.fn()
+
 describe('SaveAsModal', () => {
   describe('iframe', () => {
     it('sets the iframe src correctly', () => {
@@ -25,6 +27,7 @@ describe('SaveAsModal', () => {
 
       expect(mocks.$clientService.webdav.listFiles).not.toHaveBeenCalled()
       expect(mocks.$clientService.webdav.putFileContents).not.toHaveBeenCalled()
+      expect(window.open).not.toHaveBeenCalled()
     })
     it('saves the file when message does equal "owncloud-embed:select"', async () => {
       const { wrapper, mocks } = getWrapper()
@@ -45,9 +48,10 @@ describe('SaveAsModal', () => {
         })
       )
 
-      await nextTicks(2)
+      await nextTicks(4)
       expect(messageStore.showMessage).toHaveBeenCalled()
       expect(modalStore.removeModal).toHaveBeenCalled()
+      expect(window.open).toHaveBeenCalled()
     })
     it('shows an error message when the file when message does equal "owncloud-embed:select and request fails"', async () => {
       console.error = vi.fn()
@@ -69,9 +73,10 @@ describe('SaveAsModal', () => {
         })
       )
 
-      await nextTicks(2)
+      await nextTicks(4)
       expect(messageStore.showErrorMessage).toHaveBeenCalled()
       expect(modalStore.removeModal).toHaveBeenCalled()
+      expect(window.open).not.toHaveBeenCalled()
     })
   })
 })