From ac07f40b5b27fa99119e863883e437376cd24038 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=F0=9D=93=99=F0=9D=93=BE=F0=9D=93=B5=F0=9D=93=B2?=
 =?UTF-8?q?=F0=9D=93=B8?= <raw@dopehosting.net>
Date: Fri, 25 Oct 2024 18:51:24 +0100
Subject: [PATCH] Update php_upload/upload.php

---
 php_upload/upload.php | 254 +++++++++++++++++++++++++++++++++++-------
 1 file changed, 215 insertions(+), 39 deletions(-)
diff --git a/php_upload/upload.php b/php_upload/upload.php
index 83b79e7..ecd0d41 100644
--- a/php_upload/upload.php
+++ b/php_upload/upload.php
@@ -3,77 +3,239 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Test Upload</title>
-    <!-- Bootstrap CSS -->
-    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <title>Advanced File Upload</title>
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
+    <!-- Font Awesome for Icons -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <style>
+        /* Global Styles */
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #f0f2f5;
+            transition: background-color 0.3s ease, color 0.3s ease;
+        }
+        .container {
+            max-width: 600px;
+            background-color: #ffffff;
+            padding: 40px;
+            border-radius: 12px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            transition: background-color 0.3s ease, color 0.3s ease;
+        }
+        h2 {
+            margin-bottom: 30px;
+            text-align: center;
+            font-weight: 600;
+            color: #333333;
+        }
+        /* Dark Mode Styles */
+        body.dark-mode {
+            background-color: #121212;
+            color: #e0e0e0;
+        }
+        body.dark-mode .container {
+            background-color: #1e1e1e;
+            color: #e0e0e0;
+            box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
+        }
+        /* Toggle Switch */
+        .theme-switch {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+        }
+        /* Progress Bar Styles */
+        .progress {
+            height: 20px;
+            border-radius: 10px;
+            overflow: hidden;
+            background-color: #e9ecef;
+        }
+        .progress-bar {
+            transition: width 0.4s ease, background-color 0.3s ease;
+            background: linear-gradient(90deg, #4facfe, #00f2fe);
+        }
+        /* Upload Speed Display */
+        #uploadSpeed {
+            margin-top: 15px;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        /* Upload Status */
+        #uploadStatus {
+            margin-top: 20px;
+            font-weight: 500;
+            text-align: center;
+        }
+        /* Button Styles */
+        .btn-primary {
+            background-color: #4facfe;
+            border: none;
+            transition: background-color 0.3s ease;
+        }
+        .btn-primary:hover {
+            background-color: #00f2fe;
+        }
+        /* Dark Mode Button */
+        body.dark-mode .btn-primary {
+            background-color: #00bcd4;
+        }
+        body.dark-mode .btn-primary:hover {
+            background-color: #0097a7;
+        }
+    </style>
 </head>
 <body>
+    <!-- Theme Toggle Switch -->
+    <div class="theme-switch">
+        <button id="toggleTheme" class="btn btn-secondary btn-sm">
+            <i class="fas fa-moon"></i>
+        </button>
+    </div>
+
     <div class="container mt-5">
-        <h2>Upload a Large File</h2>
+        <h2>Advanced File Upload</h2>
 
         <?php
