3 files changed, 68 insertions, 15 deletions
diff --git a/static/multifile-service.ts b/static/multifile-service.ts
index d1bc78e7e..3f8b7d64f 100644
--- a/static/multifile-service.ts
+++ b/static/multifile-service.ts
@@ -350,6 +350,12 @@ export class MultifileService {
         return file && file.editorId > 0 ? file.editorId : null;
     }
 
+    private getFileByFilename(filename: string): MultifileFile | undefined {
+        return _.find(this.files, (file: MultifileFile) => {
+            return file.filename === filename;
+        });
+    }
+
     public getMainSourceEditorId(): number | null {
         const file = _.find(this.files, (file: MultifileFile) => {
             return file.isIncluded && this.isMainSourceFile(file);
@@ -388,6 +394,14 @@ export class MultifileService {
         return file;
     }
 
+    public removeFileByFilename(filename: string): MultifileFile | undefined {
+        const file = this.getFileByFilename(filename);
+        if (file) {
+            this.files = this.files.filter((obj: MultifileFile) => obj.fileId !== file.fileId);
+        }
+        return file;
+    }
+
     public async excludeByFileId(fileId: number): Promise<void> {
         const file = this.getFileByFileId(fileId);
         if (file) {
diff --git a/static/panes/editor.ts b/static/panes/editor.ts
index 6ae3f487c..6486b2c0d 100644
--- a/static/panes/editor.ts
+++ b/static/panes/editor.ts
@@ -1723,7 +1723,6 @@ export class Editor extends MonacoPane<monaco.editor.IStandaloneCodeEditor, Edit
                     this.clearLinkedLine();
                     this.fadeTimeoutId = null;
                 }, 5000);
-
             }
             this.updateDecorations();
         }
diff --git a/static/panes/tree.ts b/static/panes/tree.ts
index 3a1bc3056..c6e6c1939 100644
--- a/static/panes/tree.ts
+++ b/static/panes/tree.ts
@@ -313,6 +313,20 @@ export class Tree {
         this.refresh();
     }
 
+    private removeFileByFilename(filename: string) {
+        const file = this.multifileService.removeFileByFilename(filename);
+        if (file) {
+            if (file.isOpen) {
+                const editor = this.hub.getEditorById(file.editorId);
+                if (editor) {
+                    editor.container.close();
+                }
+            }
+        }
+
+        this.refresh();
+    }
+
     private addRowToTreelist(file: MultifileFile) {
         const item = $(this.rowTemplate.children()[0].cloneNode(true));
         const stageButton = item.find('.stage-file');
@@ -570,23 +584,49 @@ export class Tree {
         });
     }
 
-    private async addSingleFile(htmlfile) {
-        if (this.multifileService.fileExists(htmlfile.name)) {
-            // todo: overwrite yes/no
-            return;
-        }
-
-        await new Promise(resolve => {
-            const fr = new FileReader();
-            fr.onload = () => {
-                this.multifileService.addNewTextFile(htmlfile.name, fr.result?.toString() || '');
-                this.refresh();
-                resolve(true);
-            };
-            fr.readAsText(htmlfile);
+    private async askForOverwriteAndDo(filename): Promise<void> {
+        return new Promise((resolve, reject) => {
+            if (this.multifileService.fileExists(filename)) {
+                this.alertSystem.ask('Overwrite file', `${_.escape(filename)} already exists, overwrite this file?`, {
+                    yes: () => {
+                        this.removeFileByFilename(filename);
+                        resolve();
+                    },
+                    no: () => {
+                        reject();
+                    },
+                    onClose: () => {
+                        reject();
+                    },
+                    yesClass: 'btn-danger',
+                    yesHtml: 'Yes',
+                    noClass: 'btn-primary',
+                    noHtml: 'No',
+                });
+            } else {
+                resolve();
+            }
         });
     }
 
+    private async addSingleFile(htmlfile): Promise<void> {
+        try {
+            await this.askForOverwriteAndDo(htmlfile.name);
+
+            return new Promise(resolve => {
+                const fr = new FileReader();
+                fr.onload = () => {
+                    this.multifileService.addNewTextFile(htmlfile.name, fr.result?.toString() || '');
+                    this.refresh();
+                    resolve();
+                };
+                fr.readAsText(htmlfile);
+            });
+        } catch {
+            // expected when user says no
+        }
+    }
+
     private numberUsedLines() {
         if (_.any(this.busyCompilers)) return;