Upload an image using AJAX and plain old javascript

Question

I am learning AJAX techniques through David Flanagan's excellent book: JavaScript: The Definitive guide. There a section on file uploading with an HTTP POST request. It says there, and I quote, that "the XHR2 API, allows you to upload files by passing a File object to the send() method".

I'll put David's example snippet here and then what I'm doing [which is almost the same thing:

// Find all <input type="file"> elements with a data-uploadto attribute
// and register an onchange handler so that any selected file is
// automatically POSTED to the specified "uploadto" URL. The server's
// response is ignored.

whenReady(function() {  // this function is defined elsewhere in the book. It serves the same purpose as jQuery(document).ready()
    var elts = document.getElementsByTagName('input'); // all input elements
    for(var i = 0; i < elts.length; i++){
        var input = elts[i];
        if(input.type !== "file") continue;     // skip all but file upload elts
        var url = input.getAttribute('data-uploadto');  // get upload url
        if (!url)   continue;

        input.addEventListener('change', function(){    // when user selects a file
            var file = this.files[0];       // assume a single file selection
            if(!file) return;               // If no file, do nothing
            var xhr = new XMLHttpRequest(); // Create a new request
            xhr.open('POST', url);          // POST to the URL
            xhr.send(file);                 // Send the file as body
        }, false);
    }
});

I am trying to replicate the same idea with an <input type="file"> element in my html. That's all I have, included the following JavaScript in the bottom of the html page:

<script>
var input = document.querySelector('input[type="file"]');
input.addEventListener('change', function(){
var imageFile = input.files[0];
var request = new XMLHttpRequest();
request.onreadystatechange = function(){
    if(request.readyState === XMLHttpRequest.DONE && request.status === 200) console.log('Image has been uploaded');
}
request.open('POST', /* I type here the url for the root directory of the site / html file I'm working with */);
request.send(imageFile);
}); 
</script>

Notes:

1. The type of file I'm trying to upload is an image.
2. I am working under the assumption that the image I'm trying to upload doesn't need some PHP script to do soemthing with it.
3. As you can see, I'm using plain old javscript,
4. I know it's know working because I am not seeing the image file I am supposed to have uploaded through the javscript snippet.

So my question here is: is there soemthing wrong with the javascript here (I don't see any console errors)? or, Which other mechanism, using ajax would allow me to upload an image?

Thanks for your patience.

Answer 1

You should be using FormData to send the file up to the server.

var formData = new FormData();
formData.append("image", input.files[0]);
request.send(formData);

But you are going to need logic on the server to read the file and save it. Think about what happens if we could just randomly push any file to any server.

Answer 2

One way to deal with this is to use FileReader(), this code will produce base64 of image.

 var input = document.querySelector('input[type=file]'); input.onchange = function(e) { var reader = new FileReader(); reader.onload = function(e) { console.log(this.result); } reader.readAsDataURL(e.target.files[0]); } 

 <input type="file"/>