Upload file with pure Javascript and PHP

Question

I get stuck with my script and I hope somebody can help me. I try to send a file to the server with Javascript and PHP. For this I created a file input element

<input type="file" class="quote_attachment" id="quote_attachment"/>

With Javascript I create a request

<script type="text/javascript">
document.getElementById("quoteform").addEventListener("submit", function(){
    var attachment      = document.getElementById("quote_attachment").value;
    var xhttp           = new XMLHttpRequest();
    xhttp.open("POST", "https://www.mysite/mailer/mailer.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send('&attachment='+attachment);
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var data = JSON.parse(this.responseText);       
        }
    }
    event.preventDefault();
});
</script>

On the serverside I do this with PHP

<?php
if(isset($_POST['attachment'])){
    $allowed = array('ai', 'AI', 'eps', 'EPS', 'pdf', 'PDF', 'svg', 'SVG');
    if($_POST['attachment'] !== ''){
        $get_extension = pathinfo($_POST['attachment'], PATHINFO_EXTENSION);
        if(!in_array($get_extension, $allowed)){
            $errors[] = 'Dit type ondersteunen wij niet';
        }else{
            if(!move_uploaded_file($_FILES["attachment"]["tmp_name"], 'quoteattachment/')){
                echo 'there is something wrong with uploading the file.';
            }
        }
    }   
}
?>

This is not the whole code but only the part of the file handling. If I run the code I get the error "there is something wrong with uploading the file.

Who can help me further with this?

Answer 1

Using document.getElementById("quote_attachment").value; will just return the name of the file in the file input. You should use .files and pass it into a formData object. For example:

<script type="text/javascript">
document.getElementById("quoteform").addEventListener("submit", function(){
    // Get the files in input
    var files = document.getElemenyById("quote_attachment").files;

    // Create formData object
    var formData = new FormData();

    // Might or not be a multi file input, so loop through it
    for (var i = 0; i < files.length; i++) {
        var file = files[i]

        formData.append('files[]', file);
    }

    var xhttp           = new XMLHttpRequest();
    xhttp.open("POST", "https://www.mysite/mailer/mailer.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send('&attachment='+formData);
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var data = JSON.parse(this.responseText);       
        }
    }
    event.preventDefault();
});
</script>

Now if you var_dump in your PHP-function you should get an Array containing all file data. If it does your PHP-function should run without problem.