add animation while uploading a dropped file

web/app.go

@@ -36,7 +36,9 @@ func NewWebApp(
 	webmentionService *app.WebmentionService,
 	interactionRepo repository.InteractionRepository,
 ) *WebApp {
-	app := fiber.New()
+	app := fiber.New(fiber.Config{
+		BodyLimit: 50 * 1024 * 1024, // 50MB in bytes
+	})
 	app.Use(middleware.NewUserMiddleware(authorService).Handle)
 
 	indexHandler := NewIndexHandler(entryService, siteConfigService)

web/static/editor.js

@@ -30,6 +30,7 @@ function addFileDrop(id) {
         const formData = new FormData()
         formData.append("file", file)
 
+        textArea.classList.add("drop-file-process")
         fetch(
             "/admin/api/binaries",
             {
@@ -44,6 +45,11 @@ function addFileDrop(id) {
             } else {
                 textArea.value += `\n[${file.name}](${data.location})`
             }
+            textArea.classList.remove("drop-file-process")
+        }).catch(err => {
+            console.error(err);
+        }).finally(() => {
+            textArea.classList.remove("drop-file-process")
         })
 
     }

web/static/style.css

@@ -29,3 +29,24 @@
     border-width: 4px;
     border-color: #5391ff;
 }
+
+@keyframes border-pulsate {
+    0% {
+        border-color:  #5391ff;
+    }
+
+    50% {
+        border-color: rgba(0, 255, 255, 0);
+    }
+
+    100% {
+        border-color:  #5391ff;
+    }
+}
+
+.drop-file-process {
+    border-style: dashed;
+    border-width: 4px;
+    border-color: #5391ff;
+    animation: border-pulsate 2s infinite;
+}