How to upload multiple files using Jquery/Ajax - php

Question

I m trying to upload two different files using Jquery and Ajax along with a text box.
However I can able to upload a single file and textbox using the code I have, but when I try to add another input type file, it breaks and doesn't upload any.
The code for single input type file I have: (upload fine)
test.php
<form method="post" action="" enctype="multipart/form-data" id="myform">
<div class='preview'><p class="temp"></p></div>
<div >
<input type="text" id="title" name="title" />
<input type="file" id="image" name="image" />
<input type="file" id="image" name="image2" />
<input type="button" class="button" value="Upload" id="but_upload">
</div>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#but_upload").click(function(){
var fd = new FormData();
var files = $('#image')[0].files;
var title = $("#title").val();
fd.append('image',files[0]);
fd.append('title',title);
$.ajax({
url:'test2.php',
type:'post',
data:fd,
contentType: false,
processData: false,
success:function(response){
if(response != 0){
$(".temp").html(response);
$('.preview').show();
}else{
alert('File not uploaded');
}
}
});
});
});
</script>
test2.php
<?php
/* Getting file name */
$filename = $_FILES['image']['name'];
$title = $_POST['title'];
/* Location */
$location = "images-main/post-images/".$filename;
$imageFileType = pathinfo($location,PATHINFO_EXTENSION);
$imageFileType = strtolower($imageFileType);
/* Valid extensions */
$valid_extensions = array("jpg","jpeg","png");
$response = 0;
/* Check file extension */
if(in_array(strtolower($imageFileType), $valid_extensions)) {
/* Upload file */
if(move_uploaded_file($_FILES['image']['tmp_name'],$location)){
$response = $title;
}
}
echo $response;
exit;
The code for multiple input type file I have: (doesn't upload anything)
test.php
<form method="post" action="" enctype="multipart/form-data" id="myform">
<div class='preview'><p class="temp"></p></div>
<div >
<input type="text" id="title" name="title" />
<input type="file" id="image" name="image" />
<input type="file" id="image" name="image2" />
<input type="button" class="button" value="Upload" id="but_upload">
</div>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#but_upload").click(function(){
var fd = new FormData();
var files = $('#image')[0].files;
var filess = $('#image')[1].filess;
var title = $("#title").val();
fd.append('image',files[0]);
fd.append('image2',filess[0]);
fd.append('title',title);
$.ajax({
url:'test2.php',
type:'post',
data:fd,
contentType: false,
processData: false,
success:function(response){
if(response != 0){
$(".temp").html(response);
$('.preview').show();
}else{
alert('File not uploaded');
}
}
});
});
});
</script>
test2.php
<?php
/* Getting file name */
$filename = $_FILES['image']['name'];
$filename2 = $_FILES['image2']['name'];
$title = $_POST['title'];
/* Location */
$location = "images-main/post-images/".$filename;
$location2 = "images-main/post-images/".$filename2;
$imageFileType = pathinfo($location,PATHINFO_EXTENSION);
$imageFileType = strtolower($imageFileType);
/* Valid extensions */
$valid_extensions = array("jpg","jpeg","png");
$response = 0;
/* Check file extension */
if(in_array(strtolower($imageFileType), $valid_extensions)) {
/* Upload file */
if(move_uploaded_file($_FILES['image']['tmp_name'],$location)){
if(move_uploaded_file($_FILES['image2']['tmp_name'],$location2)){
$response = $title;
}
}
}
echo $response;
exit;
Any help is greatly appreciated...

Answer 1

This works fine. Thanks to #CBroe:
Here what did the trick.
test.php
<form method="post" action="" enctype="multipart/form-data" id="myform">
<div class='preview'><p class="temp"></p></div>
<div >
<input type="text" id="title" name="title" />
<input type="file" id="image" name="image" />
<input type="file" id="video" name="video" />
<input type="button" class="button" value="Upload" id="but_upload">
</div>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#but_upload").click(function(){
var fd = new FormData();
var files = $('#image')[0].files;
var filess = $('#video')[0].files;
var title = $("#title").val();
fd.append('image',files[0]);
fd.append('video',filess[0]);
fd.append('title',title);
$.ajax({
url:'test2.php',
type:'post',
data:fd,
contentType: false,
processData: false,
success:function(response){
if(response != 0){
$(".temp").html(response);
$('.preview').show();
}else{
alert('File not uploaded');
}
}
});
});
});
</script>
test2.php
<?php
/* Getting file name */
$filename = $_FILES['image']['name'];
$filename2 = $_FILES['video']['name'];
$title = $_POST['title'];
/* Location */
$location = "images-main/post-images/".$filename;
$imageFileType = pathinfo($location,PATHINFO_EXTENSION);
$imageFileType = strtolower($imageFileType);
$location2 = "images-main/post-images/".$filename2;
$imageFileType2 = pathinfo($location2,PATHINFO_EXTENSION);
$imageFileType2 = strtolower($imageFileType2);
/* Valid extensions */
$valid_extensions = array("jpg","jpeg","png");
$response = 0;
/* Upload file */
if(move_uploaded_file($_FILES['video']['tmp_name'],$location2)){
$response = $title;
}
if(move_uploaded_file($_FILES['image']['tmp_name'],$location)){
$response = $title;
}
echo $response;
exit;