c3lf-system-3/templates/found_item_edit.php

<!-- Area Chart Example-->
<div class="card mb-3">
    <div class="card-header">
        <i class="fas fa-edit"></i>
        Edit Item
    </div>
    <div class="card-body">
        <form method="POST" action="" id="found_form">
            <p><input type="text" readonly="true" class="form-control" placeholder="ID" name="id" value="<?php echo $item["id"]; ?>"></p>
            <p><input type="text" class="form-control" placeholder="UID" name="uid" value="<?php echo $item["uid"]; ?>"></p>
            <p><input type="text" class="form-control" placeholder="WANN" name="wann" value="<?php echo $item["date"]; ?>"></p>
            <p><input type="text" class="form-control" placeholder="KISTE" name="container" value="<?php echo $item["container"]; ?>"></p>
            <p><input type="text" class="form-control" placeholder="WAS" name="was" value="<?php echo $item["was"]; ?>"></p>
            <div class="form-group">
                <div class="input-group">
                    <div class="custom-file btn-file">
                        <input type="file" class="custom-file-input" id="inputGroupImage"  name="image" accept="image/*" capture="environment">
                        <label class="custom-file-label" for="inputGroupImage">Choose Image</label>
                        <input type="text" class="form-control" readonly>
                    </div>
                </div>
                <img id='img-upload'  src="/upload/<?php echo $item["hash"]; ?>"/>
            </div>
            <p><button type="submit" class="form-control" onclick="edit_found_item(); return false;">Save</button></p>
        </form>
    </div>
</div>



<script>


    function edit_found_item(){

        var fileInput = document.querySelector('#inputGroupImage');

        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/ajax.php?action=edit_found_item');

        xhr.upload.onprogress = function(e)
        {
            /*
            * values that indicate the progression
            * e.loaded
            * e.total
            */

            $("#alertmessage").collapse('hide');
            $("#successmessage").html((100*e.loaded/e.total)+"%").collapse('show');
            console.log("progress");
            console.log(e);

        };

        xhr.upload.onabort = function (e) {
            console.log("abort");
            console.log(e);
        };

        xhr.upload.onload = function (e) {
            console.log("load");
            console.log(e);
        };

        xhr.upload.ontimeout = function (e) {
            console.log("timeout");
            console.log(e);
        };

        xhr.upload.onerror = function (e) {
            console.log("error");
            console.log(e);
            $("#successmessage").collapse('hide');
            $("#alertmessage").html("error").collapse('show');
        };

        xhr.onload = function(e)
        {
            console.log("foo load");
            console.log(e);
            reply = JSON.parse(xhr.responseText);
            console.log(reply);

            if(reply.status == "ok"){
                $( "#lost_form" ).trigger("reset");
                $('#img-upload').attr('src', "");
                $("#alertmessage").collapse('hide');
                $("#successmessage").html(reply.message).collapse('show');
            }else{
                $("#successmessage").collapse('hide');
                $("#alertmessage").html(reply.message).collapse('show');
            }
        };

        // upload success
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status != 200) {
                    reply = JSON.parse(xhr.responseText);
                    console.log(reply);
                    $("#successmessage").collapse('hide');
                    $("#alertmessage").html(reply.message).collapse('show');

                }

            }else{
                console.log(xhr.readyState);
            }
        }

        var form = new FormData(document.querySelector("#found_form"));
        form.append('title', fileInput.files[0].name);
        form.append('image', fileInput.files[0]);

        xhr.send(form);


    }


    $(document).ready( function() {
        $(document).on('change', '.btn-file :file', function() {
            var input = $(this),
                label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
            input.trigger('fileselect', [label]);
        });

        $('.btn-file :file').on('fileselect', function(event, label) {

            var input = $(this).parents('.input-group').find(':text'),
                log = label;

            if( input.length ) {
                input.val(log);
            } else {
                if( log ) alert(log);
            }

        });
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#img-upload').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

        $("#inputGroupImage").change(function(){
            readURL(this);
        });
    });

</script>