improved UI and some fixes

Author: maherxubair

.gitignore

@@ -2,4 +2,4 @@
 node_modules
 pnpm-lock.yaml
 package-lock.json
-m.js
+yarn.lock

README.md

@@ -74,6 +74,7 @@ CACHE_TTL=3600                      # Cache duration in seconds
 MAX_REQUESTS=100                    # Max upload requests in specific time
 RATE_LIMIT=1 minute                 # 100 req per minute
 ```
+Note: If you change `AUTH_TOKEN` then update it in public/script.js at line `189`
 
 ## Starting the Server
 

api/index.js

@@ -2,8 +2,8 @@ const fastifyRateLimit = require("@fastify/rate-limit");
 const fastifyMultipart = require("@fastify/multipart");
 const FileType = require("file-type");
 const stream = require("stream");
-const { runtime, formatBytes } = require("@nexoracle/utils");
-require("dotenv").config();
+const { runtime, formatBytes, env } = require("@nexoracle/utils");
+env.load();
 const mega = require("../mega.js");
 const config = require("../config.js");
 const fastify = require("fastify")({ logger: 0 });
@@ -17,7 +17,7 @@ fastify.register(require("@fastify/static"), {
 
 fastify.register(fastifyRateLimit, config.rateLimit);
 fastify.register(fastifyMultipart, {
-  limits: { fileSize: 1024 * 1024 * config.server.maxFileSize, files: config.server.maxFiles },
+  limits: { fileSize: 1024 * 1024 * Number(config.server.maxFileSize), files: Number(config.server.maxFiles) },
 });
 
 fastify.addHook("onSend", (request, reply, payload, done) => {
@@ -123,6 +123,21 @@ fastify.get("/media/*", async (request, reply) => {
   }
 });
 
+fastify.get("/info", async (request, reply) => {
+  const info = {
+    request_limit: config.rateLimit.max,
+    rate_limit: config.rateLimit.timeWindow,
+    file_size: config.server.maxFileSize,
+    max_files: config.server.maxFiles,
+  };
+
+  if (config.autoDelete.enable === true) {
+    info.auto_delete_time = config.autoDelete.minutes;
+  }
+
+  return reply.send(info);
+});
+
 var start = async () => {
   try {
     await mega.initialize();

package.json

@@ -23,9 +23,8 @@
     "@fastify/multipart": "^9.0.3",
     "@fastify/rate-limit": "^10.2.2",
     "@fastify/static": "^8.1.1",
-    "@nexoracle/utils": "^1.1.18",
+    "@nexoracle/utils": "github:nexoracle/utils",
     "async-mutex": "^0.5.0",
-    "dotenv": "^16.5.0",
     "fastify": "^5.2.1",
     "file-type": "^16.5.4",
     "megajs": "^1.3.5",

public/index.html

@@ -38,6 +38,15 @@ <h1>The fastest way to transfer <span class="highlight">large files</span></h1>
 
         <div class="awesome-container">
             <div class="upload-box">
+                <div class="info-icon" id="uploadInfoIcon">
+                    <i class="fas fa-info-circle"></i>
+                    <div class="info-tooltip" id="infoTooltip">
+                        <div class="tooltip-content">
+                            <p>Loading upload limits...</p>
+                        </div>
+                    </div>
+                </div>
+
                 <div class="drag-zone" id="dragZone">
                     <i class="fa fa-cloud-upload-alt drag-icon"></i>
                     <div class="drag-text">Drag & drop files here</div>

public/script.js

@@ -22,6 +22,34 @@ document.addEventListener("DOMContentLoaded", function () {
   const fileList = document.getElementById("fileList");
   const dragZone = document.getElementById("dragZone");
   const folderUploadBtn = document.getElementById("folderUpload");
+  const infoIcon = document.getElementById("uploadInfoIcon");
+  const infoTooltip = document.getElementById("infoTooltip");
+  const tooltipContent = infoTooltip.querySelector(".tooltip-content");
+
+  infoIcon.addEventListener("click", () => {
+    infoTooltip.classList.toggle("active");
+  });
+
+  document.addEventListener("click", (e) => {
+    if (!infoIcon.contains(e.target)) {
+      infoTooltip.classList.remove("active");
+    }
+  });
+
+  fetch("/info")
+    .then((response) => response.json())
+    .then((data) => {
+      tooltipContent.innerHTML = `
+        <p><i class="fas fa-tachometer-alt"></i>${data.request_limit} requests in ${data.rate_limit}</p>
+        <p><i class="fas fa-file-alt"></i>${data.file_size}MB max file size</p>
+        <p><i class="fas fa-copy"></i>Max ${data.max_files} files can be uploaded</p>
+        ${data.auto_delete_time ? `<p><i class="fas fa-clock"></i>Auto deletes after ${formatMinutes(data.auto_delete_time)}</p>` : ""}
+      `;
+    })
+    .catch((error) => {
+      tooltipContent.innerHTML = `<p>Error loading config info</p>`;
+      console.error("Error fetching config info:", error);
+    });
 
   folderUploadBtn.addEventListener("click", function () {
     const input = document.createElement("input");
@@ -247,4 +275,29 @@ document.addEventListener("DOMContentLoaded", function () {
       }, 300);
     }, 3000);
   }
+
+  function formatMinutes(minutes) {
+    minutes = Number.parseInt(minutes, 10);
+
+    if (isNaN(minutes)) return "unknown time";
+
+    if (minutes < 60) {
+      return `${minutes} minute${minutes !== 1 ? "s" : ""}`;
+    } else if (minutes < 24 * 60) {
+      const hours = Math.floor(minutes / 60);
+      return `${hours} hour${hours !== 1 ? "s" : ""}`;
+    } else if (minutes < 7 * 24 * 60) {
+      const days = Math.floor(minutes / (24 * 60));
+      return `${days} day${days !== 1 ? "s" : ""}`;
+    } else if (minutes < 30 * 24 * 60) {
+      const weeks = Math.floor(minutes / (7 * 24 * 60));
+      return `${weeks} week${weeks !== 1 ? "s" : ""}`;
+    } else if (minutes < 365 * 24 * 60) {
+      const months = Math.floor(minutes / (30 * 24 * 60));
+      return `${months} month${months !== 1 ? "s" : ""}`;
+    } else {
+      const years = Math.floor(minutes / (365 * 24 * 60));
+      return `${years} year${years !== 1 ? "s" : ""}`;
+    }
+  }
 });

public/styles.css

@@ -83,6 +83,7 @@ header {
 }
 
 .upload-box {
+    position: relative;
     background: rgba(30, 30, 30, 0.7);
     backdrop-filter: blur(10px);
     padding: 30px 40px;
@@ -339,6 +340,67 @@ footer {
     color: #ff416c;
 }
 
+.info-icon {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 18px;
+    cursor: pointer;
+    transition: color 0.2s ease;
+    z-index: 10;
+}
+
+.info-icon:hover {
+    color: #ff416c;
+}
+
+.info-tooltip {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    width: 250px;
+    background: rgba(30, 30, 30, 0.95);
+    border-radius: 8px;
+    padding: 12px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: #fff;
+    font-size: 14px;
+    text-align: left;
+    z-index: 100;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(10px);
+    transition: all 0.3s ease;
+}
+
+.info-icon:hover .info-tooltip,
+.info-tooltip.active {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(5px);
+}
+
+.tooltip-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.tooltip-content p {
+    margin: 0;
+    display: flex;
+    align-items: center;
+}
+
+.tooltip-content i {
+    margin-right: 8px;
+    width: 16px;
+    text-align: center;
+}
+
 @keyframes slideIn {
     from {
         transform: translateX(100%);
@@ -380,6 +442,11 @@ footer {
     .file-name {
         max-width: 200px;
     }
+
+    .info-icon {
+        top: 24px;
+        right: 28px;
+    }
 }
 
 @media (max-width: 480px) {
@@ -409,6 +476,11 @@ footer {
     .hero h1 {
         font-size: 1.5rem;
     }
+
+    .info-icon {
+        top: 20px;
+        right: 24px;
+    }
 }
 
 .file-list::-webkit-scrollbar {