fix(frontend:files): fix DataTransfer usage after async operations and delay overwrite until analysis completes to restore overwrite on dropped files

johaven · johaven · commit d9935e5a3887 · 2025-11-30T23:14:58.000+01:00
diff --git a/frontend/src/app/applications/files/services/files-upload.service.ts b/frontend/src/app/applications/files/services/files-upload.service.ts
@@ -57,11 +57,15 @@ export class FilesUploadService {
     }
   }
 
-  onDropFiles(ev: any, overwrite: boolean) {
+  onDropFiles(ev: any, exist: FileModel[]) {
+    /*
+     Important: dataTransfer.items must be accessed synchronously before any async operation; overwrite is handled after all analyses.
+     Parameter `exist`: files already present in the current drop target.
+    */
     if (ev.dataTransfer.items && ev.dataTransfer.items[0]?.webkitGetAsEntry) {
-      this.webkitReadDataTransfer(ev, overwrite)
+      this.webkitReadDataTransfer(ev, exist)
     } else {
-      this.addFiles(ev.dataTransfer.files, overwrite).catch(console.error)
+      this.addFiles(ev.dataTransfer.files, exist.length > 0).catch(console.error)
     }
   }
 
@@ -101,7 +105,7 @@ export class FilesUploadService {
     return sort
   }
 
-  private webkitReadDataTransfer(ev: any, overwrite: boolean) {
+  private webkitReadDataTransfer(ev: any, exist: FileModel[]) {
     let queue = ev.dataTransfer.items.length
     const files: FileUpload[] = []
     const readDirectory = (reader: any) => {
@@ -134,7 +138,18 @@ export class FilesUploadService {
     }
     const decrement = () => {
       if (--queue == 0) {
-        this.addFiles(files, overwrite).catch(console.error)
+        if (exist.length <= 0) {
+          this.addFiles(files, false).catch(console.error)
+          return
+        }
+        this.filesService
+          .openOverwriteDialog(exist)
+          .then((overwrite) => {
+            if (overwrite) {
+              this.addFiles(files, true).catch(console.error)
+            }
+          })
+          .catch(console.error)
       }
     }
 
diff --git a/frontend/src/app/applications/spaces/components/spaces-browser.component.ts b/frontend/src/app/applications/spaces/components/spaces-browser.component.ts
@@ -574,33 +574,31 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
 
   async onUploadFiles(ev: { files: File[] }, isDirectory = false) {
     let overwrite = false
+    const selectedFiles = [...ev.files]
     if (isDirectory) {
-      const dirName = ev.files[0].webkitRelativePath.split('/')[0]
-      const dirExists = this.files.find((f) => f.name.toLowerCase() === dirName.toLowerCase())
+      const dirName = selectedFiles[0].webkitRelativePath.split('/')[0].normalize()
+      const dirExists = this.files.find((f) => f.name.normalize().toLowerCase() === dirName.normalize().toLowerCase())
       if (dirExists) {
         overwrite = await this.filesService.openOverwriteDialog([dirExists])
         if (!overwrite) return
       }
     } else {
-      const exist: FileModel[] = this.files.filter((x: FileModel) => [...ev.files].some((f) => f.name.toLowerCase() === x.name.toLowerCase()))
+      const exist: FileModel[] = this.files.filter((x: FileModel) =>
+        selectedFiles.some((f) => f.name.normalize().toLowerCase() === x.name.normalize().toLowerCase())
+      )
       if (exist.length > 0) {
         overwrite = await this.filesService.openOverwriteDialog(exist)
         if (!overwrite) return
       }
     }
-    this.filesUpload.addFiles(ev.files, overwrite).catch(console.error)
+    this.filesUpload.addFiles(selectedFiles, overwrite).catch(console.error)
   }
 
-  async onDropFiles(ev: { dataTransfer: { files: File[] } }) {
-    let overwrite = false
+  onDropFiles(ev: { dataTransfer: { files: File[] } }) {
     const exist: FileModel[] = this.files.filter((x: FileModel) =>
-      [...ev.dataTransfer.files].some((f) => f.name.toLowerCase() === x.name.toLowerCase())
+      [...ev.dataTransfer.files].some((f) => f.name.normalize().toLowerCase() === x.name.normalize().toLowerCase())
     )
-    if (exist.length > 0) {
-      overwrite = await this.filesService.openOverwriteDialog(exist)
-      if (!overwrite) return
-    }
-    this.filesUpload.onDropFiles(ev, overwrite)
+    this.filesUpload.onDropFiles(ev, exist)
   }
 
   decompressFile() {

Original file line number	Diff line number	Diff line change
`@@ -57,11 +57,15 @@ export class FilesUploadService {`
`57`	`57`	`}`
`58`	`58`	`}`
`59`	`59`
`60`		`- onDropFiles(ev: any, overwrite: boolean) {`
	`60`	`+ onDropFiles(ev: any, exist: FileModel[]) {`
	`61`	`+ /*`
	`62`	`+ Important: dataTransfer.items must be accessed synchronously before any async operation; overwrite is handled after all analyses.`
	`63`	+ Parameter `exist`: files already present in the current drop target.
	`64`	`+ */`
`61`	`65`	`if (ev.dataTransfer.items && ev.dataTransfer.items[0]?.webkitGetAsEntry) {`
`62`		`- this.webkitReadDataTransfer(ev, overwrite)`
	`66`	`+ this.webkitReadDataTransfer(ev, exist)`
`63`	`67`	`} else {`
`64`		`- this.addFiles(ev.dataTransfer.files, overwrite).catch(console.error)`
	`68`	`+ this.addFiles(ev.dataTransfer.files, exist.length > 0).catch(console.error)`
`65`	`69`	`}`
`66`	`70`	`}`
`67`	`71`
`@@ -101,7 +105,7 @@ export class FilesUploadService {`
`101`	`105`	`return sort`
`102`	`106`	`}`
`103`	`107`
`104`		`- private webkitReadDataTransfer(ev: any, overwrite: boolean) {`
	`108`	`+ private webkitReadDataTransfer(ev: any, exist: FileModel[]) {`
`105`	`109`	`let queue = ev.dataTransfer.items.length`
`106`	`110`	`const files: FileUpload[] = []`
`107`	`111`	`const readDirectory = (reader: any) => {`
`@@ -134,7 +138,18 @@ export class FilesUploadService {`
`134`	`138`	`}`
`135`	`139`	`const decrement = () => {`
`136`	`140`	`if (--queue == 0) {`
`137`		`- this.addFiles(files, overwrite).catch(console.error)`
	`141`	`+ if (exist.length <= 0) {`
	`142`	`+ this.addFiles(files, false).catch(console.error)`
	`143`	`+ return`
	`144`	`+ }`
	`145`	`+ this.filesService`
	`146`	`+ .openOverwriteDialog(exist)`
	`147`	`+ .then((overwrite) => {`
	`148`	`+ if (overwrite) {`
	`149`	`+ this.addFiles(files, true).catch(console.error)`
	`150`	`+ }`
	`151`	`+ })`
	`152`	`+ .catch(console.error)`
`138`	`153`	`}`
`139`	`154`	`}`
`140`	`155`