-        // Get configuration limits
+        // Handle the file upload if it's an AJAX request
+        if ($_SERVER['REQUEST_METHOD'] == 'POST') {
+            // Ensure the 'uploads' directory exists
+            $target_dir = "uploads/";
+            if (!is_dir($target_dir)) {
+                mkdir($target_dir, 0755, true);
+            }
+
+            // Check if a file was uploaded without errors
+            if (isset($_FILES["fileToUpload"]) && $_FILES["fileToUpload"]["error"] == 0) {
+                $original_filename = basename($_FILES["fileToUpload"]["name"]);
+                $file_extension = pathinfo($original_filename, PATHINFO_EXTENSION);
+                $filename_without_ext = pathinfo($original_filename, PATHINFO_FILENAME);
+
+                // Generate a random keyword (10 characters)
+                $random_keyword = bin2hex(random_bytes(5));
+
+                // Create the new filename
+                $new_filename = $random_keyword . '_' . $filename_without_ext . '.' . $file_extension;
+                $target_file = $target_dir . $new_filename;
+
+                // Move the uploaded file to the target directory with the new name
+                if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
+                    // Get the current site URL
+                    $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
+                    $current_url = $protocol . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']);
+                    $file_url = $current_url . '/' . $target_file;
+
+                    // Return the success message with the file link
+                    echo '<div class="alert alert-success" role="alert">
+                            <i class="fas fa-check-circle me-2"></i>The file has been uploaded successfully.
+                            <a href="' . htmlspecialchars($file_url) . '" target="_blank">View File</a>
+                          </div>';
+                } else {
+                    // Return the error message
+                    echo '<div class="alert alert-danger" role="alert">
+                            <i class="fas fa-exclamation-triangle me-2"></i>Sorry, there was an error uploading your file.
+                          </div>';
+                }
+            } else {
+                // Handle upload errors
+                echo '<div class="alert alert-danger" role="alert">
+                        <i class="fas fa-exclamation-triangle me-2"></i> No file uploaded or there was an upload error.
+                      </div>';
+            }
+            // Terminate the script to prevent the rest of the page from rendering during AJAX
+            exit;
+        }
+        ?>
+
+        <?php
+        // Display configuration limits
         $upload_max_filesize = ini_get('upload_max_filesize');
         $post_max_size = ini_get('post_max_size');
         $max_execution_time = ini_get('max_execution_time');
         $memory_limit = ini_get('memory_limit');
         ?>
 
-        <p><strong>Maximum Upload Size:</strong> <?php echo $upload_max_filesize; ?></p>
-        <p><strong>Maximum POST Size:</strong> <?php echo $post_max_size; ?></p>
-        <p><strong>Maximum Execution Time:</strong> <?php echo $max_execution_time; ?> seconds</p>
-        <p><strong>Memory Limit:</strong> <?php echo $memory_limit; ?></p>
+        <ul class="list-group mb-4">
+            <li class="list-group-item"><strong>Maximum Upload Size:</strong> <?php echo htmlspecialchars($upload_max_filesize); ?></li>
+            <li class="list-group-item"><strong>Maximum POST Size:</strong> <?php echo htmlspecialchars($post_max_size); ?></li>
+            <li class="list-group-item"><strong>Maximum Execution Time:</strong> <?php echo htmlspecialchars($max_execution_time); ?> seconds</li>
+            <li class="list-group-item"><strong>Memory Limit:</strong> <?php echo htmlspecialchars($memory_limit); ?></li>
+        </ul>
 
-        <form id="uploadForm" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post" enctype="multipart/form-data">
-            <div class="form-group">
-                <label for="fileToUpload">Select file to upload:</label>
-                <input type="file" class="form-control" name="fileToUpload" id="fileToUpload">
+        <form id="uploadForm" method="post" enctype="multipart/form-data">
+            <div class="mb-3">
+                <label for="fileToUpload" class="form-label">Select File to Upload:</label>
+                <input type="file" class="form-control" name="fileToUpload" id="fileToUpload" required>
             </div>
-            <button type="submit" class="btn btn-primary" name="submit">Upload File</button>
+            <button type="submit" class="btn btn-primary w-100" name="submit">
+                <i class="fas fa-upload me-2"></i> Upload File
+            </button>
         </form>
 
-        <div class="progress mt-3">
+        <div class="progress mt-4">
             <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
         </div>
 
-        <div id="uploadStatus" class="mt-3"></div>
+        <!-- Display upload speed -->
+        <div id="uploadSpeed" class="mt-3">
+            <i class="fas fa-tachometer-alt"></i> Upload Speed: 0 B/s
+        </div>
 
