add remove logic

tttol · Jul 6, 2024 · c2b911a · c2b911a
1 parent 9934d59
commit c2b911a
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 27 deletions.
diff --git a/main.go b/main.go
@@ -12,7 +12,7 @@ func main() {
 	http.HandleFunc("/s3/", web.S3Handler)
 	http.HandleFunc("/uploadpage", web.UploadIndexHandler)
 	http.HandleFunc("/upload", web.UploadHandler)
-	http.HandleFunc("/delete", web.DeleteHandler)
+	http.HandleFunc("/remove", web.RemoveHandler)
 	http.HandleFunc("/rename", web.RenameHandler)
 	http.HandleFunc("/mkdir", web.MkdirHandler)
 	http.HandleFunc("/rmdir", web.RmdirHandler)

diff --git a/static/index.html b/static/index.html
@@ -33,9 +33,11 @@
                             New File
                         </a>
                     </div>
-                    <div id="mkdir" class="inline-block bg-yellow-500 text-white font-bold py-2 px-2 rounded-full mb-3 hover:opacity-60 cursor-pointer">
+                    <div id="mkdir"
+                        class="inline-block bg-yellow-500 text-white font-bold py-2 px-2 rounded-full mb-3 hover:opacity-60 cursor-pointer">
                         <span>
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 inline">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
+                                class="w-6 h-6 inline">
                                 <path fillRule="evenodd"
                                     d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z"
                                     clipRule="evenodd" />
@@ -56,7 +58,8 @@
                         </svg>
                     </span>
                     <span>
-                        <input type="text" name="dirname" class="text-black rounded-full px-2 py-1" placeholder="Directory name">
+                        <input type="text" name="dirname" class="text-black rounded-full px-2 py-1"
+                            placeholder="Directory name">
                         <button type="submit"
                             class="inline-block bg-yellow-500 text-white w-auto font-bold py-1 px-2 rounded-full hover:opacity-60">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
@@ -71,19 +74,19 @@
                 </p>
             </div>
             {{range .S3Objects}}
-            <div class="border-b-2 border-slate-400 py-3 hover:opacity-60">
-                <p>
+            <div class="border-b-2 border-slate-400 py-3 flex justify-between">
+                <div>
                     {{if .IsDir}}
-                    <span class="pl-2 mr-2">
+                    <span class="pl-2 mr-2 hover:opacity-60">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                             stroke="currentColor" class="size-6 inline">
                             <path stroke-linecap="round" stroke-linejoin="round"
                                 d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z" />
                         </svg>
                     </span>
-                    <span><a href="{{.FullPath}}" class="text-lg">{{.Name}}</a></span>
+                    <span class="hover:opacity-60"><a href="{{.FullPath}}" class="text-lg">{{.Name}}</a></span>
                     {{else}}
-                    <span class="pl-2 mr-2">
+                    <span class="pl-2 mr-2 hover:opacity-60">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                             class="size-6 inline">
                             <path
@@ -92,18 +95,43 @@
                                 d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z" />
                         </svg>
                     </span>
-                    <span><a href="{{.FullPath}}?action=dl" class="text-lg">{{.Name}}</a></span>
+                    <span class="hover:opacity-60"><a href="{{.FullPath}}?action=dl" class="text-lg">{{.Name}}</a></span>
                     {{end}}
-                </p>
+                </div>
+                <div>
+                    <a href="#" class="hover:opacity-60 remove-link" data-target="{{.Name}}" data-path="{{.FullPath}}">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" class="size-6">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+                        </svg>
+                    </a>
+                </div>
             </div>
             {{end}}
+            <form id="removeForm" method="post" action="/remove">
+                <input type="hidden" name="path" value="">
+            </form>
         </div>
     </main>
 </body>
 <script>
     document.querySelector("#mkdir").addEventListener("click", () => {
         document.querySelector("#mkdirDiv").classList.remove("hidden");
-    }); 
+    });
+
+    const remove = (event) => {
+        event.preventDefault();
+        const targetName = event.currentTarget.dataset.target;
+        if (window.confirm(`Are you sure to remove ${targetName}?`)) {
+            document.querySelector(`#removeForm input[name="path"]`).value = event.currentTarget.dataset.path;
+            document.querySelector(`#removeForm`).submit();
+        }
+    }
+
+    document.querySelectorAll('.remove-link').forEach(link => {
+        link.addEventListener('click', remove);
+    });
 </script>
 
-</html>
+</html>
diff --git a/web/rm_controller.go b/web/rm_controller.go
@@ -0,0 +1,27 @@
+package web
+
+import (
+	"log/slog"
+	"net/http"
+	"os"
+	"path/filepath"
+)
+
+func RemoveHandler(w http.ResponseWriter, r *http.Request) {
+	slog.Info("RemoveHandler is called.")
+	if r.Method != "POST" {
+		http.Error(w, "Invalid request method", http.StatusMethodNotAllowed)
+		return
+	}
+
+	path := r.FormValue("path")[len("/s3/"):]
+	err := os.Remove(filepath.Join(UPLOAD_DIR, path))
+	if err != nil {
+		slog.Error("Failed to remove.", "error", err, "path", path)
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+	slog.Info("Remove file success.", "path", path)
+
+	http.Redirect(w, r, "/s3", http.StatusFound)
+}
diff --git a/web/ui_controller.go b/web/ui_controller.go
@@ -49,21 +49,7 @@ func S3Handler(w http.ResponseWriter, r *http.Request) {
 	tmpl.Execute(w, dataMap)
 }
 
-func DeleteHandler(w http.ResponseWriter, r *http.Request) {
-	if r.Method != "POST" {
-		http.Error(w, "Invalid request method", http.StatusMethodNotAllowed)
-		return
-	}
 
-	filename := r.FormValue("filename")
-	err := os.Remove(filepath.Join(UPLOAD_DIR, filename))
-	if err != nil {
-		http.Error(w, err.Error(), http.StatusInternalServerError)
-		return
-	}
-
-	http.Redirect(w, r, "/", http.StatusFound)
-}
 
 func RenameHandler(w http.ResponseWriter, r *http.Request) {
 	if r.Method != "POST" {