Validate individual files in multiple file upload before uploading them to server

Question

I have a form with 3 separate file input fields. I can't seem to find a way to individually validate their MIME types before uploading them to the server. (The first 2 are supposed to only allow MP3 files, while the last is only supposed to allow only JPEG files.)

How can I do this, or is it best to check the MIME type after the file is uploaded, then either keep it, or delete it and return an error message?

Here is my code:

<form action="upload.php" method="post" enctype="multipart/form-data">

  <div class="col-2">
    <label>
      Full MP3 file
      <input type="file" name="file_array[]" id="file_array[]" tabindex="1" required>
    </label>
  </div>

  <div class="col-2">
    <label>
      Sample MP3 file (30-45 seconds)
      <input type="file" name="file_array[]" id="file_array[]" tabindex="2" required>
    </label>
  </div>

  <div class="col-2">
    <label>
      JPEG Cover Art ( Recommended 400 x 400 px)
      <input type="file" name="file_array[]" id="file_array[]" tabindex="3" required>
    </label>
  </div>

  <div class="col-2">
    <label>
      <progress id="progressBar" value="0" max="100" style="width:100%;">    </progress>
    </label>
  </div>

  <div class="col-submit">
    <input type="submit" value="Upload" class="submitbtn" onclick="uploadFile()">
  </div>

</form>

and this is upload.php

if(isset($_FILES['file_array'])){
    $name_array = $_FILES['file_array']['name'];
    $tmp_name_array = $_FILES['file_array']['tmp_name'];
    $type_array = $_FILES['file_array']['type'];
    $size_array = $_FILES['file_array']['size'];
    $error_array = $_FILES['file_array']['error'];
    for($i = 0; $i < count($tmp_name_array); $i++){
        if(move_uploaded_file($tmp_name_array[$i], "../artists/$id/temp/".$name_array[$i])){
            echo $name_array[$i]." upload is complete<br>";
        } else {
            echo "move_uploaded_file function failed for ".$name_array[$i]."<br>";
        }
    }
}

Answer 1

I think you can use validation at the client side to make the experience more smooth. as Mario pointed, you can use something like this to accept only mp3 files:

<input type="file" accept=".mp3" name="file_array[]" id="file_array[]" tabindex="1" required>

But since you can't trust user data, you must also add server side validation. For example:

if(isset($_FILES['file_array'])){
$name_array = $_FILES['file_array']['name'];
$tmp_name_array = $_FILES['file_array']['tmp_name'];
$type_array = $_FILES['file_array']['type'];
$size_array = $_FILES['file_array']['size'];
$error_array = $_FILES['file_array']['error'];
for($i = 0; $i < 3; $i++){

    if ($i == 2){
        if($type_array[2] != 'image/jpeg'){
            echo 'Invalid file type: ' . $type_array[2];
            break;
        } 
    }
    else {
        if($type_array[$i] != 'audio/mp3'){
            echo 'Invalid file type: ' . $type_array[$i];
            break;
        }
    }

    if(move_uploaded_file($tmp_name_array[$i],"../artists/$id/temp/".$name_array[$i])){
        echo $name_array[$i]." upload is complete<br>";
    } else {
        echo "move_uploaded_file function failed for ".$name_array[$i]."<br>";
    }
}
}

Tested the above code and it seems to be working for me.

Notes:

if you already know the number of uploaded files don't use count since it could cause a risk, and if you want the number of uploaded files at a time to be variable, then make sure the count result doesn't exceed the max value. also use count outside of the loop so its only calculated once.

there are other more strict ways to validate file types, but this what I got now.

hope this helps and give feedback if I wronged in any how.