diff --git a/assets/web/static/fileListing.js b/assets/web/static/fileListing.js
new file mode 100644
index 0000000..ebe9b5d
--- /dev/null
+++ b/assets/web/static/fileListing.js
@@ -0,0 +1,40 @@
+function dragEnter(e) {
+    document.getElementById("uploadoverlay").classList.remove("hidden");
+}
+
+function dragExit(e) {
+    document.getElementById("uploadoverlay").classList.add("hidden");
+}
+document.addEventListener("drop", function(e) {
+    var files = e.target.files || e.dataTransfer.files
+    console.log(files)
+    document.getElementById("uploadoverlay").classList.add("hidden");
+    for (var i = 0; i <= files.length; i++) {
+        upload(files[i]);
+    }
+})
+
+window.addEventListener("dragover",function(e){
+    e = e || event;
+    e.preventDefault();
+},false);
+window.addEventListener("drop",function(e){
+    e = e || event;
+    e.preventDefault();
+},false);
+
+
+var upload = (file) => {
+    var clkepath = document.getElementById("path").value;
+    var formData  = new FormData();
+    formData.append("path", path);
+    formData.append("file", file);
+    fetch('/upload', { // Your POST endpoint
+        method: 'POST',
+        body: formData
+    }).then(
+        success => console.log(success) // Handle the success response object
+    ).catch(
+        error => console.log(error) // Handle the error response object
+    );
+};
\ No newline at end of file
diff --git a/assets/web/static/svgs/newfile.svg b/assets/web/static/svgs/newfile.svg
new file mode 100644
index 0000000..6cc332b
--- /dev/null
+++ b/assets/web/static/svgs/newfile.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#ffffff"
+     stroke-width="1" stroke-linecap="butt" stroke-linejoin="round">
+    <path d="M20 11.08V8l-6-6H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h6"/>
+    <path d="M14 3v5h5M18 21v-6M15 18h6"/>
+</svg>
\ No newline at end of file