JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" id="up" />

JavaScript

$("#up").change(function(event){
    var uploadedFile = event.target.files[0]; 
    
     if(uploadedFile.type !== "application/json") { 
        alert("Wrong file type == " + uploadedFile.type); 
        return false;
    }
    
    if (uploadedFile) {
        var readFile = new FileReader();
        readFile.onload = function(e) { 
            var contents = e.target.result;
            var json = JSON.parse(contents);
            alert_data(json);
        };
        readFile.readAsText(uploadedFile);
    } else { 
        console.log("Failed to load file");
    }
});

function alert_data(json)
{
     alert('Name : ' + json.date + ', Family : '+ json.family)
}