Basic Multiple file upload with array inserted into database

multi_file_upload.php

<style>

.message-confirm li {line-height: 260%;}.message-confirm {margin-bottom: 15px;position: absolute;top: 0;background: #fff;width: 50%;margin-left: 25%;min-height: 300px;z-index: 3;border: 2px solid;padding-top: 20px;animation-name:message-confirm;animation-iteration-count:1;animation-duration:.5s;animation-fill-mode:forwards;animation-timing-function:ease-in;margin-top:20px;}@-webkit-keyframes message-confirm {0%{margin-top:0;}100%{margin-top:20px;}}@keyframes message-confirm {0%{margin-top:0;}100%{margin-top:20px;}}.file_drag_to:hover,.file_input:hover,.flexor{cursor:pointer}body{padding-top:15px;padding-left:15px;padding-right:15px;margin:0;font-family:arial,sans-serif}.file_drag_to{width:100%;margin-top:15px;height:50%;background:#FFEB3B;border:2px solid #222;position:relative;transition:.5s}.file_input,.flexor{position:absolute;width:100%;height:100%}.the_green{background:#dcffb3!important;transition:.5s ease-in}.file_drag_to:hover{background:#fdfdfd;transition:.5s}.file_input{opacity:0}.flexor{top:0;display:flex;transition:.6s}.flexor:hover{background:red;transition:.5s}.flexor h3{margin:auto;color:#555}.submit-button{left:0;right:0;margin:40px auto auto 25%;width:50%;padding:17px 6px;background:#FFEB3B;border:none;font-size:20px;transition:.2s;font-weight:700;color:#555}.submit-button:hover{background:#fff492;transition:.3s;cursor:pointer}.flasher{animation-name:flasher;animation-iteration-count:infinite;animation-duration:.9s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}@keyframes flasher{0%,100%{background:#FFEB3B}50%{background:#ffefbf}}
</style>

<?php 
	if(isset($_POST['submit'])){
	 
	$errors = array();
	$uploadedFiles = array();
	$extension = array("mp3");
	$bytes = 1024;
	$KB = 3024;
	$totalBytes = $bytes * $KB;
	$UploadFolder = "mp3";
	 
	$counter = 0;
	 
// get all files inserted into file input and validate
	foreach($_FILES["file"]["tmp_name"] as $key=>$tmp_name)
	{
	    $temp = $_FILES["file"]["tmp_name"][$key];
	    $name = $_FILES["file"]["name"][$key];
	     
	    if(empty($temp))
	    {
	        break;
	    }
	     
	    $counter++;
	    $UploadOk = true;
	// check if file size is larger then total allowed size
	    if($_FILES["file"]["size"][$key] > $totalBytes)
	    {
	        $UploadOk = false;
	        array_push($errors, $name." file size is larger than the 3 MB.");
	    }
	// check if file extension is not mp3 
	   
	    $ext = pathinfo($name, PATHINFO_EXTENSION);
	    if(in_array($ext, $extension) == false){
	        $UploadOk = false;
	        array_push($errors, $name." is invalid file type.");
	    }
	// check if file already exists
	  
	    if(file_exists($UploadFolder."/".$name) == true){
	        $UploadOk = false;
	        array_push($errors, $name." file already exist.");
	    }
	  
	    if($UploadOk == true){
	        move_uploaded_file($temp,$UploadFolder."/".$name);
	        array_push($uploadedFiles, $name);
	    }
	}
	if($counter>0){
	    if(count($errors)>0)
	    {
	        echo "<b>Errors:</b>";
	        echo "<br/><ul class='message-confirm'>";
	        foreach($errors as $error)
	        {
	            echo "<li>".$error."</li>";
	        }
	        echo "</ul><br/>";
	    }
// if everything is ok and uploaded files are more the zero do this -->     
	    if(count($uploadedFiles)>0){
	        echo "<b>Uploaded Files:</b>";
	        echo "<br/><ul class='message-confirm'>";
	        foreach($uploadedFiles as $fileName)
	        {
	            echo "<li>".$fileName."</li>";

	            $servername = "ftp.fonetiks.org";
				$username = "foneti2_mathewbo";
				$password = "4,Wxf(-?(uUR";
				$dbname = "foneti2_words";
// remove file extension for database table
				$withoutExt = preg_replace('/\\.[^.\\s]{3,4}$/', '', $fileName);

				try {
				    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
				    // set the PDO error mode to exception
				    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

				    $sql = "INSERT INTO words (word_eng)
				    VALUES ('$withoutExt')";
				    // use exec() because no results are returned
				    $conn->exec($sql);
				    echo "New Word has been added to howJsay - ";
					echo $withoutExt;
				    }
				catch(PDOException $e)
				    {
				    echo $sql . "<br>" . $e->getMessage();
				    }

				$conn = null;


	        }
	        echo "</ul><br/>";

			echo count($uploadedFiles)." file(s) are successfully uploaded.";


	    }                               
	}
	else{
	    echo "Please, Select file(s) to upload.";
	}
} 
?>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

<form method='post' action='' enctype='multipart/form-data'>
	<div class="file_drag_to">
		 <div class="flexor">
		     <h3 id="log">CLICK HERE OR DRAG MP3 FILES INTO THIS AREA</h3>
		     <p id="log"></p>
	     </div>
	     <input class="file_input" type="file" name="file[]" id="file" accept=".mp3" multiple>
	</div>
 	<input type='submit' name='submit' value='START UPLOAD' class="submit-button">
</form>
<script>

$(document).ready(function() {
 
	$('body').on('change', 'input[type=file]', function(event){
	   
			var g = $("#file_input").val();

			$(".submit-button").addClass('flasher');
			$(".file_drag_to").addClass("the_green");
			$("#log").text("FILES ADDED NOW CLICK ON START UPLOAD!");

	});

	$('.message-confirm').click(function(){
		$(this).hide();
	});
});


</script>