JSFiddle - React, Tailwind, and code Playground

by Sulthan Allaudeen

HTML

<style type="text/css">
 
    div.item {
    /* To correctly align image, regardless of content height: */
    vertical-align: top;
    display: inline-block;
    /* To horizontally center images and caption */
    text-align: center;
    /* The width of the container also implies margin around the images. */
    width: 140px;
	height: 140px;
}
img {
    width: auto;
	max-width: 120px;
	overflow:hidden;
    height: 80px;
	padding: 0 10px 0 10px;
    background-color: white;
}
.caption {
    /* Make the caption a block so it occupies its own line. */
    display: block;
}
 
</style>
 
 
</head>
<body>
<div style="position:absolute; display:block; margin:2em 25vw; font-size:1.5em; max-width:60vw ">
<form action="" method="post" enctype="multipart/form-data">
    Seleziona un'immagine da caricare:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Carica" name="submit">
</form>
 
<?php 
$dir = 'Images/foto/'; 
$files = scandir($dir);
$maxnum = count($files); 
?> 
 
 
<?php $i = 2; 
for ($j = 0; $j < $maxnum; $j++) { 
 
$k = $i + 5; 
for ($i; $i < $k; $i++) { 
If ($i == $maxnum) { break; } 
 
echo '<div class="item"><a href="'.$dir.$files{$i}.'"><img src="'.$dir.$files{$i}.'"></a> ';
?>
 
<span class="caption">
<a href='photo_upload.php?delete=<?php echo $dir.$files{$i}?>'>
elimina
</a> 
</span>
</div>
<?php
 if (isset($_GET['delete'])) 
    {
        unlink($_GET['delete']);
 
        $_SESSION['delete'] = $_GET['delete'];
        unset($_GET['delete']);
        $url = $_SERVER['SCRIPT_NAME'].http_build_query($_GET);
		header("Refresh:0; url=".$url);
    }
 
}
}
?> 
 
 
 
</div>
</body>
</html>
 
<?php
if (isset($_POST['submit'])) 
{
echo '<center><h1>Il file è stato caricato correttamente!</h1></center>';
$structure = 'Images/foto/';
$target_file = $structure.basename($_FILES["fileToUpload"]["name"]);
move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file);
header("Refresh:0; url=".$url);
}  ...