Load raw image data using AJAX

Question

I'm trying to do a bit of facebook integration with a website, and there's a particular call on the facebook api that post's a picture onto a users account. One of the parameters is the raw image data. The image is stored locally on the web server and I have a url to it. I was intending to load the image on the client using javascript until I learnt I couldn't do this. I'm currently trying an httpxml call to the server with the image url and intending for it to return the image data. This example code works with a url to a csv file, but it doesn't seem to want to read the image files contents. I'm getting an error when I try xmlhttp.responseText. The api call that I want to use this image data for is:

http://wiki.developers.facebook.com/index.php/Photos.upload

function getFile(pURL,pFunc) {
        xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); 
        if (xmlhttp) {
            eval('xmlhttp.onreadystatechange='+pFunc+';');
            xmlhttp.open('GET', pURL, false);
            xmlhttp.send();
        }
}

function makeList() {
    if (xmlhttp.readyState==4) { 
        if (xmlhttp.status==200) { 
            var tmpArr=xmlhttp.responseText;
            document.getElementById('theExample').innerHTML=tmpArr;
        }
    }
}

Please excuse my terrible understanding of this webby stuff. I need to learn it, but I also need to do this quick bit of work before I can sit down and learn all this good stuff. I've been entrenched in a C#/C++ world for too long.

Answer 1

So you are writing a facebook app, using the facebook api, and trying to upload an image from your application to the users profile?

The api requires an HTTP post with mutli-part mime - think thats whats throwing you off.

Are you using a client library? If so I assume you are using:http://facebook.codeplex.com/

This PHP reference has the basis that you need: http://www.ajaxlines.com/ajax/stuff/article/using_the_facebook_api_to_upload_photos.php

One problem I see in your code is that you are trying to pull the image from a URL into responseText (a string) when you want responseBody (binary) instead. http://msdn.microsoft.com/en-us/library/ms535874(VS.85).aspx

Answer 2

If you know the URL of the image on the server, why not just create an image element?

var img = document.createElement("img");
img.src = url; // assuming you have the URL in a variable called "url"
document.getElementById("image_holder").appendChild(img);