DONT ADD ANYTHING HERE!

File Information

Response
Client Side
Server

Code

HTML
<form action="https:phptri.tomgdow.com" method="POST" id="form_one"
    encytpe="multipart/form-data">
    <fieldset class="info">
        <legend>File Information</legend>
        <div>
            <label for="myfile">Choose file to upload</label><br>
            <input type="file" id="myfile" name="myfile">
        </div>
        <div>
            <input type="submit" class="submit">
        </div>

    </fieldset>
    <fieldset class="output">
        <legend>Response</legend>
        <div id="message"></div>

        <div>
            <label for="out-filename" class="hidden" id="label-out-filename">
                Uploaded file
            </label>
            <output for="filename" id="out-filename"></output>
        </div>

        <div>
            <label for="out-filesize" class="hidden" id="label-out-filesize">
                File size
            </label>
            <output for="filesize" id="out-filesize"></output>
        </div>
        <div>
            <label for="out-mimetype" class="hidden" id="label-out-mimetype">
                Mime Type
            </label>
            <output for="mimetype" id="out-mimetype"></output>
        </div>
        <div>
            <label for="out-tempname" class="hidden" id="label-out-tempname">
                File Temp Name
            </label>
            <output for="tempname" id="out-tempname"></output>
        </div>
        <div>
            <label for="out-errors" class="hidden" id="label-out-errors">
                Errors
            </label>
            <output for="errors" id="out-errors"></output>
        </div>
    </fieldset>
    <fieldset>
        <legend>Client Side</legend>
        <label for="filename" class="hidden" id="label-filename">
            <code>formData.get('filename')</code>
        </label>
        <output id="filename"></output><br>

        <label for="filesize" class="hidden"
            id="label-filesize"><code>formData.get('filesize')</code>
        </label>
        <output id="filesize"></output>
    </fieldset>

    <fieldset>
        <legend>Server</legend>
        <label for="server-response" class="hidden" id="label-server-response">
            Full Server Response
        </label><br>
        <output id="server-response"></output>
    </fieldset>
</form>
JavaScript
async function sendData() {

    const formData = new FormData(form_one);

    document.querySelector("#filesize").value = formData.get('myfile').size;
    document.querySelector("#filename").value = formData.get('myfile').name;

    try {
        const response = await fetch("https://phptri.tomgdow.com", {
            method: "POST",
            body: formData
        });

        let result = await response.text();
        let responseArray = result.split(',');
        document.getElementById('out-filename').value = responseArray[0];
        document.getElementById('out-filesize').value = responseArray[1];
        document.getElementById('out-mimetype').value = responseArray[2];
        document.getElementById('out-tempname').value = responseArray[3];
        document.getElementById('out-errors').value = responseArray[4];
        document.getElementById('server-response').value = result;

    } catch (e) {
        console.error(e);
    }
}

document.getElementById('form_one').addEventListener('submit', function (event) {

    event.preventDefault();

    sendData();

    let msg = "Greetings from the PHP File Server (phptri)";

    document.getElementById('message').innerHTML = msg;
    document.getElementById("label-out-filename").style.visibility = "visible";
    document.getElementById("label-out-filesize").style.visibility = "visible";
    document.getElementById("label-out-mimetype").style.visibility = "visible";
    document.getElementById("label-out-tempname").style.visibility = "visible";
    document.getElementById("label-out-errors").style.visibility = "visible";

    document.getElementById("label-filename").style.visibility = "visible";
    document.getElementById("label-filesize").style.visibility = "visible";

    document.getElementById("label-server-response").style.visibility = "visible";

});
php
<?php
echo($_FILES["myfile"]["name"].","
.$_FILES["myfile"]["size"].","
.$_FILES["myfile"]["type"].","
.$_FILES["myfile"]["tmp_name"].","
.$_FILES["myfile"]["error"]) 
?⪧ 

Notes