feat: info for file uploader software

5 files changed, 209 insertions, 5 deletions

diff --git a/lib/partials.php b/lib/partials.php
index 2a33bd4..e9b2263 100644
--- a/lib/partials.php
+++ b/lib/partials.php
@@ -4,15 +4,20 @@ include_once $_SERVER['DOCUMENT_ROOT'] . '/../config.php';
 function html_big_navbar()
 {
     echo '' ?>
-    <section class="column justify-center align-center navbar">
+    <section class="column justify-center align-center gap-8 navbar">
         <div class="column justify-center grow">
             <a href="/">
                 <h1><img src="/static/img/brand/big.webp" alt="<?= INSTANCE_NAME ?>"></h1>
             </a>
         </div>
 
-        <div class="row justify-center">
-
+        <div class="row gap-8 justify-center">
+            <a href="/">
+                <button>Home</button>
+            </a>
+            <a href="/uploaders.php">
+                <button>Uploaders</button>
+            </a>
         </div>
     </section>
     <?php ;
diff --git a/public/index.php b/public/index.php
index ef41ae6..9da069d 100644
--- a/public/index.php
+++ b/public/index.php
@@ -77,7 +77,14 @@ include_once $_SERVER['DOCUMENT_ROOT'] . '/../lib/partials.php';
                                 </div>
                             </div>
                         <?php endif; ?>
-                        <p class="font-small">Max file size: <b><?= get_cfg_var('upload_max_filesize') ?></b></p>
+                        <ul class="row gap-8 font-small" style="list-style:none">
+                            <li>
+                                <p class="font-small">Max file size:
+                                    <b><?= get_cfg_var(option: 'upload_max_filesize') ?></b></p>
+                            </li>
+                            <li><a href="/uploaders.php#supported-file-extensions" target="_blank">Supported file
+                                    extensions</a></li>
+                        </ul>
                     </div>
 
                     <div class="column" id="form-text-upload">
@@ -262,6 +269,11 @@ include_once $_SERVER['DOCUMENT_ROOT'] . '/../lib/partials.php';
     }
 
     function addUploadedFile(file) {
+        let file_url = `/${file.id}.${file.extension}`;
+        if (file.urls && file.urls.download_url) {
+            file_url = file.urls.download_url;
+        }
+
         return `
         <div class="box item column gap-4 pad-4">
             <?php if (FILE_THUMBNAILS): ?>
@@ -277,7 +289,7 @@ include_once $_SERVER['DOCUMENT_ROOT'] . '/../lib/partials.php';
                 <p title="${file.size} B">${(file.size / 1024 / 1024).toFixed(2)} MB</p>
             </div>
             <div class="row gap-8">
-                <a href="/${file.id}.${file.extension}">
+                <a href="${file_url}">
                     <button>Open</button>
                 </a>
             </div>
diff --git a/public/static/img/icons/paste_plain.png b/public/static/img/icons/paste_plain.png
new file mode 100644
index 0000000..c0490eb
--- /dev/null
+++ b/public/static/img/icons/paste_plain.png
diff --git a/public/static/style.css b/public/static/style.css
index 15550e4..e0ae3e0 100644
--- a/public/static/style.css
+++ b/public/static/style.css
@@ -56,6 +56,15 @@ footer {
     padding-top: 4px;
 }
 
+code {
+    background: var(--box-tab-background);
+    padding: 4px 8px;
+}
+
+table.vertical {
+    border-spacing: 8px;
+}
+
 /** FORM */
 button[type=submit] {
     background: linear-gradient(0deg, var(--box-tab-background), var(--background));
diff --git a/public/uploaders.php b/public/uploaders.php
new file mode 100644
index 0000000..57cf8b4
--- /dev/null
+++ b/public/uploaders.php
@@ -0,0 +1,178 @@
+<?php
+include_once $_SERVER['DOCUMENT_ROOT'] . '/../config.php';
+include_once $_SERVER['DOCUMENT_ROOT'] . '/../lib/partials.php';
+
+$file_types = [];
+
+foreach (FILE_ACCEPTED_MIME_TYPES as $k => $v) {
+    $type = ucfirst(explode('/', $v)[0]);
+    if (!array_key_exists($type, $file_types)) {
+        $file_types[$type] = [];
+    }
+
+    if (!in_array($k, $file_types[$type])) {
+        array_push($file_types[$type], $k);
+    }
+}
+?>
+<html>
+
+<head>
+    <title>Uploaders - <?= INSTANCE_NAME ?></title>
+    <link rel="stylesheet" href="/static/style.css">
+    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
+    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+</head>
+
+<body>
+    <main>
+        <?php html_big_navbar() ?>
+
+        <section class="column gap-16">
+            <div>
+                <h1>File Uploaders</h1>
+                <p>Configure your software to work with <?= INSTANCE_NAME ?></p>
+            </div>
+
+            <!-- SOFTWARE -->
+            <div class="row gap-8">
+                <!-- SHAREX -->
+                <section class="column">
+                    <div class="column">
+                        <h2>ShareX</h2>
+                        <p class="small-font">(Destinations &rarr; Custom uploader settings &rarr; New)</p>
+                    </div>
+                    <table class="vertical">
+                        <tr>
+                            <th>Name:</th>
+                            <td><code><?= INSTANCE_NAME ?></code></td>
+                        </tr>
+                        <tr>
+                            <th>Request URL:</th>
+                            <td><code class="copy"><?= INSTANCE_URL ?>/upload.php</code></td>
+                        </tr>
+                        <tr>
+                            <th>Destination type:</th>
+                            <td><code>Image uploader</code></td>
+                        </tr>
+                        <tr>
+                            <th>Method:</th>
+                            <td><code>POST</code></td>
+                        </tr>
+                        <tr>
+                            <th>Body:</th>
+                            <td><code>Form data (multipart/form-data)</code></td>
+                        </tr>
+                        <tr>
+                            <th>Headers:</th>
+                            <td><code>Accept: application/json</code></td>
+                        </tr>
+                        <tr>
+                            <th>File form name:</th>
+                            <td><code class="copy">file</code></td>
+                        </tr>
+                        <tr>
+                            <th>URL:</th>
+                            <td><code class="copy">{json:data.urls.download_url}</code></td>
+                        </tr>
+                    </table>
+                    <p>Then, select it via <b>Destinations &rarr; Image uploader &rarr; Custom image
+                            uploader</b></p>
+                </section>
+
+                <!-- CHATTERINO -->
+                <section class="column">
+                    <div class="column">
+                        <h2>Chatterino</h2>
+                        <p class="small-font">(Settings &rarr; External tools &rarr; Image Uploader)</p>
+                    </div>
+                    <table class="vertical">
+                        <tr>
+                            <th>Request URL:</th>
+                            <td><code class="copy"><?= INSTANCE_URL ?>/upload.php</code></td>
+                        </tr>
+                        <tr>
+                            <th>Form field:</th>
+                            <td><code class="copy">file</code></td>
+                        </tr>
+                        <tr>
+                            <th>Extra headers:</th>
+                            <td><code class="copy">Accept: application/json</code></td>
+                        </tr>
+                        <tr>
+                            <th>Image link:</th>
+                            <td><code class="copy">{data.urls.download_url}</code></td>
+                        </tr>
+                    </table>
+                </section>
+            </div>
+
+            <!-- API -->
+            <section class="column gap-16">
+                <h2>API</h2>
+                <div class="column">
+                    <h3>Endpoint</h3>
+                    <hr>
+                    <p><code>POST <span class="copy"><?= INSTANCE_URL ?>/upload.php</span></code></p>
+                </div>
+
+                <div>
+                    <h3>Request Format</h3>
+                    <hr>
+                    <table class="vertical">
+                        <tr>
+                            <th>Method:</th>
+                            <td><code>POST</code></td>
+                        </tr>
+                        <tr>
+                            <th>Content-Type:</th>
+                            <td><code>multipart/form-data</code></td>
+                        </tr>
+                        <tr>
+                            <th>Headers:</th>
+                            <td><code>Accept: application/json</code></td>
+                        </tr>
+                        <tr>
+                            <th>File field:</th>
+                            <td><code>file</code></td>
+                        </tr>
+                        <tr>
+                            <th>Max file size:</th>
+                            <td><code><?= get_cfg_var("upload_max_filesize") ?></code></td>
+                        </tr>
+                    </table>
+                </div>
+
+                <div class="column" id="supported-file-extensions">
+                    <h3>Supported file extensions</h3>
+                    <hr>
+                    <table class="vertical">
+                        <?php foreach ($file_types as $type => $exts): ?>
+                            <tr>
+                                <th><?= $type ?>:</th>
+                                <td style="text-align: justify"><?= implode(' ', $exts) ?></td>
+                            </tr>
+                        <?php endforeach; ?>
+                    </table>
+                </div>
+            </section>
+        </section>
+    </main>
+</body>
+
+<script>
+    const copyButtons = document.querySelectorAll(".copy");
+    for (const copyButton of copyButtons) {
+        const content = copyButton.innerHTML;
+        const button = document.createElement("button");
+
+        button.innerHTML = '<img src="/static/img/icons/paste_plain.png" alt="Copy" />';
+        button.addEventListener("click", () => {
+            navigator.clipboard.writeText(content);
+        });
+
+        copyButton.parentElement.appendChild(button);
+    }
+</script>
+
+</html>
\ No newline at end of file