How can I locally save images and batch upload them using another PHP function?

I am building a simple website where a user can upload multiple images and afterward click on a button to batch upload them to an AWS S3 bucket using PHP. Therefore the images need to be stored locally but also be accessible by PHP. So far I’ve learned that cookies are too small to store images and that the localstorage is not accessible using PHP.

This I what I’ve done so far:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
    <ul>
        <li>
            <h1 class="title" id="pages_count"></h1>
            <div id="images" class="images"></div>
        </li>
        <br>
        <li id="add_img_li">
            <form runat="server">
                <label class="custom-file-upload" id="add_img_btn">Add image
                    <input type="file" name="file" id="imgInp" accept="image/*">
                </label>
            </form>
            <br>
        </li>
        <li>
            <form action="includes/upload.inc.php" method="post" enctype="multipart/form-data">
                <button class="custom-file-upload" id="uploadbtn" type="submit" onclick="btnChange()">Upload</button>
            </form>
        </li>
    </ul>
</div>
<script>

    // hide uploadbtn until image is uploaded
    document.getElementById("uploadbtn").style.visibility = "hidden";

    function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);

        var dataURL = canvas.toDataURL("image/png");

        return dataURL.replace(/^data:image/(png|jpg);base64,/, "");
    }

    // function for converting images to base64
    function getDataUrl(img) {
        // Create canvas
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        // Set width and height
        canvas.width = img.width;
        canvas.height = img.height;
        // Draw the image
        ctx.drawImage(img, 0, 0);
        return canvas.toDataURL('image/jpeg');
    }

    // live image preview
    var uploaded_img_count = 0;
    var current_img = 0;
    var imgs_left = 5;

    function readURL(input) {
        if (input.files && input.files[0]) {
            if (uploaded_img_count < 5) {
                // create image
                console.log("image: " + uploaded_img_count.toString());
                var image = document.createElement("li"); // Create a <button> element
                image.innerHTML = '<img id="preview_' + uploaded_img_count.toString() +
                    '" src="#" alt="Scan" width="100" height="100" draggable="false" class="preview_img" style="visibility: visible;"/><br>'; // hidden
                document.getElementById("images").appendChild(image); // Append <button> to <body>

                var reader = new FileReader();
                reader.onload = function (e) {
                    console.log("imageaaf<sdf: " + current_img.toString());
                    document.getElementById('preview_' + current_img.toString()).src = e.target.result
                    current_img++;
                }

                reader.readAsDataURL(input.files[0]); // convert to base64 string

                // save image to cookie for batch upload
                const img = document.querySelector("#preview_" + uploaded_img_count.toString());
                img.addEventListener('load', function (event) {
                    const dataUrl = getDataUrl(event.currentTarget);
                    document.cookie = "img_" + uploaded_img_count.toString() + "=" + dataUrl +
                        ";expires=Fri, 7 Jan 2022 12:00:00 UTC;path=/";
                    console.log(document.cookie);
                });

                uploaded_img_count++;
                imgs_left--;

                // update pages count label & remove add button if maximum image number is reached
                if (uploaded_img_count >= 5) {
                    document.getElementById('add_img_li').parentNode.removeChild(document.getElementById('add_img_li'));
                }
                document.getElementById('pages_count').innerText = uploaded_img_count.toString() +
                    " / 5 pages uploaded";

                // unhide findtasks button
                document.getElementById("uploadbtn").style.visibility = "visible";
            }
        }
    }

    $("#imgInp").change(function () {
        readURL(this);
    });
</script>

JavaScript
​x
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="content">    <ul>        <li>            <h1 class="title" id="pages_count"></h1>            <div id="images" class="images"></div>        </li>        <br>        <li id="add_img_li">            <form runat="server">                <label class="custom-file-upload" id="add_img_btn">Add image                    <input type="file" name="file" id="imgInp" accept="image/*">                </label>            </form>            <br>        </li>        <li>            <form action="includes/upload.inc.php" method="post" enctype="multipart/form-data">                <button class="custom-file-upload" id="uploadbtn" type="submit" onclick="btnChange()">Upload</button>            </form>        </li>    </ul></div><script>​    // hide uploadbtn until image is uploaded    document.getElementById("uploadbtn").style.visibility = "hidden";​    function getBase64Image(img) {        var canvas = document.createElement("canvas");        canvas.width = img.width;        canvas.height = img.height;​        var ctx = canvas.getContext("2d");        ctx.drawImage(img, 0, 0);​        var dataURL = canvas.toDataURL("image/png");​        return dataURL.replace(/^data:image/(png|jpg);base64,/, "");    }​    // function for converting images to base64    function getDataUrl(img) {        // Create canvas        const canvas = document.createElement('canvas');        const ctx = canvas.getContext('2d');        // Set width and height        canvas.width = img.width;        canvas.height = img.height;        // Draw the image        ctx.drawImage(img, 0, 0);        return canvas.toDataURL('image/jpeg');    }​    // live image preview    var uploaded_img_count = 0;    var current_img = 0;    var imgs_left = 5;​    function readURL(input) {        if (input.files && input.files[0]) {            if (uploaded_img_count < 5) {                // create image                console.log("image: " + uploaded_img_count.toString());                var image = document.createElement("li"); // Create a <button> element                image.innerHTML = '<img id="preview_' + uploaded_img_count.toString() +                    '" src="#" alt="Scan" width="100" height="100" draggable="false" class="preview_img" style="visibility: visible;"/><br>'; // hidden                document.getElementById("images").appendChild(image); // Append <button> to <body>​                var reader = new FileReader();                reader.onload = function (e) {                    console.log("imageaaf<sdf: " + current_img.toString());                    document.getElementById('preview_' + current_img.toString()).src = e.target.result                    current_img++;                }​                reader.readAsDataURL(input.files[0]); // convert to base64 string​                // save image to cookie for batch upload                const img = document.querySelector("#preview_" + uploaded_img_count.toString());                img.addEventListener('load', function (event) {                    const dataUrl = getDataUrl(event.currentTarget);                    document.cookie = "img_" + uploaded_img_count.toString() + "=" + dataUrl +                        ";expires=Fri, 7 Jan 2022 12:00:00 UTC;path=/";                    console.log(document.cookie);                });​                uploaded_img_count++;                imgs_left--;​                // update pages count label & remove add button if maximum image number is reached                if (uploaded_img_count >= 5) {                    document.getElementById('add_img_li').parentNode.removeChild(document.getElementById('add_img_li'));                }                document.getElementById('pages_count').innerText = uploaded_img_count.toString() +                    " / 5 pages uploaded";​                // unhide findtasks button                document.getElementById("uploadbtn").style.visibility = "visible";            }        }    }​    $("#imgInp").change(function () {        readURL(this);    });</script>​

The issue here is that when I try to log the cookies, it just says: img_1=data:image/jpeg; instead of showing me the base64 string. I’d like to save the images on the phone before uploading them for performance reasons. Previously I had to wait about 10 seconds after taking an image until I could capture another one. Are there any other ways to do this without cookies or localstorage?

Answer

Images on a user’s local machine are never accessible to php as it runs on the server. You should look into creating an upload functionality using either HTML forms or JavaScript.

Advertisement

Answer