feat: show uploaded files

3 files changed, 83 insertions, 3 deletions

diff --git a/public/index.php b/public/index.php
index 36e50c8..4a1267c 100644
--- a/public/index.php
+++ b/public/index.php
@@ -34,10 +34,20 @@ include_once $_SERVER['DOCUMENT_ROOT'] . '/../lib/partials.php';
                 </form>
             </div>
         </section>
+
+        <section class="box column" style="display:none">
+            <div class="tab">
+                <p>Uploaded files<span title="Your file ownership is stored locally." style="cursor:help">*</span></p>
+            </div>
+            <div class="content grid grid-3 gap-8" id="uploaded-files">
+            </div>
+        </section>
     </main>
 </body>
 
 <script>
+    const uploadedFiles = document.getElementById('uploaded-files');
+
     const formUpload = document.getElementById('form-upload');
     formUpload.addEventListener('submit', (event) => {
         event.preventDefault();
@@ -87,9 +97,66 @@ include_once $_SERVER['DOCUMENT_ROOT'] . '/../lib/partials.php';
                     return;
                 }
 
-                alert(`File ID: ${json.data.id}`);
+                uploadedFiles.innerHTML = addUploadedFile(json.data) + uploadedFiles.innerHTML;
+                uploadedFiles.parentElement.style.display = 'flex';
+
+                // saving file
+                let files = getUploadedFiles();
+                files.unshift(json.data);
+                localStorage.setItem('uploaded_files', JSON.stringify(files));
             });
     }
+
+    function addUploadedFile(file) {
+        return `
+        <div class="box item column gap-4 pad-4">
+            <div class="column align-center justify-center grow">
+                <div style="max-width: 128px; max-height:128px;">
+                    <img src="/userdata/${file.id}.${file.extension}" alt="${file.id}.${file.extension}" style="max-width:100%; max-height: 100%;">
+                </div>
+            </div>
+            <h2>${file.id}.${file.extension}</h2>
+            <div>
+                <p>${file.mime}</p>
+                <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}">
+                    <button>Open</button>
+                </a>
+            </div>
+        </div>
+        `;
+    }
+
+    // loading already existing uploaded files
+    function loadUploadedFiles() {
+        let files = getUploadedFiles();
+
+        let html = '';
+
+        for (const file of files) {
+            html += addUploadedFile(file);
+        }
+
+        if (html.length > 0) {
+            uploadedFiles.parentElement.style.display = 'flex';
+        }
+
+        uploadedFiles.innerHTML = html;
+
+        localStorage.setItem('uploaded_files', JSON.stringify(files));
+    }
+
+    loadUploadedFiles();
+
+    function getUploadedFiles() {
+        let files = localStorage.getItem("uploaded_files");
+        if (!files) {
+            files = '[]';
+        }
+        return JSON.parse(files);
+    }
 </script>
 
 </html>
\ No newline at end of file
diff --git a/public/static/style.css b/public/static/style.css
index 0659b99..7671a92 100644
--- a/public/static/style.css
+++ b/public/static/style.css
@@ -91,6 +91,14 @@ button[type=submit]:hover {
     flex-grow: 1;
 }
 
+.grid {
+    display: grid;
+}
+
+.grid-3 {
+    grid-template-columns: auto auto auto;
+}
+
 .justify-center {
     justify-content: center;
 }
@@ -105,4 +113,8 @@ button[type=submit]:hover {
 
 .gap-8 {
     gap: 8px;
+}
+
+.gap-4 {
+    gap: 4px;
 }
\ No newline at end of file
diff --git a/public/upload.php b/public/upload.php
index d73a975..5c4e3cb 100644
--- a/public/upload.php
+++ b/public/upload.php
@@ -54,8 +54,9 @@ try {
 
     json_response([
         'id' => $file_id,
-        'ext' => $file_ext,
-        'mime' => FILE_ACCEPTED_MIME_TYPES[$file_ext]
+        'extension' => $file_ext,
+        'mime' => FILE_ACCEPTED_MIME_TYPES[$file_ext],
+        'size' => $file['size']
     ], null, 201);
 } catch (RuntimeException $e) {
     json_response(null, $e->getMessage(), 400);