Added a max file size config option

README.md

@@ -35,7 +35,7 @@ git clone https://github.com/Kathund/ShareX-API.git
 npm install
 ```
 
-3. Setup Config by renaming the `config.example.json` to `config.json` and filling in the required information.
+3. Setup Config by renaming the `config.example.json` to `config.json` and filling in the required information. (More information on the configuration options can be found [here](#configuration-options))
 4. Start the API by running the following command:
 
 ```bash
@@ -51,3 +51,25 @@ To setup your new ShareX API and make it work with ShareX you will need to do th
 3. From there navigate to folder where you have downloaded the config file and open it with ShareX.
 4. Your will be promoted if you want ot make `ShareX-Uploader` your default uploader, click yes.
 5. You are now ready to use the API with ShareX.
+
+## configuration Options
+
+### Port
+
+The `port` option is the port that the API is running on. This is not required to be changed unless you are running someone else on the default `3000` port.
+
+### URL
+
+The `url` option is the url that the API is running on. For example if the API is running on `https://example.com` then the `url` option would be `https://example.com`. This needs to be set so the API knows what url to use when generating the ShareX config file and returning the file url when the user uploads a file.
+
+### Name Hide
+
+The `nameHide` option hides the original file name and generates a random name for the file. This file name is 10 characters long and is a random string of all the letters in the alphabet (upper and lower) and 0-9. This is useful for hiding the original file name and making it harder for people to guess the file name.
+
+### Key
+
+The `key` option is the key that is used to authenticate the user when uploading a file. This must be set to a random string of characters and should be kept secret. This is used to authenticate the user when uploading a file to the API. This is useful for stopping people from uploading files to your API without your permission.
+
+### Max File Size
+
+The `maxFileSize` option is the maximum file size that the API will accept. This is useful for stopping people from uploading large files to your API and using up all of your server space. This is set in bytes and the default is `104857600 Bytes` (100mb) due to Cloudflare tunnel's max `free` plan only supports 100mb file size.

config.example.json

@@ -1,6 +1,7 @@
 {
   "PORT": 3000,
-  "nameHide": true,
   "url": "URL_OF_THE_CDN",
-  "key": "API_KEY"
+  "nameHide": true,
+  "key": "API_KEY",
+  "maxFileSize": 104857600
 }

index.ts

@@ -1,8 +1,8 @@
-import { errorMessage, otherMessage } from './src/logger';
+import { errorMessage, otherMessage, warnMessage } from './src/logger';
 import { loadEndpoints } from './src/functions';
-import fileUpload from 'express-fileupload';
+import { PORT, url, key } from './config.json';
 import { existsSync, mkdirSync } from 'fs';
-import { PORT, url } from './config.json';
+import fileUpload from 'express-fileupload';
 import express from 'express';
 
 if (!existsSync('./src/files')) {
@@ -25,6 +25,9 @@ try {
     }
     app.listen(PORT, () => {
       otherMessage(`Server started on port ${PORT} @ http://localhost:${PORT}`);
+      if (key === 'API_KEY') {
+        warnMessage('The API Key is still the default key! It is recommended to change this in the config.json file.');
+      }
       otherMessage(`Config is available to be generated @ ${url}/config/generate?key=${global.generateKey}`);
       setTimeout(() => {
         if (global.generateKey === null) return;

src/endpoints/save.ts

@@ -1,9 +1,9 @@
+import { url, key, nameHide, maxFileSize } from '../../config.json';
 import { Application, Request, Response } from 'express';
-import { url, key, nameHide } from '../../config.json';
 import { apiMessage, errorMessage } from '../logger';
 import { existsSync, mkdirSync } from 'fs';
-import { resolve, dirname } from 'path';
 import { generateID } from '../functions';
+import { resolve, dirname } from 'path';
 
 export default (app: Application) => {
   app.post('/save/:name', async (req: Request, res: Response) => {
@@ -24,6 +24,10 @@ export default (app: Application) => {
       if (!fileNamePattern.test(fileName)) {
         return res.status(400).json({ error: 'Invalid file name' });
       }
+      if (file.size > maxFileSize) {
+        errorMessage('File is too big');
+        return res.status(400).json({ success: false, message: 'File is too big' });
+      }
       const dir = resolve(dirname(''), 'src/files');
       if (!existsSync(dir)) {
         mkdirSync(dir, { recursive: true });

src/public/css/index.css

@@ -21,6 +21,7 @@ body {
   background-color: #dcdcdc;
   justify-content: center;
   align-items: center;
+  font-size: 1.5rem;
   color: #343434;
   height: 100vh;
   display: flex;
@@ -29,18 +30,27 @@ body {
 
 img,
 video {
-  filter: drop-shadow(#00000080 16px 16px 18px);
   border-radius: 16px 16px 0 0;
+  max-height: 75vh;
   max-width: 75vw;
   height: auto;
+  width: auto;
 }
 
-.text {
-  filter: drop-shadow(#00000080 16px 16px 18px);
-  border-radius: 0 0 16px 16px;
+.container {
+  filter: drop-shadow(#000000bf 20px 20px 30px);
   background-color: #bfb9b9;
+  border-radius: 16px;
+}
+
+.text {
   text-align: center;
+  max-height: 75vh;
+  max-width: 75vw;
   padding: 20px;
+  height: auto;
+  width: auto;
+  z-index: 2;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -49,7 +59,8 @@ video {
     color: #dcdcdc;
   }
 
-  .text {
+  .container {
+    filter: drop-shadow(#ffffff1a 20px 20px 30px);
     background-color: #363636;
   }
 }
@@ -66,8 +77,9 @@ video {
   margin-left: -60px;
   border-radius: 6px;
   position: absolute;
-  padding: 5px 0;
-  color: #fff;
+  color: #dcdcdc;
+  padding: 0.25rem;
+  font-size: 1rem;
   bottom: 100%;
   width: 160px;
   z-index: 1;

src/views/pages/index.ejs

@@ -17,23 +17,24 @@
 
 <body>
   <main>
-    <% if (img.endsWith('.mp4')) { %>
-      <video controls>
-        <source src="<%= img %>" type="video/mp4">
-        Your browser does not support the video tag.
-      </video>
+    <div class="container">
+      <% if (img.endsWith('.mp4')) { %>
+        <video controls>
+          <source src="<%= img %>" type="video/mp4"> Your browser does not support the video tag.
+        </video>
       <% } else { %>
         <img src="<%= img %>" alt="Image">
-        <% } %>
-          <div class="text">
-            <h1>Name - <%= data.name %></h1>
-            <div class="tooltip">
-              <h1>Time - <%= getTime(data.timestamp.unix, Intl.DateTimeFormat().resolvedOptions().timeZone) %></h1>
-              <span class="tooltiptext">UTC - <%= data.timestamp.utc %></span>
-            </div>
-            <h1>Date - <%= getDate(data.timestamp.unix, Intl.DateTimeFormat().resolvedOptions().timeZone) %></h1>
-            <h1>Size - <%= data.size.dynamic %></h1>
-          </div>
+      <% } %>
+      <div class="text">
+        <p>Name - <%= data.name %></p>
+        <div class="tooltip">
+          <p>Time - <%= getTime(data.timestamp.unix, Intl.DateTimeFormat().resolvedOptions().timeZone) %></p>
+          <span class="tooltiptext">UTC - <%= data.timestamp.utc %></span>
+        </div>
+        <p>Date - <%= getDate(data.timestamp.unix, Intl.DateTimeFormat().resolvedOptions().timeZone) %></p>
+        <p>Size - <%= data.size.dynamic %></p>
+      </div>
+    </div>
   </main>
 </body>