feat(files): add overwrite confirmation dialog for file uploads and adapt API to support overwrite functionality

Author: johaven

backend/src/applications/files/files.controller.spec.ts

@@ -104,7 +104,7 @@ describe(FilesController.name, () => {
     })
 
     it('upload() should call filesMethods.upload(req, res)', async () => {
-      await filesController.upload(fakeReq, fakeRes)
+      await filesController.uploadCreate(fakeReq, fakeRes)
 
       expect(filesMethodsMock.upload).toHaveBeenCalledWith(fakeReq, fakeRes)
     })

backend/src/applications/files/files.controller.ts

@@ -15,6 +15,7 @@ import {
   Move,
   ParseIntPipe,
   Post,
+  Put,
   Query,
   Req,
   Res,
@@ -73,7 +74,12 @@ export class FilesController {
   }
 
   @Post(`${FILES_ROUTE.OPERATION}/${FILE_OPERATION.UPLOAD}/*`)
-  async upload(@Req() req: FastifySpaceRequest, @Res({ passthrough: true }) res: FastifyReply): Promise<void> {
+  async uploadCreate(@Req() req: FastifySpaceRequest, @Res({ passthrough: true }) res: FastifyReply): Promise<void> {
+    return this.filesMethods.upload(req, res)
+  }
+
+  @Put(`${FILES_ROUTE.OPERATION}/${FILE_OPERATION.UPLOAD}/*`)
+  async uploadOverwrite(@Req() req: FastifySpaceRequest, @Res({ passthrough: true }) res: FastifyReply): Promise<void> {
     return this.filesMethods.upload(req, res)
   }
 

backend/src/applications/files/services/files-manager.service.ts

@@ -178,7 +178,7 @@ export class FilesManager {
   async saveMultipart(user: UserModel, space: SpaceEnv, req: FastifySpaceRequest) {
     /* Accepted methods:
         POST: create new resource
-        PUT: create or update new resource (even if parent path does not exist)
+        PUT: create or update new resource (even if a parent path does not exist)
     */
     const realParentPath = dirName(space.realPath)
 

backend/src/applications/files/services/files-methods.service.ts

@@ -43,8 +43,6 @@ export class FilesMethods {
     try {
       await this.filesManager.saveMultipart(req.user, req.space, req)
     } catch (e) {
-      // if error we need to close the stream
-      // req.raw.destroy()
       this.logger.error(`${this.upload.name} - unable to ${FILE_OPERATION.UPLOAD} ${req.space.url} : ${e}`)
       return res
         .header('Connection', 'close')

frontend/src/app/applications/files/components/dialogs/files-overwrite-dialog.component.html

@@ -0,0 +1,25 @@
+<!--
+  ~ Copyright (C) 2012-2025 Johan Legrand <johan.legrand@sync-in.com>
+  ~ This file is part of Sync-in | The open source file sync and share solution
+  ~ See the LICENSE file for licensing details
+  -->
+
+<div class="modal-header">
+  <h4 class="modal-title" l10nTranslate>
+    <fa-icon [icon]="icons.faFileShield" class="me-1"></fa-icon>
+    <span l10nTranslate>Overwrite Existing File(s)</span>
+  </h4>
+  <button (click)="layout.closeDialog()" aria-label="Close" class="btn-close btn-close-white" type="button"></button>
+</div>
+<div class="modal-body">
+  <div l10nTranslate>Do you want to replace the existing file(s)?</div>
+  <ul class="my-2" style="padding-left: inherit">
+    @for (file of files; track $index) {
+      <li><b>{{ file.name }}</b></li>
+    }
+  </ul>
+</div>
+<div class="modal-footer">
+  <button (click)="onAction(false)" class="btn btn-sm btn-secondary" data-dismiss="modal" type="button" l10nTranslate>Cancel</button>
+  <button (click)="onAction(true)" [disabled]="submitted" class="btn btn-sm btn-danger" type="button" l10nTranslate>Confirm</button>
+</div>

frontend/src/app/applications/files/components/dialogs/files-overwrite-dialog.component.ts

@@ -0,0 +1,40 @@
+/*
+ * Copyright (C) 2012-2025 Johan Legrand <johan.legrand@sync-in.com>
+ * This file is part of Sync-in | The open source file sync and share solution
+ * See the LICENSE file for licensing details
+ */
+
+import { Component, HostListener, inject, Input, output } from '@angular/core'
+import { FaIconComponent } from '@fortawesome/angular-fontawesome'
+import { faFileShield } from '@fortawesome/free-solid-svg-icons'
+import { L10nTranslateDirective } from 'angular-l10n'
+import { LayoutService } from '../../../../layout/layout.service'
+
+@Component({
+  selector: 'app-files-overwrite-dialog',
+  imports: [FaIconComponent, L10nTranslateDirective],
+  templateUrl: 'files-overwrite-dialog.component.html'
+})
+export class FilesOverwriteDialogComponent {
+  @Input() files: File[] = []
+  public overwrite = output<boolean>()
+  protected layout = inject(LayoutService)
+  protected readonly icons = { faFileShield }
+  protected submitted = false
+
+  @HostListener('document:keyup.enter')
+  onEnter() {
+    this.onAction(true)
+  }
+
+  @HostListener('document:keyup.escape')
+  onEsc() {
+    this.onAction(false)
+  }
+
+  onAction(overwrite: boolean) {
+    this.submitted = overwrite
+    this.overwrite.emit(overwrite)
+    this.layout.closeDialog()
+  }
+}

frontend/src/app/applications/files/services/files-upload.service.ts

@@ -22,7 +22,7 @@ export class FilesUploadService {
   private readonly filesService = inject(FilesService)
   private readonly filesTasksService = inject(FilesTasksService)
 
-  async addFiles(files: FileUpload[]) {
+  async addFiles(files: FileUpload[], overwrite: boolean) {
     const apiRoute = `${API_FILES_OPERATION_UPLOAD}/${this.filesService.currentRoute}`
     const taskReqs: [FileTask, Observable<any>][] = []
 
@@ -32,7 +32,7 @@ export class FilesUploadService {
       const task: FileTask = this.filesTasksService.createUploadTask(path, name, data.size)
       taskReqs.unshift([
         task,
-        this.uploadFiles(`${apiRoute}/${key}`, data.form).pipe(
+        this.uploadFiles(`${apiRoute}/${key}`, data.form, overwrite).pipe(
           filter((ev: any) => ev.type === HttpEventType.UploadProgress),
           tap((ev: HttpUploadProgressEvent) => this.updateProgress(task, ev))
         )
@@ -56,16 +56,20 @@ export class FilesUploadService {
     }
   }
 
-  onDropFiles(ev: any) {
+  onDropFiles(ev: any, overwrite: boolean) {
     if (ev.dataTransfer.items && ev.dataTransfer.items[0]?.webkitGetAsEntry) {
-      this.webkitReadDataTransfer(ev)
+      this.webkitReadDataTransfer(ev, overwrite)
     } else {
-      this.addFiles(ev.dataTransfer.files).catch(console.error)
+      this.addFiles(ev.dataTransfer.files, overwrite).catch(console.error)
     }
   }
 
-  private uploadFiles(url: string, form: FormData) {
-    return this.http.post(url, form, { reportProgress: true, observe: 'events' })
+  private uploadFiles(url: string, form: FormData, overwrite: boolean) {
+    return this.http.request(overwrite ? 'put' : 'post', url, {
+      body: form,
+      reportProgress: true,
+      observe: 'events'
+    })
   }
 
   private updateProgress(task: FileTask, ev: HttpUploadProgressEvent) {
@@ -87,7 +91,7 @@ export class FilesUploadService {
     return sort
   }
 
-  private webkitReadDataTransfer(ev: any) {
+  private webkitReadDataTransfer(ev: any, overwrite: boolean) {
     let queue = ev.dataTransfer.items.length
     const files: FileUpload[] = []
     const readDirectory = (reader: any) => {
@@ -120,7 +124,7 @@ export class FilesUploadService {
     }
     const decrement = () => {
       if (--queue == 0) {
-        this.addFiles(files).catch(console.error)
+        this.addFiles(files, overwrite).catch(console.error)
       }
     }
 

frontend/src/app/applications/files/services/files.service.ts

@@ -32,11 +32,13 @@ import type { FileContent } from '@sync-in-server/backend/src/applications/files
 import type { FileRecent } from '@sync-in-server/backend/src/applications/files/schemas/file-recent.interface'
 import { API_SPACES_TREE } from '@sync-in-server/backend/src/applications/spaces/constants/routes'
 import { forbiddenChars, isValidFileName } from '@sync-in-server/backend/src/common/shared'
+import { BsModalRef } from 'ngx-bootstrap/modal'
 import { firstValueFrom, map, Observable, Subject } from 'rxjs'
 import { downloadWithAnchor } from '../../../common/utils/functions'
 import { TAB_MENU } from '../../../layout/layout.interfaces'
 import { LayoutService } from '../../../layout/layout.service'
 import { StoreService } from '../../../store/store.service'
+import { FilesOverwriteDialogComponent } from '../components/dialogs/files-overwrite-dialog.component'
 import { FilesViewerDialogComponent } from '../components/dialogs/files-viewer-dialog.component'
 import { FileContentModel } from '../models/file-content.model'
 import { FileRecentModel } from '../models/file-recent.model'
@@ -210,6 +212,17 @@ export class FilesService {
     )
   }
 
+  async openOverwriteDialog(files: File[]): Promise<boolean> {
+    const overwriteDialog: BsModalRef<FilesOverwriteDialogComponent> = this.layout.openDialog(FilesOverwriteDialogComponent, null, {
+      initialState: {
+        files: files
+      } as FilesOverwriteDialogComponent
+    })
+    return new Promise<boolean>((resolve) => {
+      overwriteDialog.content.overwrite.subscribe(resolve)
+    })
+  }
+
   async openViewerDialog(mode: 'view' | 'edit', currentFile: FileModel) {
     this.http.head(currentFile.dataUrl).subscribe({
       next: async () => {

frontend/src/app/applications/spaces/components/spaces-browser.component.ts

@@ -556,32 +556,33 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
     }
   }
 
-  onUploadFiles(ev: { files: File[] }, isDirectory = false) {
+  async onUploadFiles(ev: { files: File[] }, isDirectory = false) {
+    let doOverwrite = false
     if (isDirectory) {
       const dirName = ev.files[0].webkitRelativePath.split('/')[0]
-      if (this.files.find((f) => f.name === dirName)) {
-        this.layout.sendNotification('warning', 'This folder already exists', dirName)
-        return
+      const dirExist = this.files.find((f) => f.name.toLowerCase() === dirName.toLowerCase())
+      if (dirExist) {
+        doOverwrite = await this.filesService.openOverwriteDialog([{ name: dirName } as File])
+        if (!doOverwrite) return
       }
     } else {
-      for (const uF of ev.files) {
-        if (this.files.find((f) => uF.name === f.name)) {
-          this.layout.sendNotification('warning', 'This file already exists', uF.name)
-          return
-        }
+      const exist: File[] = [...ev.files].filter((f: File) => this.files.some((x) => x.name.toLowerCase() === f.name.toLowerCase()))
+      if (exist.length > 0) {
+        doOverwrite = await this.filesService.openOverwriteDialog(exist)
+        if (!doOverwrite) return
       }
     }
-    this.filesUpload.addFiles(ev.files).catch(console.error)
+    this.filesUpload.addFiles(ev.files, doOverwrite).catch(console.error)
   }
 
-  onDropFiles(ev: { dataTransfer: { files: File[] } }) {
-    for (const uF of ev.dataTransfer.files) {
-      if (this.files.find((f) => uF.name === f.name)) {
-        this.layout.sendNotification('warning', 'This file already exists', uF.name)
-        return
-      }
+  async onDropFiles(ev: { dataTransfer: { files: File[] } }) {
+    let doOverwrite = false
+    const exist: File[] = [...ev.dataTransfer.files].filter((f: File) => this.files.some((x) => x.name.toLowerCase() === f.name.toLowerCase()))
+    if (exist.length > 0) {
+      doOverwrite = await this.filesService.openOverwriteDialog(exist)
+      if (!doOverwrite) return
     }
-    this.filesUpload.onDropFiles(ev)
+    this.filesUpload.onDropFiles(ev, doOverwrite)
   }
 
   decompressFile() {

frontend/src/i18n/de.json

@@ -536,8 +536,6 @@
   "Drop folder here": "Ordner hier ablegen",
   "This directory is already synced": "Dieses Verzeichnis wird bereits synchronisiert",
   "The parent directory is already synced": "Das übergeordnete Verzeichnis wird bereits synchronisiert",
-  "This folder already exists": "Dieser Ordner existiert bereits",
-  "This file already exists": "Diese Datei existiert bereits",
   "This directory is not accessible": "Dieses Verzeichnis ist nicht zugänglich",
   "This directory is read-only, you will not be able to modify it": "Dieses Verzeichnis ist schreibgeschützt; Sie können es nicht ändern",
   "Please select the server directory to sync, if it doesn't exist you can create it.": "Bitte wählen Sie das Serververzeichnis zur Synchronisierung aus; falls es nicht existiert, können Sie es erstellen.",
@@ -597,5 +595,7 @@
   "Valid with your TOTP code": "Mit Ihrem TOTP‑Code bestätigen",
   "The secret has expired": "Der geheime Schlüssel ist abgelaufen",
   "Keep these codes in a safe place. They will allow you to access your account if you lose access to your two-factor authentication.": "Bewahren Sie diese Codes an einem sicheren Ort auf. Sie ermöglichen Ihnen den Zugriff auf Ihr Konto, falls Sie den Zugriff auf Ihre Zwei‑Faktor‑Authentifizierung verlieren.",
-  "These recovery codes are for one-time use only and will only be displayed here once.": "Diese Wiederherstellungscodes sind nur einmal verwendbar und werden hier nur einmal angezeigt."
+  "These recovery codes are for one-time use only and will only be displayed here once.": "Diese Wiederherstellungscodes sind nur einmal verwendbar und werden hier nur einmal angezeigt.",
+  "Overwrite Existing File(s)": "Vorhandene Datei(en) überschreiben",
+  "Do you want to replace the existing file(s)?": "Möchten Sie die vorhandene(n) Datei(en) ersetzen?"
 }