Upload a file using PHP inside and html document

Question

I am trying to write php in order to insert a picture (or a file) in an html document. The code I have is the following, but I can't seem to manage to upload the picture. This is a part of form validation project. The code I have so far is the following.

<article>
    <figure>

<?php
if(isset($_POST['submit'])){

    $file = $_FILES['file'];
    $file_name = $_FILES['file']['name'];
    $file_type = $_FILES['file']['type'];
    $file_size = $_FILES['file']['size'];
    $file__temp_name = $_FILES['file']['tmp_name'];
    $file_error = $_FILES['file']['error'];

    $fileExt = explode('.', $file_name);
    $fileActualExt = strtolower(end($fileExt));

    $allowed = array('jpg', 'jpeg', 'png');

    echo '<img src="uploads/'.$file_name.'"/>';

    if (in_array($fileActualExt, $allowed)){
        if ($file_error === 0){
            if ($file_size < 1000000){
                $file_name_new = uniqid('', true).".".$fileActualExt;
                $file_destination = 'uploads/'.$file_name_new;
                move_uploaded_file($file__temp_name, $file_destination);

            } else {
                echo "Your file is too big!";
            }
        } else {
            echo "There was an error uploading your file!";
        }
    } else {
        echo "You cannot upload files of this type";
    }
}
?>
    </figure>
</article>


<div id="form">
...
<form enctype="multipart/form-data" method="POST" action="http://localhost/form.php">

    <input type="file" name="file">
    <button type="submit" name="submit">Upload</button>
    <p style="font-size: small ; margin-bottom: 10px ; margin-top: 5px">Browse for a photo</p>

...

Answer 1

If you do this

echo '<img src="uploads/'.$file_name.'"/>';

Before you have done this

move_uploaded_file($file__temp_name, $file_destination);

Then there will be NO IMAGE there to find!

So move this line down after the move_uploaded_file() and use the Correct file name in the src= attribute

echo '<img src="uploads/'.$file_name_new.'"/>';

Or use the variable you created with the full path in

echo "<img src='$file_destination'/>";