Uploaded image is not returned to PHP

I am trying to make a form for editing a product but if I upload a image the image can not be found by my PHP code it throws this error:

Notice: Undefined index: image in C:xampphtdocspagesshopmanageradminproducteditor.php on line 10

Notice: Undefined index: image in C:xampphtdocspagesshopmanageradminproducteditor.php on line 11 Upload failed

This is my Code:

$db = new Database;
    $product = mysqli_fetch_array($db->db_query("SELECT * FROM product WHERE ID = '" . $_GET['id'] . "'"));
    $image = mysqli_fetch_array($db->db_query("SELECT name,src FROM images WHERE id =".$product['image-id']));
    $category = $db->db_query("SELECT * FROM category");
    $productcat = mysqli_fetch_array($db->db_query("SELECT `cat-id` FROM `category-product` WHERE `prod-id` = ".$product['ID']));
    if(isset($_POST['submit'])){
        $uploaddir = '/../../../src/images/';
        $uploadfile = $uploaddir . basename($_FILES['image']['name']);
        if (move_uploaded_file($_FILES['image']['tmp_name'], $uploadfile)) {
            echo "File is valid, and was successfully uploaded.n";
          } else {
            echo "Upload failed";
          }
    }
?>
        <!--page content-->
        <div class="col-9">
            <div style="background-color:#c6c8ca !important; color:black" class="jumbotron">
                <div class="container">

                    <form class="well form-horizontal" action="producteditor.php?id=<?= $_GET['id'] ?>" method="post"
                        id="producteditor_form">
                        <fieldset>

                                            <!-- Upload image input-->

                                            <input id="upload" name="image" type="file" onchange="readURL(this);"
                                                class="form-control border-0" accept="image/*" hidden>
                                            <div class="input-group-append">
                                                <label for="upload" class="btn btn-light m-0 rounded-pill px-4"> <i
                                                        class="fa fa-cloud-upload mr-2 text-muted"></i><small
                                                        class="text-uppercase font-weight-bold text-muted"> Kies
                                                        bestand</small></label>
                                            </div>


                                            <!-- Uploaded image area-->
                                            <div class="image-area mt-4"><img id="imageResult"
                                                src="../../../<?=$image['src']?>" alt="<?=$image['name']?>"
                                                class="img-fluid rounded shadow-sm mx-auto d-block">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            <!-- Button -->
                            <div class="form-group">
                                <div class="text-center">
                                    <button class="btn btn-lg btn-success form-spacing-top"
                                        name="submit">Opslaan</button>
                                </div>
                            </div>

                        </fieldset>
                    </form>
                </div>
            </div><!-- /.container -->
        </div>
    </div>
    <div class="col"></div>
</div>
</div>
<script>
/*  ==========================================
    SHOW UPLOADED IMAGE
* ========================================== */
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function(e) {
            $('#imageResult')
                .attr('src', e.target.result);
        };
        reader.readAsDataURL(input.files[0]);
    }
}

$(function() {
    $('#upload').on('change', function() {
        readURL(input);
        fetch(url, {
            method: 'POST',
            body: readURL(input)
        });
    });
});

/*  ==========================================
    SHOW UPLOADED IMAGE NAME
* ========================================== */
var input = document.getElementById('upload');
var infoArea = document.getElementById('upload-label');

input.addEventListener('change', showFileName);

function showFileName(event) {
    var input = event.srcElement;
    var fileName = input.files[0].name;
    infoArea.textContent = 'File name: ' + fileName;
}
</script>

Answer

Your <form> needs to have the enctype='multipart/form-data' attribute.

See: What does enctype=’multipart/form-data’ mean?

Advertisement

Answer