JSFiddle - React, Tailwind, and code Playground

by stuttufu

HTML

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <!-- JQUERY is a library to write js -->
        <script src="js/jquery.js"></script>
        <!-- my code -->
        <script src="js/scripts.js"></script>
    </head>
    <body>
    
        <form id="upload" action="uploader.php" method="post" enctype="multipart/form-data">
            <!-- INPUT -->
            <label for="file">Nome input:</label>
            <input type="text" name="nome_variabile_per_php" value="" placeholder="suggerimento">
            <!-- FILE -->
            <label for="file">Filename:</label>
            <input type="file" name="file" id="file"><br>
            <input type="submit" name="submit" value="Submit">
        </form>
        
    </body>
</html>

CSS

<?php
$json = array();
$json['status'] = false;
$json['error'] = "no errors";
$json['data'] = null;

$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);

if ($extension == "csv")
 {
  if ($_FILES["file"]["error"] > 0)
    $json['error'] = "Error: " . $_FILES["file"]["error"] . "<br>";
} else {
  $json['error'] = "Invalid file";
}

$csv = array();
if(($handle = fopen($_FILES["file"]["tmp_name"], 'r')) !== FALSE) {
    // necessary for a large csv file
    set_time_limit(0);
    
    $row = 0;
    
    while(($data = fgetcsv($handle, 1000, ';')) !== FALSE) {
        // get the values from the csv
        $csv[$row] = $data;
        
        // inc the row
        $row++;
    }
    fclose($handle);
    
    /* LOGIC HERE */
    if(isset($_POST['nome_variabile_per_php']))
        $variabile_a = $_POST['nome_variabile_per_php'];
    else
        $variabile_a = false;    
    
    var_dump($variabile_a);
    die();
    /* END LOGIC */
    
    $json['status'] = true;
    $json['data'] = $csv;
}else{
    $json['error'] = "Can't open the file";
}

echo json_encode($json);

?>

JavaScript

$(document).ready(function(){
	$('#upload').submit(function(e){
		//e.preventDefault();
		var formData = new FormData($(this)[0]);
		$.ajax({
			url: 'uploader.php',
			type: 'POST',
			xhr: function() { 
				var myXhr = $.ajaxSettings.xhr();
				return myXhr;
			},
			success: function(json){ 
				var csv = $.parseJSON(json);
				if(csv.status===true){
					$('#results').remove();
					var html = "<table id='results'>";
					for(line in csv.data){
						html += "<tr>";
						for(column in csv.data[line]){
							html += "<td>"+csv.data[line][column]+"</td>";
						}
						html += "</tr>";						
					}
					html += "</table>";
					$('body').append(html);
				}else{
					alert(csv.error);
				}
			},
			error: function(){ console.log('js error'); },
			data: formData,
			cache: false,
			contentType: false,
			processData: false
		});
	});
});