Getting multiple json objects when uploading mutliple images

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);