0

I'm working on w3schools script to upload an image example

I kept the JS almost the same.

function uploadFile() {
    var form = new FormData();
    form.append('file', document.querySelector('#imageFile').files[0]);
    form.append('upload', true);

    var upload = new XMLHttpRequest();
    upload.open('POST', 'upload.php');
    upload.onreadystatechange = function() {
        if(this.readyState == 4 && this.status == 200) {
            if(this.responseText == 1) {
                document.querySelector('#uploadError').innerText = "Image uploaded successfully.";
                setTimeout(window.location.reload(), 1500);
            }
            else {
                document.querySelector('#uploadError').innerText = this.responseText;
            }
        }
    };
    upload.send(form);
}

This JS just pops up a upload dialog box

this is my upload.php file.

<?php

$target_dir = "imgs/";
$target_file = $target_dir.basename($_FILES["file"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

if(isset($_POST["upload"]))
{
    echo move_uploaded_file($_FILES["file"]["name"], $target_file);
}

?>

I tried to upload a picture "test.jpg". Variables have the following values when I submit.

$target_file: "imgs/test.jpg"

$imageFileType: "jpg"

$_FILES["file"]["name"]: "test.jpg"

I verify if statement is working multiple times just the

move_uploaded_file($_FILES["file"]["name"], $target_file);

is not working

Upload is 'on' in php.ini file

This is the HTML file

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
    <div class="container">
        <div class="row justify-content-md-center">
            <div class="col">
                <h1 class="jumbotron text-center">Image Gallery</h1>
                <hr>
                <div class="row">
                    <div class="col">
                        <button class="btn btn-light mb-3 float-right" data-toggle="modal" data-target="#uploadModal">Upload</button>
                    </div>
                </div>
                <div class="row mb-3">
                    <?php
                        $images = array_diff(scandir('imgs'), array('.', '..'));
                        
                        $html_template = '
                        <div class="col-md-4 my-auto">
                            <img src="imgs/<IMAGE_PATH>" class="img-fluid img-thumbnail" alt="image">
                        </div>';

                        foreach($images as $image)
                        {
                            echo str_replace("<IMAGE_PATH>", $image, $html_template);
                        }
                    ?>
                </div>
            </div>
        </div>
        <div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="uploadModal" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Upload</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <input type="file" accept="image/*" id="imageFile">
                        <p id="uploadError"></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" onclick="uploadFile()">Upload</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
Ömer
  • 59
  • 7
  • Can you show your html form? Do you have one? – mardubbles Apr 03 '22 at 19:49
  • I just edit the post with HTML in it but I dont think problem is in HTML as I said I verified that program goes into that if statement in side upload.php @mardubbles – Ömer Apr 03 '22 at 19:55
  • 3
    `$_FILES["file"]["name"]` contains the original filename. `$_FILES["file"]["tmp_name"]` contains the temporary location where the file is stored. That’s what you want to use as input for `move_uploaded_file()` – rickdenhaan Apr 03 '22 at 19:57
  • thanks @rickdenhaan that solved my problem. if you post this as a solution i can confirm your answer – Ömer Apr 03 '22 at 20:01

0 Answers0