I have an art and music upload system using PHP. Now, the art system is working perfectly (when a user uploads art, that is inserted into the database, inserted in the admin page where I can approve or reject, etc). Each art also uploads in a directory file in the project called /uploads.
However, uploading music isn’t working. With the current code that I have, when I try to upload music, it displays this following error:
Warning: Undefined array key "file" in /Applications/MAMP/htdocs/skene/upload_process.php on line 39
Warning: Trying to access array offset on value of type null in /Applications/MAMP/htdocs/skene/upload_process.php on line 39
Invalid file type for music.
Here are my files.
upload.php:
<!-- Art Upload Form -->
<div id="artUploadForm" class="upload-form">
<form action="upload_process.php" method="POST" enctype="multipart/form-data">
<div class="upload-container">
<!-- Clickable Upload Box -->
<div class="upload-box" onclick="document.getElementById('artFile').click();" id="artPreviewBox">
<input type="file" id="artFile" name="file" class="hidden" accept=".jpg,.jpeg,.png,.gif" required onchange="previewArt(event)">
<label for="artFile" class="upload-placeholder" id="artPlaceholder">+</label>
</div>
<!-- Form Inputs -->
<div class="upload-details">
<h2>Upload Content</h2>
<p>Upload your artwork and describe its significance.</p>
<input type="hidden" name="upload_type" value="art">
<input type="text" name="artist_name" placeholder="Full Name" class="input-field" required>
<textarea name="description" placeholder="Artwork Description" class="input-field" required></textarea>
<select name="category" class="input-field" required>
<option value="" disabled selected>Select Category</option>
<option value="Painting">Painting</option>
<option value="Illustration">Illustration</option>
<option value="Photography">Photography</option>
</select>
<button type="submit" class="upload-btn">Upload Art</button>
</div>
</div>
</form>
</div>
<!-- Music Upload Form -->
<div id="musicUploadForm" class="upload-form hidden">
<form action="upload_process.php" method="POST" enctype="multipart/form-data">
<div class="upload-container">
<!-- Clickable Upload Box -->
<div class="upload-box" onclick="document.getElementById('musicFile').click();" id="musicPreviewBox">
<input type="file" id="musicFile" name="file" class="hidden" accept=".mp3,.wav,.ogg" required onchange="previewMusic(event)">
<label for="musicFile" class="upload-placeholder" id="musicPlaceholder">+</label>
</div>
<!-- Form Inputs -->
<div class="upload-details">
<h2>Upload Content</h2>
<p>Upload your musical piece and describe its inspiration.</p>
<input type="hidden" name="upload_type" value="music">
<input type="text" name="artist_name" placeholder="Full Name" class="input-field" required>
<textarea name="description" placeholder="Music Description" class="input-field" required></textarea>
<select name="category" class="input-field" required>
<option value="" disabled selected>Select Genre</option>
<option value="Classical">Classical</option>
<option value="Jazz">Jazz</option>
<option value="Electronic">Electronic</option>
<option value="Rock">Rock</option>
</select>
<button type="submit" class="upload-btn">Upload Music</button>
</div>
</div>
</form>
</div>
</div>
upload_process.php:
<?php
// Database Connection
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "skene";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$artist_name = $_POST['artist_name'];
$description = $_POST['description'];
$category = $_POST['category'];
$upload_type = $_POST['upload_type'];
$target_dir = "uploads/";
// Ensure the uploads directory exists (automatically creates it)
if (!is_dir($target_dir)) {
if (!mkdir($target_dir, 0777, true)) {
die("Failed to create upload directory.");
}
}
// Check if directory is writable
if (!is_writable($target_dir)) {
die("Error: Upload directory is not writable. Check permissions.");
}
// Generate unique filename
$file_name = basename($_FILES["file"]["name"]);
$target_file = $target_dir . time() . "_" . $file_name;
$file_type = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));
// Allowed file types
$allowed_art = ["jpg", "jpeg", "png", "gif"];
$allowed_music = ["mp3", "wav", "ogg"];
if ($upload_type == "art" && !in_array($file_type, $allowed_art)) {
die("Invalid file type for artwork.");
}
if ($upload_type == "music" && !in_array($file_type, $allowed_music)) {
die("Invalid file type for music.");
}
// Move uploaded file
if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
$stmt = $conn->prepare("INSERT INTO creators_uploads (type, artist_name, description, category, file_path, status) VALUES (?, ?, ?, ?, ?, 'pending')");
$stmt->bind_param("sssss", $upload_type, $artist_name, $description, $category, $target_file);
if ($stmt->execute()) {
echo "Upload successful! Awaiting admin approval.";
} else {
echo "Database error: " . $stmt->error;
}
$stmt->close();
} else {
echo "Error: Unable to upload file.";
}
$conn->close();
}
?>
P.S. My Javascript Functions (if necessary):
// Function to preview uploaded artwork
function previewArt(event) {
let file = event.target.files[0];
if (file) {
let reader = new FileReader();
reader.onload = function(e) {
let previewBox = document.getElementById("artPreviewBox");
previewBox.style.backgroundImage = "url('" + e.target.result + "')";
previewBox.style.backgroundSize = "cover";
previewBox.style.backgroundPosition = "center";
previewBox.style.border = "2px solid black";
previewBox.style.borderRadius = "5px";
// Hide placeholder
document.getElementById("artPlaceholder").style.display = "none";
};
reader.readAsDataURL(file);
}
}
// Function to preview uploaded music
function previewMusic(event) {
let file = event.target.files[0];
if (file) {
let reader = new FileReader();
reader.onload = function(e) {
let previewBox = document.getElementById("musicPreviewBox");
previewBox.innerHTML = `
<audio controls>
<source src="${e.target.result}" type="${file.type}">
Your browser does not support the audio element.
</audio>
`;
previewBox.style.border = "2px solid black";
previewBox.style.borderRadius = "5px";
// Hide placeholder
document.getElementById("musicPlaceholder").style.display = "none";
};
reader.readAsDataURL(file);
}
}
</script>
