diff --git a/frontend/src/models/DirectoryModel.js b/frontend/src/models/DirectoryModel.js
index 7afb88f4f..10534b02c 100644
--- a/frontend/src/models/DirectoryModel.js
+++ b/frontend/src/models/DirectoryModel.js
@@ -1,6 +1,6 @@
 
 import superagent from 'superagent';
-import { buildFilePath, sanitize } from 'pankow/utils';
+import { sanitize } from 'pankow/utils';
 
 const BASE_URL = import.meta.env.BASE_URL || '/';
 
@@ -8,6 +8,13 @@ export function createDirectoryModel(origin, accessToken, api) {
 
   return {
     name: 'DirectoryModel',
+    buildFilePath(filePath, fileName) {
+        // remove leading and trailing slashes
+      while (filePath.startsWith('/')) filePath = filePath.slice(1);
+      while (filePath.endsWith('/')) filePath = filePath.slice(0, -1);
+
+      return encodeURIComponent(`${filePath}${filePath ? '/' : ''}${fileName}`);
+    },
     async listFiles(path) {
       let error, result;
       try {
@@ -118,8 +125,8 @@ export function createDirectoryModel(origin, accessToken, api) {
         let targetPath = targetDir + '/' + files[f].name;
         while (!done) {
           try {
-            if (action === 'cut') await this.rename(buildFilePath(files[f].folderPath, files[f].name), targetPath);
-            if (action === 'copy') await this.copy(buildFilePath(files[f].folderPath, files[f].name), targetPath);
+            if (action === 'cut') await this.rename(this.buildFilePath(files[f].folderPath, files[f].name), targetPath);
+            if (action === 'copy') await this.copy(this.buildFilePath(files[f].folderPath, files[f].name), targetPath);
             done = true;
           } catch (error) {
             if (error.status === 409) {
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index cfdd54457..a299596f1 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -131,7 +131,7 @@ import ProgressSpinner from 'primevue/progressspinner';
 import { useConfirm } from 'primevue/useconfirm';
 
 import { DirectoryView, TopBar, PathBreadcrumbs, BottomBar, MainLayout, FileUploader } from 'pankow';
-import { sanitize, buildFilePath, sleep } from 'pankow/utils';
+import { sanitize, sleep } from 'pankow/utils';
 
 import { ISTATES } from '../constants.js';
 
@@ -256,7 +256,7 @@ export default {
     },
     async onNewFileDialogSubmit() {
       this.newFileDialog.busy = true;
-      await this.directoryModel.newFile(buildFilePath(this.cwd, this.newFileDialog.name), this.newFileDialog.name);
+      await this.directoryModel.newFile(this.directoryModel.buildFilePath(this.cwd, this.newFileDialog.name), this.newFileDialog.name);
       await this.loadCwd();
       this.newFileDialog.visible = false;
     },
@@ -267,7 +267,7 @@ export default {
     },
     async onNewFolderDialogSubmit() {
       this.newFolderDialog.busy = true;
-      await this.directoryModel.newFolder(buildFilePath(this.cwd, this.newFolderDialog.name));
+      await this.directoryModel.newFolder(this.directoryModel.buildFilePath(this.cwd, this.newFolderDialog.name));
       await this.loadCwd();
       this.newFolderDialog.visible = false;
     },
@@ -360,7 +360,7 @@ export default {
 
       for (let i in files) {
         try {
-          await this.directoryModel.remove(buildFilePath(this.cwd, files[i].name));
+          await this.directoryModel.remove(this.directoryModel.buildFilePath(this.cwd, files[i].name));
         } catch (e) {
           console.error(`Failed to remove file ${files[i].name}:`, e);
         }
@@ -372,14 +372,14 @@ export default {
       this.deleteInProgress = false;
     },
     async renameHandler(file, newName) {
-      await this.directoryModel.rename(buildFilePath(this.cwd, file.name), sanitize(this.cwd + '/' + newName));
+      await this.directoryModel.rename(this.directoryModel.buildFilePath(this.cwd, file.name), sanitize(this.cwd + '/' + newName));
       await this.loadCwd();
     },
     async changeOwnerHandler(files, newOwnerUid) {
       if (!files) return;
 
       for (let i in files) {
-        await this.directoryModel.chown(buildFilePath(this.cwd, files[i].name), newOwnerUid);
+        await this.directoryModel.chown(this.directoryModel.buildFilePath(this.cwd, files[i].name), newOwnerUid);
       }
 
       await this.loadCwd();
@@ -416,11 +416,11 @@ export default {
       this.pasteInProgress = false;
     },
     async downloadHandler(file) {
-      await this.directoryModel.download(buildFilePath(this.cwd, file.name));
+      await this.directoryModel.download(this.directoryModel.buildFilePath(this.cwd, file.name));
     },
     async extractHandler(file) {
       this.extractInProgress = true;
-      await this.directoryModel.extract(buildFilePath(this.cwd, file.name));
+      await this.directoryModel.extract(this.directoryModel.buildFilePath(this.cwd, file.name));
       await this.loadCwd();
       this.extractInProgress = false;
     },