diff --git a/core/client.js b/core/client.js
index 78dfd4de..602bd3b7 100644
--- a/core/client.js
+++ b/core/client.js
@@ -149,12 +149,14 @@ class TfFilesElement extends LitElement {
 		return {
 			current: {type: String},
 			files: {type: Object},
+			dropping: {type: Number},
 		};
 	}
 
 	constructor() {
 		super();
 		this.files = {};
+		this.dropping = 0;
 	}
 
 	file_click(file) {
@@ -178,6 +180,36 @@ class TfFilesElement extends LitElement {
 		return html`<div class="${classes.join(' ')}" @click=${x => this.file_click(file)}>${file}</div>`;
 	}
 
+	async drop(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		this.dropping = 0;
+		for (let file of event.dataTransfer.files) {
+			let text = '';
+			try {
+				text = await file.text();
+			} catch {
+				text = new TextDecoder('latin1').decode(await file.arrayBuffer());
+			}
+			gFiles[file.name] = {
+				doc: new CodeMirror.Doc(text, guessMode(file.name)),
+				generation: -1,
+			};
+			gCurrentFile = file.name;
+		}
+		openFile(gCurrentFile);
+		updateFiles();
+	}
+
+	drag_enter(event) {
+		this.dropping++;
+		event.preventDefault();
+	}
+
+	drag_leave(event) {
+		this.dropping--;
+	}
+
 	render() {
 		let self = this;
 		return html`
@@ -202,9 +234,15 @@ class TfFilesElement extends LitElement {
 					content: '*';
 				}
 			</style>
-			<div>
+			<div @drop=${this.drop} @dragenter=${this.drag_enter} @dragleave=${this.drag_leave}>
 				${Object.keys(this.files).sort().map(x => self.render_file(x))}
 			</div>
+			<div
+				?hidden=${this.dropping == 0}
+				@drop=${this.drop} @dragenter=${this.drag_enter} @dragleave=${this.drag_leave}
+				style="text-align: center; vertical-align: middle; outline: 16px solid red; margin: -8px; background-color: rgba(255, 0, 0, 0.5); position: absolute; left: 16px; top: 16px; width: calc(100% - 16px); height: calc(100% - 16px); z-index: 1000">
+				Drop File(s)
+			</div>
 		`;
 	}
 }
@@ -992,7 +1030,6 @@ function updateFiles() {
 		}]));
 		files.current = gCurrentFile;
 	}
-
 	gEditor.focus();
 }