PHP - examples - 10 : uploading , image gallery

codes:
            <div>  
                <form action="#upload" method='post' enctype="multipart/form-data">
                    <input type="file" name="file"/><br><br>
                    <input type="submit" value="Upload"/>
                </form>
                <?php 
                    $name= $_FILES['file']['name'];
                    $tmp_name= $_FILES['file']['tmp_name'];
                    $position= strpos($name, ".");
                    $fileextension= substr($name, $position + 1);
                    $fileextension= strtolower($fileextension);

                    if (isset($name)) {
                        $path= 'php-trial';
                        if (empty($name)) {
                            echo "Please choose a file";
                        } else if (!empty($name)){
                            if (($fileextension !== "jpg") && ($fileextension !== "jpeg") && ($fileextension !== "png") && ($fileextension !== "bmp")) {
                                echo "The file extension must be .jpg, .jpeg, .png, or .bmp in order to be uploaded";
                            } else if (($fileextension == "jpg") || ($fileextension == "jpeg") || ($fileextension == "png") || ($fileextension == "bmp")) {
                                if (move_uploaded_file($tmp_name, $path.$name)) {
                                echo 'Uploaded!';
                                }
                            }
                        }
                    }
                ?>
                <?php
                    if (($fileextension == "jpg") || ($fileextension == "jpeg") || ($fileextension == "png") || ($fileextension == "bmp")) {
                        echo "The image you uploaded is shown below<br><br>";
                        echo  "<img src='$path" . "$name'>";
                        echo "<br><br>";
                    }
                ?>
            </div>   
        
        

code:
            <div class="gallery">
                <?php 
                    $dir = __DIR__.DIRECTORY_SEPARATOR."gallery".DIRECTORY_SEPARATOR;
                    $images = glob("$dir*.{jpeg,jpg,gif,png,bmp,webp}", GLOB_BRACE);
                    foreach($images as $i){
                        $img = basename($i);
                        $caption = substr($img, 0, strrpos($img, "."));
                        printf("<figure><img src='gallery/%s'/><figcaption>%s</figcaption></figure>", $img, $caption);
                        
                    }
                ?>
            </div>
            <style>
            .gallery {display: grid; grid-template-columns: repeat(3, auto); grid-gap: 0.5vw; max-width: 30vw; margin: 0 auto;}
            @media screen and (max-width: 640px) {
                .gallery {grid-template-columns: repeat(2, auto); }
            }
            .gallery img {width: 100%; height: 10vw; object-fit: cover;}
            </style>
            <script>
                window.addEventListener("DOMContentLoaded", () => {
                    var all = document.querySelectorAll(".gallery img");
                    if (all.length>0) { for (let img of all) {
                        img.onclick = () => {
                            if (document.webkitFullscreenElement || document.fullscreenElement) {
                                if (document.exitFullscreen) { document.exitFullscreen(); }
                                else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); }
                            } else {
                                if (img.requestFullscreen) { img.requestFullscreen(); }
                                else if (img.webkitRequestFullscreen) { img.webkitRequestFullscreen(); }
                            }
                        };
                    }}
                });
            </script>