AJAX HTML form POST

ajax_form_post.js

/* 
Invalid data will cause the server to silently reject your POST request.
Analyze the POST request on form submission via Chrome Dev tools.
*/

(async () => {

    // create a form data object
    let form = new FormData()

    // populate form fields
    form.append("first_name", "Jhon")
    form.append("last_name", "Corner")
    form.append("submit", "Submit Form")  // needed by some servers

    // Add a file
    // create a File object by from a URL
    let fileURL = 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/150px-Tux.svg.png'
    let fileName = 'tux.png'
    let fileType = 'image/png'
    
    let fileObj = await fetch(fileURL)
        .then(function (res) { return res.arrayBuffer() })
        .then(function (buf) { return new File([buf], fileName, { type: fileType }) })

    // add the file to POST request for upload
    form.append("profile_picture", fileObj)

    // send POST request
    var request = new XMLHttpRequest()
    request.open("POST", "https://mysite.com/upload.php", true)
    request.send(form)

})()