Getting multiple json objects when uploading mutliple images - php

Question

When I upload multiple images I don't get any info in my console, but when I upload one image then that image's info is shown in my console. What I would like is that if I upload more then one image I can get that info so that I can then loop through it and display it in my page through the addThumbnail() function.
When I upload mutliple images this shows up in my Response in my network tab
{"name":"kitten_01.jpg"}{"name":"kitten_05.jpg"}
and my console in blank, but when I upload one image I get
{"name":"kitten_05.jpg"}
and I get this in my console
Object { name: "kitten_05.jpg" }
Here is my main.js
$(document).ready(function(){
var dropZone = document.getElementById('drop-zone');
$(".upload-area").on('drop', function(e){
e.preventDefault();
var files_list = e.originalEvent.dataTransfer.files;
var formData = new FormData();
for(i = 0; i < files_list.length; i++){
formData.append('file[]', files_list[i]);
}
$.ajax({
url:"upload.php",
method:"POST",
data:formData,
contentType:false,
cache: false,
processData: false,
dataType: 'json',
success:function(response){
addThumbnail(response);
}
})
});
dropZone.ondragover = function(e){
return false;
}
dropZone.ondragleave = function(e){
return false;
}
});
function addThumbnail(data){
var len = $("#drop-zone div.thumbnail").length;
var num = Number(len);
num = num + 1;
var name = data.name;
console.log(data);
$("#uploaded-image").append('<div id="thumbnail_'+num+'" class="thumbnail"></div>');
$("#thumbnail_"+num).append('<img src="uploads/'+name+'" width="100%" height="78%">');
}
and this is my upload.php
$allowed = ['png', 'jpg'];
foreach($_FILES['file']['name'] as $key => $name)
{
$temp = $_FILES['file']['tmp_name'][$key];
$ext = explode('.', $name);
$ext = strtolower(end($ext));
$return_arr = array();
if(in_array($ext, $allowed) && move_uploaded_file($temp, 'uploads/'.$name))
{
$return_arr = array("name" => $name);
}
echo json_encode($return_arr);
}

Answer 1

$allowed = ['png', 'jpg'];
$return_arr = array();
foreach($_FILES['file']['name'] as $key => $name)
{
$temp = $_FILES['file']['tmp_name'][$key];
$ext = explode('.', $name);
$ext = strtolower(end($ext));
if(in_array($ext, $allowed) && move_uploaded_file($temp, 'uploads/'.$name))
{
$return_arr = array("name" => $name);
}
}
echo json_encode($return_arr);