diff --git a/assets/vue/composables/useFileManager.js b/assets/vue/composables/useFileManager.js
index 5ed61507e55..e8a7368e210 100644
--- a/assets/vue/composables/useFileManager.js
+++ b/assets/vue/composables/useFileManager.js
@@ -40,6 +40,25 @@ export function useFileManager(entity, apiEndpoint, uploadRoute, isCourseDocumen
   const currentFolderTitle = ref("Root")
   const { cid, sid, gid } = useCidReq()
 
+  const SS_KEY_PARENT = "pf_parent"
+  const setParentInSession = (id) => {
+    try {
+      sessionStorage.setItem(SS_KEY_PARENT, String(Number(id || 0)))
+    } catch {}
+  }
+  const getParentFromSession = () => {
+    try {
+      return Number(sessionStorage.getItem(SS_KEY_PARENT) || 0)
+    } catch {
+      return 0
+    }
+  }
+  const clearParentInSession = () => {
+    try {
+      sessionStorage.removeItem(SS_KEY_PARENT)
+    } catch {}
+  }
+
   const flattenFilters = (filters) => {
     return Object.keys(filters).reduce((acc, key) => {
       acc[key] = filters[key]
@@ -101,6 +120,7 @@ export function useFileManager(entity, apiEndpoint, uploadRoute, isCourseDocumen
       })
       filters.value["resourceNode.parent"] = data.resourceNode.id
       currentFolderTitle.value = data.resourceNode.title
+      setParentInSession(filters.value["resourceNode.parent"])
       onUpdateOptions()
     }
   }
@@ -110,14 +130,22 @@ export function useFileManager(entity, apiEndpoint, uploadRoute, isCourseDocumen
       const previousFolder = previousFolders.value.pop()
       filters.value["resourceNode.parent"] = previousFolder.id
       currentFolderTitle.value = previousFolder.title
-      onUpdateOptions()
     } else {
       filters.value["resourceNode.parent"] = isCourseDocument
         ? course.value.resourceNode.id
         : user.value.resourceNode.id
       currentFolderTitle.value = "Root"
-      onUpdateOptions()
     }
+    setParentInSession(filters.value["resourceNode.parent"])
+    onUpdateOptions()
+  }
+
+  const resetToRoot = () => {
+    clearParentInSession()
+    previousFolders.value = []
+    currentFolderTitle.value = "Root"
+    filters.value["resourceNode.parent"] = isCourseDocument ? course.value.resourceNode.id : user.value.resourceNode.id
+    onUpdateOptions()
   }
 
   const returnToEditor = (data) => {
@@ -153,14 +181,10 @@ export function useFileManager(entity, apiEndpoint, uploadRoute, isCourseDocumen
     return fileExtensions.includes(extension)
   }
 
-  const getFileUrl = (file) => {
-    return file.contentUrl
-  }
+  const getFileUrl = (file) => file.contentUrl
 
   const getIcon = (file) => {
-    if (!file.resourceNode.firstResourceFile) {
-      return "mdi-folder"
-    }
+    if (!file.resourceNode.firstResourceFile) return "mdi-folder"
     const fileTypeIcons = {
       pdf: "mdi-file-pdf-box",
       doc: "mdi-file-word-box",
@@ -289,6 +313,7 @@ export function useFileManager(entity, apiEndpoint, uploadRoute, isCourseDocumen
     localStorage.setItem("currentFolderTitle", currentFolderTitle.value)
     localStorage.setItem("isUploaded", "true")
     localStorage.setItem("uploadParentNodeId", filters.value["resourceNode.parent"])
+    setParentInSession(filters.value["resourceNode.parent"])
 
     await router.push({
       name: uploadRoute,
@@ -303,6 +328,23 @@ export function useFileManager(entity, apiEndpoint, uploadRoute, isCourseDocumen
 
   const onMountedCallback = () => {
     onMounted(() => {
+      const hasNodeParam =
+        route.params?.node !== undefined &&
+        route.params?.node !== null &&
+        String(route.params.node) !== "" &&
+        Number(route.params.node) > 0
+
+      const hasExplicitParentInQuery =
+        route.query?.parentResourceNodeId !== undefined &&
+        route.query?.parentResourceNodeId !== null &&
+        String(route.query.parentResourceNodeId) !== ""
+
+      if (!hasNodeParam && !hasExplicitParentInQuery) {
+        clearParentInSession()
+        previousFolders.value = []
+        currentFolderTitle.value = "Root"
+      }
+
       const savedPreviousFolders = localStorage.getItem("previousFolders")
       const savedCurrentFolderTitle = localStorage.getItem("currentFolderTitle")
       const isUploaded = localStorage.getItem("isUploaded")
@@ -313,11 +355,18 @@ export function useFileManager(entity, apiEndpoint, uploadRoute, isCourseDocumen
         localStorage.removeItem("isUploaded")
         localStorage.removeItem("uploadParentNodeId")
       } else if (!filters.value["resourceNode.parent"] || filters.value["resourceNode.parent"] === 0) {
-        filters.value["resourceNode.parent"] = isCourseDocument
-          ? course.value.resourceNode.id
-          : user.value.resourceNode.id
+        const ssParent = getParentFromSession()
+        if (ssParent) {
+          filters.value["resourceNode.parent"] = ssParent
+        } else {
+          filters.value["resourceNode.parent"] = isCourseDocument
+            ? course.value.resourceNode.id
+            : user.value.resourceNode.id
+        }
       }
 
+      setParentInSession(filters.value["resourceNode.parent"])
+
       if (savedPreviousFolders) {
         previousFolders.value = JSON.parse(savedPreviousFolders)
         localStorage.removeItem("previousFolders")
@@ -388,6 +437,7 @@ export function useFileManager(entity, apiEndpoint, uploadRoute, isCourseDocumen
     onUpdateOptions,
     handleClickFile,
     goBack,
+    resetToRoot,
     returnToEditor,
     toggleViewMode,
     viewModeIcon,
diff --git a/assets/vue/views/filemanager/Upload.vue b/assets/vue/views/filemanager/Upload.vue
index 3416cc1dcfd..4934a39e176 100644
--- a/assets/vue/views/filemanager/Upload.vue
+++ b/assets/vue/views/filemanager/Upload.vue
@@ -1,14 +1,9 @@
 <template>
-  <BaseToolbar>
-    <BaseButton
-      :label="t('Back')"
-      icon="back"
-      type="black"
-      @click="back"
-    />
+  <BaseToolbar v-if="!embedded">
+    <BaseButton :label="t('Back')" icon="back" type="black" @click="back" />
   </BaseToolbar>
   <div class="flex flex-col justify-center items-center">
-    <div class="mb-4">
+    <div class="mb-4 w-full">
       <Dashboard
         v-if="uppy"
         :uppy="uppy"
@@ -20,7 +15,7 @@
   </div>
 </template>
 <script setup>
-import { ref, watch, onMounted } from "vue"
+import { ref, onMounted } from "vue"
 import "@uppy/core/dist/style.css"
 import "@uppy/dashboard/dist/style.css"
 import "@uppy/image-editor/dist/style.css"
@@ -32,7 +27,7 @@ const Webcam = require("@uppy/webcam").default
 const XHRUpload = require("@uppy/xhr-upload").default
 const ImageEditor = require("@uppy/image-editor").default
 
-import { useRoute, useRouter } from "vue-router"
+import { useRouter } from "vue-router"
 import { ENTRYPOINT } from "../../config/entrypoint"
 import { useCidReq } from "../../composables/cidReq"
 import { useUpload } from "../../composables/upload"
@@ -41,110 +36,161 @@ import BaseButton from "../../components/basecomponents/BaseButton.vue"
 import BaseToolbar from "../../components/basecomponents/BaseToolbar.vue"
 import { RESOURCE_LINK_PUBLISHED } from "../../constants/entity/resourcelink"
 
-const route = useRoute()
+const props = defineProps({
+  embedded: { type: Boolean, default: false },
+  parentResourceNodeId: { type: [Number, String], default: 0 },
+  filetype: { type: String, default: "file" },
+})
+const emit = defineEmits(["done", "cancel"])
+
 const router = useRouter()
 const { gid, sid, cid } = useCidReq()
 const { onCreated } = useUpload()
 const { t } = useI18n()
-const filetype = route.query.filetype === "certificate" ? "certificate" : "file"
-const isUncompressZipEnabled = ref(false)
-const fileExistsOption = ref("rename")
-const parentResourceNodeId = ref(Number(route.query.parentResourceNodeId || route.params.node))
-const resourceLinkList = ref(
-  JSON.stringify([
-    {
-      gid,
-      sid,
-      cid,
-      visibility: RESOURCE_LINK_PUBLISHED,
-    },
-  ]),
-)
+
+const LOG_PREFIX = "[UPLOAD DBG]"
+function log(...args) { console.log(LOG_PREFIX, ...args) }
+
+function resolveParentFromSessionThenProp() {
+  try {
+    const ssRaw = sessionStorage.getItem("pf_parent")
+    const ss = Number(ssRaw || 0)
+    if (ss) {
+      return ss
+    }
+    const p = Number(props.parentResourceNodeId || 0)
+    return p || 0
+  } catch (e) {
+    return Number(props.parentResourceNodeId || 0)
+  }
+}
+
+const parentIdRef = ref(0)
+const fileTypeRef = ref(String(props.filetype || "file"))
+
+function buildEndpoint(parentId) {
+  const pid = String(Number(parentId || 0))
+  const qs = new URLSearchParams({
+    "resourceNode.parent": pid,
+    parentResourceNodeId: pid,
+    parent: pid,
+  }).toString()
+  const ep = `${ENTRYPOINT}personal_files?${qs}`
+  return ep
+}
+
+const uploadedItems = ref([])
 const uppy = ref(null)
 
+function applyCurrentParentToUppy(hook = "") {
+  const freshParent = resolveParentFromSessionThenProp()
+  parentIdRef.value = freshParent
+
+  const plugin = uppy.value?.getPlugin?.("XHRUpload")
+
+  if (plugin?.setOptions) {
+    const newEndpoint = buildEndpoint(freshParent)
+    plugin.setOptions({ endpoint: newEndpoint })
+  }
+
+  const beforeMeta = uppy.value?.getMeta?.() || {}
+  uppy.value?.setMeta({
+    filetype: fileTypeRef.value,
+    parentResourceNodeId: String(freshParent),
+    parentResourceNode: `/api/resource_nodes/${freshParent}`,
+    "resourceNode.parent": String(freshParent),
+    resourceLinkList: JSON.stringify([{ gid, sid, cid, visibility: RESOURCE_LINK_PUBLISHED }]),
+    isUncompressZipEnabled: false,
+    fileExistsOption: "rename",
+  })
+  const afterMeta = uppy.value?.getMeta?.() || {}
+  const ep = plugin?.opts?.endpoint
+}
+
 onMounted(() => {
+  parentIdRef.value = resolveParentFromSessionThenProp()
   uppy.value = new Uppy({
     autoProceed: true,
-    restrictions: {
-      allowedFileTypes: filetype === "certificate" ? [".html"] : null,
-    },
+    debug: true,
+    restrictions: { allowedFileTypes: fileTypeRef.value === "certificate" ? [".html"] : null },
   })
     .use(ImageEditor, {
-      cropperOptions: {
-        viewMode: 1,
-        background: false,
-        autoCropArea: 1,
-        responsive: true,
-      },
+      cropperOptions: { viewMode: 1, background: false, autoCropArea: 1, responsive: true },
       actions: {
-        revert: true,
-        rotate: true,
-        granularRotate: true,
-        flip: true,
-        zoomIn: true,
-        zoomOut: true,
-        cropSquare: true,
-        cropWidescreen: true,
-        cropWidescreenVertical: true,
+        revert: true, rotate: true, granularRotate: true, flip: true,
+        zoomIn: true, zoomOut: true, cropSquare: true, cropWidescreen: true, cropWidescreenVertical: true,
       },
     })
     .use(XHRUpload, {
-      endpoint: `${ENTRYPOINT}personal_files`,
+      endpoint: buildEndpoint(parentIdRef.value),
       formData: true,
       fieldName: "uploadFile",
+      allowedMetaFields: [
+        "filetype",
+        "parentResourceNodeId",
+        "parentResourceNode",
+        "resourceNode.parent",
+        "resourceLinkList",
+        "isUncompressZipEnabled",
+        "fileExistsOption",
+      ],
+    })
+    .on("file-added", (file) => {
+      applyCurrentParentToUppy("file-added")
+    })
+    .on("upload", (data) => {
+      applyCurrentParentToUppy("upload")
     })
-    .on("upload-success", (item, response) => {
-      onCreated(response.body)
+    .on("upload-progress", (file, progress) => {
     })
-    .on("complete", () => {
-      console.log("Upload complete, sending message...")
-      const parentNodeId = parentResourceNodeId.value
-      localStorage.setItem("isUploaded", "true")
-      localStorage.setItem("uploadParentNodeId", parentNodeId)
-      setTimeout(() => {
-        router.push({
-          name: route.query.returnTo || "FileManagerList",
-          params: { node: parentNodeId },
-          query: { ...route.query, parentResourceNodeId: parentNodeId },
-        })
-      }, 2000)
+    .on("upload-success", (file, response) => {
+      onCreated(response?.body)
+      if (response?.body) uploadedItems.value.push(response.body)
+    })
+    .on("complete", (result) => {
+      if (props.embedded) {
+        emit("done", { parentNodeId: parentIdRef.value, items: uploadedItems.value })
+        uploadedItems.value = []
+        return
+      }
+      router.push({ name: "FileManagerList", params: { node: parentIdRef.value } })
+    })
+    .on("error", (err) => {
+    })
+    .on("restriction-failed", (file, error) => {
     })
 
-  if (filetype !== "certificate") {
+  if (fileTypeRef.value !== "certificate") {
     uppy.value.use(Webcam)
   }
 
-  uppy.value.setMeta({
-    filetype,
-    parentResourceNodeId: parentResourceNodeId.value,
-    resourceLinkList: resourceLinkList.value,
-    isUncompressZipEnabled: isUncompressZipEnabled.value,
-    fileExistsOption: fileExistsOption.value,
-  })
-})
-
-watch(isUncompressZipEnabled, () => {
-  if (uppy.value) {
-    uppy.value.setOptions({
-      meta: { isUncompressZipEnabled: isUncompressZipEnabled.value },
-    })
+  const initialMeta = {
+    filetype: fileTypeRef.value,
+    parentResourceNodeId: String(parentIdRef.value),
+    parentResourceNode: `/api/resource_nodes/${parentIdRef.value}`,
+    "resourceNode.parent": String(parentIdRef.value),
+    resourceLinkList: JSON.stringify([{ gid, sid, cid, visibility: RESOURCE_LINK_PUBLISHED }]),
+    isUncompressZipEnabled: false,
+    fileExistsOption: "rename",
   }
-})
+  uppy.value.setMeta(initialMeta)
 
-watch(fileExistsOption, () => {
-  if (uppy.value) {
-    uppy.value.setOptions({
-      meta: { fileExistsOption: fileExistsOption.value },
-    })
+  const initialEndpoint = uppy.value.getPlugin("XHRUpload")?.opts?.endpoint
+  window.__UPPY_DBG = () => {
+    try {
+      const plugin = uppy.value?.getPlugin?.("XHRUpload")
+      const ep = plugin?.opts?.endpoint
+    } catch (e) {
+      log("__UPPY_DBG error:", e)
+    }
   }
 })
 
 function back() {
-  let queryParams = { cid, sid, gid, filetype, tab: route.query.tab }
-  router.push({
-    name: "FileManagerList",
-    params: { node: route.query.tab ? parentResourceNodeId.value : 0 },
-    query: queryParams,
-  })
+  if (props.embedded) {
+    emit("cancel")
+    return
+  }
+  router.push({ name: "FileManagerList", params: { node: parentIdRef.value || 0 } })
 }
 </script>
diff --git a/assets/vue/views/personalfile/List.vue b/assets/vue/views/personalfile/List.vue
index ba90febda01..a7cee96723c 100644
--- a/assets/vue/views/personalfile/List.vue
+++ b/assets/vue/views/personalfile/List.vue
@@ -1,10 +1,13 @@
 <template>
-  <div
-    v-if="isAuthenticated"
-    class="q-card"
-  >
+  <div v-if="isAuthenticated" class="q-card">
     <div class="p-4 flex flex-row gap-1 mb-2">
       <div class="flex flex-row gap-2">
+        <Button
+          class="btn btn--secondary"
+          icon="pi pi-home"
+          :label="$t('Root')"
+          @click="resetToRoot"
+        />
         <Button
           class="btn btn--primary"
           icon="fa fa-folder-plus"
@@ -15,7 +18,7 @@
           class="btn btn--primary"
           icon="fa fa-file-upload"
           :label="t('Upload')"
-          @click="uploadDocumentHandler"
+          @click="openUploadDialog"
         />
         <Button
           v-if="selectedFiles.length"
@@ -28,16 +31,16 @@
           v-if="previousFolders.length"
           class="btn btn--primary"
           icon="pi pi-arrow-left"
-          label="Back"
+          :label="$t('Back')"
           @click="goBack"
         />
       </div>
     </div>
   </div>
   <BaseTable
-    v-model:filters="filter"
+    v-model:filters="filters"
     v-model:selected-items="selectedFiles"
-    :global-filter-fields="['resourceNode.title', 'resourceNode.updatedAt']"
+    :global-filter-fields="['resourceNode.title','resourceNode.updatedAt']"
     :is-loading="isLoading"
     :total-items="totalFiles"
     :values="files"
@@ -47,25 +50,14 @@
     @page="onFilesPage"
     @sort="sortingFilesChanged"
   >
-    <Column
-      :header="$t('Title')"
-      :sortable="true"
-      field="resourceNode.title"
-    >
+    <Column :header="$t('Title')" :sortable="true" field="resourceNode.title">
       <template #body="slotProps">
-        <div v-if="slotProps.data && slotProps.data.resourceNode && slotProps.data.resourceNode.firstResourceFile">
+        <div v-if="slotProps.data?.resourceNode?.firstResourceFile">
           <ResourceFileLink :resource="slotProps.data" />
-          <v-icon
-            v-if="slotProps.data.resourceLinkListFromEntity && slotProps.data.resourceLinkListFromEntity.length > 0"
-            icon="mdi-link"
-          />
+          <v-icon v-if="slotProps.data.resourceLinkListFromEntity?.length" icon="mdi-link" />
         </div>
         <div v-else>
-          <a
-            v-if="slotProps.data"
-            class="cursor-pointer"
-            @click="handleClickFile(slotProps.data)"
-          >
+          <a v-if="slotProps.data" class="cursor-pointer" @click="handleClickFile(slotProps.data)">
             <v-icon icon="mdi-folder" />
             {{ slotProps.data.resourceNode.title }}
           </a>
@@ -73,25 +65,13 @@
       </template>
     </Column>
 
-    <Column
-      :header="$t('Size')"
-      :sortable="true"
-      field="resourceNode.firstResourceFile.size"
-    >
+    <Column :header="$t('Size')" :sortable="true" field="resourceNode.firstResourceFile.size">
       <template #body="slotProps">
-        {{
-          slotProps.data.resourceNode.firstResourceFile
-            ? prettyBytes(slotProps.data.resourceNode.firstResourceFile.size)
-            : ""
-        }}
+        {{ slotProps.data.resourceNode.firstResourceFile ? prettyBytes(slotProps.data.resourceNode.firstResourceFile.size) : "" }}
       </template>
     </Column>
 
-    <Column
-      :header="$t('Modified')"
-      :sortable="true"
-      field="resourceNode.updatedAt"
-    >
+    <Column :header="$t('Modified')" :sortable="true" field="resourceNode.updatedAt">
       <template #body="slotProps">
         {{ relativeDatetime(slotProps.data.resourceNode.updatedAt) }}
       </template>
@@ -100,12 +80,7 @@
     <Column :exportable="false">
       <template #body="slotProps">
         <div class="flex flex-row gap-2">
-          <Button
-            v-if="isAuthenticated"
-            class="btn btn--danger"
-            icon="pi pi-trash"
-            @click="confirmDeleteItem(slotProps.data)"
-          />
+          <Button v-if="isAuthenticated" class="btn btn--danger" icon="pi pi-trash" @click="confirmDeleteItem(slotProps.data)" />
         </div>
       </template>
     </Column>
@@ -113,158 +88,104 @@
     <Column :exportable="false">
       <template #body="slotProps">
         <div class="flex flex-row gap-2">
-          <Button
-            v-if="isFromEditor"
-            class="p-button-sm p-button p-mr-2"
-            label="Select"
-            @click="returnToEditor(slotProps.data)"
-          />
+          <Button v-if="isFromEditor" class="p-button-sm p-button p-mr-2" :label="$t('Select')" @click="returnToEditor(slotProps.data)" />
         </div>
       </template>
     </Column>
   </BaseTable>
 
-  <Dialog
-    v-model:visible="dialog"
-    :header="$t('New folder')"
-    :modal="true"
-    :style="{ width: '450px' }"
-    class="p-fluid"
-  >
+  <Dialog v-model:visible="dialog" :header="$t('New folder')" :modal="true" :style="{ width: '450px' }" class="p-fluid">
     <div class="p-field">
       <label for="title">{{ $t("Name") }}</label>
-      <InputText
-        id="title"
-        v-model.trim="item.title"
-        :class="{ 'p-invalid': submitted && !item.title }"
-        autocomplete="off"
-        autofocus
-        required="true"
-      />
-      <small
-        v-if="submitted && !item.title"
-        class="p-error"
-        >{{ $t("Title is required") }}</small
-      >
+      <InputText id="title" v-model.trim="item.title" :class="{ 'p-invalid': submitted && !item.title }" autocomplete="off" autofocus required="true" />
+      <small v-if="submitted && !item.title" class="p-error">{{ $t("Title is required") }}</small>
     </div>
-
     <template #footer>
-      <Button
-        class="p-button-text"
-        icon="pi pi-times"
-        label="Cancel"
-        @click="hideDialog"
-      />
-      <Button
-        class="p-button-text"
-        icon="pi pi-check"
-        label="Save"
-        @click="saveItem"
-      />
+      <Button class="p-button-text" icon="pi pi-times" :label="$t('Cancel')" @click="hideDialog" />
+      <Button class="p-button-text" icon="pi pi-check" :label="$t('Save')" @click="saveItem" />
     </template>
   </Dialog>
 
-  <Dialog
-    v-model:visible="deleteDialog"
-    :modal="true"
-    :style="{ width: '450px' }"
-    header="Confirm"
-  >
+  <Dialog v-model:visible="deleteDialog" :modal="true" :style="{ width: '450px' }" :header="$t('Confirm')">
     <div class="confirmation-content">
-      <i
-        class="pi pi-exclamation-triangle p-mr-3"
-        style="font-size: 2rem"
-      ></i>
-      <span
-        >Are you sure you want to delete <b>{{ itemToDelete?.title }}</b
-        >?</span
-      >
+      <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem"></i>
+      <span>{{ $t('Are you sure you want to delete') }} <b>{{ itemToDelete?.title }}</b>?</span>
     </div>
     <template #footer>
-      <Button
-        class="p-button-text"
-        icon="pi pi-times"
-        label="No"
-        @click="deleteDialog = false"
-      />
-      <Button
-        class="p-button-text"
-        icon="pi pi-check"
-        label="Yes"
-        @click="deleteItemButton"
-      />
+      <Button class="p-button-text" icon="pi pi-times" :label="$t('No')" @click="deleteDialog = false" />
+      <Button class="p-button-text" icon="pi pi-check" :label="$t('Yes')" @click="deleteItemButton" />
     </template>
   </Dialog>
 
-  <Dialog
-    v-model:visible="deleteMultipleDialog"
-    :modal="true"
-    :style="{ width: '450px' }"
-    header="Confirm"
-  >
+  <Dialog v-model:visible="deleteMultipleDialog" :modal="true" :style="{ width: '450px' }" :header="$t('Confirm')">
     <div class="confirmation-content">
-      <i
-        class="pi pi-exclamation-triangle p-mr-3"
-        style="font-size: 2rem"
-      />
-      <span v-if="item">{{ $t("Are you sure you want to delete the selected items?") }}</span>
+      <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
+      <span v-if="item">{{ $t('Are you sure you want to delete the selected items?') }}</span>
     </div>
     <template #footer>
-      <Button
-        class="p-button-text"
-        icon="pi pi-times"
-        label="No"
-        @click="deleteMultipleDialog = false"
-      />
-      <Button
-        class="p-button-text"
-        icon="pi pi-check"
-        label="Yes"
-        @click="deleteMultipleItems"
-      />
+      <Button class="p-button-text" icon="pi pi-times" :label="$t('No')" @click="deleteMultipleDialog = false" />
+      <Button class="p-button-text" icon="pi pi-check" :label="$t('Yes')" @click="deleteMultipleItems" />
     </template>
   </Dialog>
 
+  <Dialog v-model:visible="detailsDialogVisible" :header="selectedItem.title || $t('Item Details')" :modal="true" :style="{ width: '50%' }">
+    <div v-if="Object.keys(selectedItem).length > 0">
+      <p><strong>{{ $t('Title') }}:</strong> {{ selectedItem.resourceNode.title }}</p>
+      <p><strong>{{ $t('Modified') }}:</strong> {{ relativeDatetime(selectedItem.resourceNode.updatedAt) }}</p>
+      <p><strong>{{ $t('Size') }}:</strong> {{ prettyBytes(selectedItem.resourceNode.firstResourceFile.size) }}</p>
+      <p><strong>{{ $t('URL') }}:</strong> <a :href="selectedItem.contentUrl" target="_blank">{{ $t('Open file') }}</a></p>
+    </div>
+    <template #footer>
+      <Button class="p-button-text" :label="$t('Close')" @click="closeDetailsDialog" />
+    </template>
+  </Dialog>
   <Dialog
-    v-model:visible="detailsDialogVisible"
-    :header="selectedItem.title || 'Item Details'"
+    v-model:visible="uploadDialogVisible"
+    :header="$t('Upload')"
     :modal="true"
-    :style="{ width: '50%' }"
+    :style="{ width: '680px', maxWidth: '95vw' }"
+    class="p-fluid"
+    @hide="refreshList"
   >
-    <div v-if="Object.keys(selectedItem).length > 0">
-      <p><strong>Title:</strong> {{ selectedItem.resourceNode.title }}</p>
-      <p><strong>Modified:</strong> {{ relativeDatetime(selectedItem.resourceNode.updatedAt) }}</p>
-      <p><strong>Size:</strong> {{ prettyBytes(selectedItem.resourceNode.firstResourceFile.size) }}</p>
-      <p>
-        <strong>URL:</strong>
-        <a
-          :href="selectedItem.contentUrl"
-          target="_blank"
-          >Open File</a
-        >
-      </p>
-    </div>
+    <Upload
+      :key="'upload-'+String(filters['resourceNode.parent'])+'-'+String(uploadDialogVisible)"
+      embedded
+      :parent-resource-node-id="filters['resourceNode.parent']"
+      :filetype="'file'"
+      @done="onUploaded"
+      @cancel="closeUploadDialog"
+    />
     <template #footer>
-      <Button
-        class="p-button-text"
-        label="Close"
-        @click="closeDetailsDialog"
-      />
+      <Button class="p-button-text" icon="pi pi-times" :label="$t('Cancel')" @click="closeUploadDialog" />
     </template>
   </Dialog>
 </template>
 
 <script setup>
+import { ref, watch } from "vue"
 import { useFileManager } from "../../composables/useFileManager"
 import { useI18n } from "vue-i18n"
 import { useFormatDate } from "../../composables/formatDate"
 import prettyBytes from "pretty-bytes"
 import ResourceFileLink from "../../components/documents/ResourceFileLink.vue"
 import BaseTable from "../../components/basecomponents/BaseTable.vue"
+import Upload from "../filemanager/Upload.vue"
 
 const { t } = useI18n()
 const { relativeDatetime } = useFormatDate()
 
+const uploadDialogVisible = ref(false)
+const openUploadDialog = () => {
+  uploadDialogVisible.value = true
+}
+const closeUploadDialog = () => {
+  uploadDialogVisible.value = false
+}
+const onUploaded = (payload) => {
+  uploadDialogVisible.value = false
+  onMountedCallback()
+}
+
 const {
   files,
   totalFiles,
@@ -298,7 +219,12 @@ const {
   editHandler,
   goBack,
   previousFolders,
+  onUpdateOptions,
+  resetToRoot,
 } = useFileManager("personalfile", "/api/personal_files", "FileManagerUploadFile")
 
 onMountedCallback()
+const refreshList = async () => {
+  await onUpdateOptions()
+}
 </script>