<!DOCTYPE html>
<html>
<head>
<title>Resources Upload Test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
   <div style="text-align:center;">
<h1>Demonstrate how to upload files to resources</h1>
<p><hr /></p>

<form>
 

        <table  style="background-color:aliceblue;">
            <tr><td> Title </td><td> <input type="text" name="file-title" id="title"> </td></tr>
            <tr><td> Description </td><td> <input type="text" name="file-description" id="description"> </td></tr>

            <tr><td>  </td><td><input type="file" name="file" id="files" multiple> </td></tr>
            <tr><td>  </td><td> <button type="submit">Submit</button> </td></tr>
        </table>

</form>

</div>



</body>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
    
    const UPLOAD_SERVER  =  "https://dev-media.wrenchboard.com/upload/resources";  

    e.preventDefault();
    // Prevents HTML handling submission
    const title = document.getElementById("title");
    const description = document.getElementById("description");
    
    const files = document.getElementById("files");
    const formData = new FormData();
    // Creates empty formData object
    formData.append("sessionid", "DCB4EDF07DAAE481820833CC9193002010243BCF865D36FD3D054B66CBD44891");
    formData.append("description", description.value);
    formData.append("title", title.value);
    formData.append("member_id", "1");
    formData.append("action", "11307");
    formData.append("uid", "3119b744-42ad-4834-bb83-b737588754ca");

    // Appends value of text input
    for(let i =0; i < files.files.length; i++) {
        formData.append("files", files.files[i]);
    }
    // Appends value(s) of file input
    // Post data to Node and Express server:
    fetch(UPLOAD_SERVER, {
        method: 'POST',
        body: formData, // Payload is formData object
    })
    .then(res => res.json())
    .then(data => console.log(data));
})

</script>
</html>
<?php
 echo highlight_string(file_get_contents(__FILE__));

