Upload php script

<?php
$uploadDir = __DIR__ . '/uploads/';
$message = '';
$uploadedFiles = [];

// Create 'uploads' folder if it doesn't exist
if (!file_exists($uploadDir)) {
    mkdir($uploadDir, 0777, true);
}

// Process POST upload request
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['media'])) {
    $files = $_FILES['media'];
    $fileCount = count($files['name']);

    for ($i = 0; $i < $fileCount; $i++) {
        if ($files['error'][$i] === UPLOAD_ERR_OK) {
            $tmpName   = $files['tmp_name'][$i];
            $original  = basename($files['name'][$i]);
            
            // Prevent overwriting existing files by appending a timestamp
            $ext       = pathinfo($original, PATHINFO_EXTENSION);
            $filename  = pathinfo($original, PATHINFO_FILENAME);
            $newName   = $filename . '_' . time() . '_' . $i . ($ext ? '.' . $ext : '');
            $target    = $uploadDir . $newName;

            if (move_uploaded_file($tmpName, $target)) {
                $uploadedFiles[] = $newName;
            }
        }
    }

    if (!empty($uploadedFiles)) {
        $message = '<div class="alert success">Successfully uploaded ' . count($uploadedFiles) . ' file(s)!</div>';
    } else {
        $message = '<div class="alert error">Upload failed or no files selected. Check file sizes.</div>';
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile Media Uploader</title>
    <style>
        * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
        body { background-color: #f4f6f8; margin: 0; padding: 20px; color: #333; }
        .card { max-width: 480px; margin: 20px auto; background: #fff; padding: 24px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        h2 { margin-top: 0; font-size: 1.4rem; color: #111; text-align: center; }
        .dropzone { border: 2px dashed #007bff; border-radius: 8px; padding: 30px 15px; text-align: center; background: #f0f7ff; cursor: pointer; margin-bottom: 20px; }
        .dropzone input[type="file"] { display: none; }
        .dropzone label { font-size: 1.1rem; color: #007bff; font-weight: 600; cursor: pointer; display: block; }
        .file-info { margin-top: 10px; font-size: 0.9rem; color: #666; }
        button { width: 100%; background: #007bff; color: white; border: none; padding: 14px; font-size: 1rem; border-radius: 8px; font-weight: bold; cursor: pointer; }
        button:active { background: #0056b3; }
        .alert { padding: 12px; border-radius: 6px; margin-bottom: 16px; text-align: center; font-size: 0.95rem; }
        .success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
    </style>
</head>
<body>

<div class="card">
    <h2>Upload to PC</h2>
    <?= $message ?>
    <form action="upload.php" method="POST" enctype="multipart/form-data">
        <div class="dropzone" onclick="document.getElementById('fileInput').click();">
            <label for="fileInput">📷 Tap here to select Photos/Videos</label>
            <div class="file-info" id="fileCount">Multiple files supported</div>
            <input type="file" name="media[]" id="fileInput" accept="image/*,video/*" multiple onchange="updateCount(this)">
        </div>
        <button type="submit">Upload Files</button>
    </form>
</div>

<script>
function updateCount(input) {
    const label = document.getElementById('fileCount');
    if (input.files.length > 0) {
        label.textContent = input.files.length + " file(s) selected";
        label.style.color = "#007bff";
        label.style.fontWeight = "bold";
    } else {
        label.textContent = "Multiple files supported";
        label.style.color = "#666";
    }
}
</script>

</body>
</html>