0.6.1: Unix sockets support. Pretty ok frontend

README.md

@@ -1,13 +1,14 @@
 # file-uploader
 
 Simple file uploader made on Crystal.
-I'm making this to replace my current File uploader hosted on https://ayaya.beauty which uses https://github.com/nokonoko/uguu
+~~I'm making this to replace my current File uploader hosted on https://ayaya.beauty which uses https://github.com/nokonoko/uguu~~ Already replaced lol.
 
 ## Features
 
 - Temporary file file uploader like Uguu
 - File deletion link (not available in frontend for now)
 - Chatterino and ShareX support
+- Unix socket support if you don't want to deal with all the TCP overhead
 - Low memory usage: Between 6MB at idle and 25MB if a file is being uploaded or retrieved. I will depend of your traffic.
 
 ## TODO

config/config.yml

@@ -7,8 +7,8 @@ filename_length: 3
 # In MiB
 size_limit: 512
 port: 8080
-# unix socket not implemented
-unix_socket: "/run/file-uploader.sock"
+# If you define the unix socket, it will only listen on the socket and not the port.
+unix_socket: "/tmp/file-uploader.sock"
 # In days
 delete_files_after: 7
 # In seconds

public/script.js

@@ -89,7 +89,7 @@ document.addEventListener("DOMContentLoaded", () => {
         uploadText.innerHTML = "0%";
         uploadText.className = "percent"
         copyButton.className = "copy-button"; // Add class for styling
-        copyButton.innerHTML = "Copy Link"; // Set button text
+        copyButton.innerHTML = "Copiar"; // Set button text
         copyButton.style.display = "none"; // Hide initially
 
         // Update progress text

public/styles.css

@@ -1,6 +1,32 @@
+@font-face {
+    font-family: "FG";
+    font-weight: 500;
+    src: url('framd.ttf');
+}
+
+@font-face {
+    font-family: "FG";
+    font-weight: 900;
+    src: url('frahv.ttf');
+}
+@font-face {
+    font-family: "XFG";
+    font-weight: 900;
+    src: url('frahvmod.ttf');
+}
+
+html {
+    font-family: "FG";
+        background-image: linear-gradient(to bottom,
+            rgba(11, 11, 11, 0.92),
+            rgba(11, 11, 11, 0.92)),
+        url(./bliss-small.avif);
+    background-attachment: fixed;
+}
+
 body {
-    font-family: Arial, sans-serif;
-    background-color: #111;
+/*     font-family: Arial, sans-serif; */
+/*     background-color: #111; */
     margin: 0;
     padding: 20px;
 }
@@ -9,6 +35,28 @@ p, h1, h2, h3, h4, h5 {
     color: aliceblue
 }
 
+h1 {
+    font-family: "FG";
+    font-weight: 200;
+    max-width: 100%;
+    overflow-wrap: break-word;
+}
+
+a {
+    text-decoration: none;
+}
+
+.bottom {
+        font-size: 0.9em;
+/*    margin-top: 1ch;*/
+    flex: 1;
+    text-align: center;
+}
+
+.bottom > p {
+    margin: 10px 0px;
+}
+
 .percent {
     color: aliceblue
 }
@@ -22,6 +70,7 @@ p, h1, h2, h3, h4, h5 {
     /*! box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
 }
 
+
 #drop-area {
     /*! border: 2px solid #00ff00; */
     /*! border-radius: 6px; */ 
@@ -44,7 +93,6 @@ p, h1, h2, h3, h4, h5 {
     transition: background-color .25s,width .5s,height .5s;
 }
 
-
 .button {
     display: inline-block;
     padding: 10px 20px;
@@ -59,17 +107,6 @@ p, h1, h2, h3, h4, h5 {
     margin-top: 10px;
 }
 
-.copy-button {
-    margin-top: 5px;
-    padding: 5px 10px;
-    background: #28a745;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    display: none; /* Hidden initially */
-}
-
 nav a, nav > ul
 {
   list-style: none;
@@ -86,7 +123,7 @@ nav a, nav > ul
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border: 2px solid #eee; /* Optional styling for the status box */
+    border: 2px solid #999; /* Optional styling for the status box */
     padding: 5px; /* Optional padding */
     /*! border-radius: 6px; */ /* Optional rounded corners */
     /*! background-color: #f9f9f9; */ /* Optional background color */

src/file-uploader.cr

@@ -32,7 +32,15 @@ Utils.create_files_dir
 Routing.register_all
 
 Jobs.run
-Kemal.run
+
+# Simple but ugly way
+if !CONFIG.unix_socket.nil?
+  Kemal.run do |config|
+    config.server.not_nil!.bind_unix "#{CONFIG.unix_socket}"
+  end
+else
+  Kemal.run
+end
 
 {% if flag?(:release) || flag?(:production) %}
   Kemal.config.env = "production" if !ENV.has_key?("KEMAL_ENV")

src/views/index.ecr

@@ -1,28 +1,3 @@
-<!-- <!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>File Upload with Progress Bar</title>
-    <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-    <div class="container">
-        <h1>File Upload</h1>
-        <div id="drop-area">
-            <p>Drag & Drop your file here or click to upload</p>
-            <input type="file" id="fileElem" accept="*/*" style="display: none;">
-            <label for="fileElem" class="button">Select File</label>
-            <div id="progress-container" style="display: none;">
-                <div id="progress-bar"></div>
-            </div>
-        </div>
-        <div id="status"></div>
-    </div>
-    
-    <script src="script.js"></script>
-</body>
-</html> -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -31,11 +6,12 @@
     <title> <%= host %> </title>
     <link rel="stylesheet" href="styles.css">
     <link rel="icon" href="./favicon.gif" type="image/gif" />
+    <script src="script.js"></script>
 </head>
 <body>
     <div class="container">
-        <h1 style="font-size: 72px; text-align: center; margin: 20px;"> <%= host %> </h1>
-        <p style="text-align: center; font-size: 22px;"> <%= CONFIG.siteInfo %> </p>
+        <h1 style="font-size: 68px; text-align: center; margin: 20px;"><%= host %></h1>
+        <p style="text-align: center; font-size: 22px;"><%= CONFIG.siteInfo %></p>
         <div id="drop-area">
             <p style='padding: 0;margin: 0; color: #123718bf;'>Arrastra, Pega o Selecciona archivos.</p>
             <input type="file" id="fileElem" accept="*/*" style="display: none;">
@@ -45,11 +21,10 @@
     </div>
     <div>
         <div style="text-align:center;">
-        <p> <a href='./chatterino.png'>Chatterino Config</a> </p>
-        <p> <a href='./sharex.sxcu'>ShareX Config</a> </p>
-        <p> <a href='https://codeberg.org/Fijxu/file-uploader-crystal'>file-uploader-crystal (BETA <%= CURRENT_VERSION %>-<%= CURRENT_COMMIT %> @ <%= CURRENT_BRANCH %>)</a> </p>
+        <p>
+            <a href='./chatterino.png'>Chatterino Config</a> | <a href='./sharex.sxcu'>ShareX Config</a> | <a href='https://codeberg.org/Fijxu/file-uploader-crystal'>file-uploader-crystal (BETA <%= CURRENT_VERSION %>-<%= CURRENT_COMMIT %> @ <%= CURRENT_BRANCH %>)</a>
+        </p>
         <p>Archivos alojados: <%= files_hosted %></p>
         </div>
-    <script src="script.js"></script>
 </body>
 </html>