-        <?php
-        if ($_SERVER['REQUEST_METHOD'] == 'POST') {
-            $target_dir = "uploads/";
-            $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
-            
-            // Check if directory exists, if not create it
-            if (!is_dir($target_dir)) {
-                mkdir($target_dir, 0755, true);
-            }
-
-            // Move uploaded file to the target directory
-            if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
-                echo "<script>document.getElementById('uploadStatus').innerHTML = 'The file " . basename($_FILES["fileToUpload"]["name"]) . " has been uploaded.';</script>";
-            } else {
-                echo "<script>document.getElementById('uploadStatus').innerHTML = 'Sorry, there was an error uploading your file.';</script>";
-            }
-        }
-        ?>
+        <div id="uploadStatus" class="mt-4"></div>
     </div>
 
-    <!-- jQuery and Bootstrap JS -->
-    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <!-- jQuery, Bootstrap JS, and Font Awesome -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"</script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         $(document).ready(function(){
+            // Theme Toggle Functionality
+            $('#toggleTheme').on('click', function(){
+                $('body').toggleClass('dark-mode');
+                // Toggle Icon
+                if ($('body').hasClass('dark-mode')) {
+                    $(this).html('<i class="fas fa-sun"></i>');
+                } else {
+                    $(this).html('<i class="fas fa-moon"></i>');
+                }
+            });
+
             $('#uploadForm').on('submit', function(e){
                 e.preventDefault();
                 var formData = new FormData(this);
+                var startTime = new Date().getTime(); // Start time
+
                 $.ajax({
                     xhr: function() {
                         var xhr = new window.XMLHttpRequest();
                         xhr.upload.addEventListener("progress", function(evt) {
                             if (evt.lengthComputable) {
                                 var percentComplete = Math.round((evt.loaded / evt.total) * 100);
-                                $('.progress-bar').width(percentComplete + '%');
+                                $('.progress-bar').css('width', percentComplete + '%');
                                 $('.progress-bar').attr('aria-valuenow', percentComplete);
+
+                                // Calculate upload speed
+                                var currentTime = new Date().getTime();
+                                var timeElapsed = (currentTime - startTime) / 1000; // in seconds
+                                var bytesUploaded = evt.loaded;
+                                var speed = bytesUploaded / timeElapsed; // bytes per second
+
+                                // Convert bytes to KB/s or MB/s
+                                var speedDisplay;
+                                if (speed < 1024) {
+                                    speedDisplay = speed.toFixed(2) + ' B/s';
+                                } else if (speed < 1048576) {
+                                    speedDisplay = (speed / 1024).toFixed(2) + ' KB/s';
+                                } else {
+                                    speedDisplay = (speed / 1048576).toFixed(2) + ' MB/s';
+                                }
+
+                                $('#uploadSpeed').html('<i class="fas fa-tachometer-alt"></i> Upload Speed: ' + speedDisplay);
                             }
                         }, false);
                         return xhr;
@@ -83,12 +245,26 @@
                     data: formData,
                     contentType: false,
                     processData: false,
+                    beforeSend: function() {
+                        // Reset progress bar and status
+                        $('.progress-bar').css('width', '0%');
+                        $('.progress-bar').attr('aria-valuenow', 0);
+                        $('#uploadSpeed').html('<i class="fas fa-tachometer-alt"></i> Upload Speed: 0 B/s');
+                        $('#uploadStatus').html('');
+                    },
                     success: function(response) {
                         $('#uploadStatus').html(response);
+                        $('.progress-bar').css('width', '100%');
+                        $('.progress-bar').attr('aria-valuenow', 100);
+                        $('#uploadSpeed').html('<i class="fas fa-check-circle"></i> Upload completed.');
+                    },
+                    error: function() {
+                        $('#uploadStatus').html('<div class="alert alert-danger" role="alert"><i class="fas fa-exclamation-triangle me-2"></i>An error occurred during the upload.</div>');
+                        $('#uploadSpeed').html('<i class="fas fa-times-circle"></i> Upload failed.');
                     }
                 });
             });
         });
     </script>
 </body>
-</html>
+</html>
\ No newline at end of file
