JSFiddle - React, Tailwind, and code Playground

by Sulthan Allaudeen

HTML

</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">
    Select a photo to upload:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Load" 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>

<?php
if (isset($_POST['submit'])) 
{
echo '<center><h1>succesfully loaded!</h1></center>';
$structure = 'Images/foto/';
$target_file = $structure.basename($_FILES["fileToUpload"]["name"]);
move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file);
}

?>

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: autopx;
    height: 80px;
	max-width:120px;
	padding: 0 10ps 0 10ps;
    background-color: white;
}
.caption {
    /* Make the caption a block so it occupies its own line. */
    display: block;
}