Uploading file to wordpress via xml-rpc and javascript

5 Views

I am trying to write a chrome extension that can upload a picture to a wordpress blog. So far, so good, however the wordpress rpc api is expecting the picture in binary:

http://codex.wordpress.org/XML-RPC_WordPress_API/Media#wp.uploadFile

Read More

Unfortunately, the data I have is base64 encoded

http://developer.chrome.com/extensions/tabs.html#method-captureVisibleTab

When firing my code, the only feedback I get from WordPress is: faultCode -32700, parse error. not well formed

This is it: 

chrome.tabs.captureVisibleTab(null, {"format": "png"}, function(img) {

    var data = new Object();
    data.name = 'Screenshot' + Math.floor(Math.random() * 100); //pageTitle 
    data.overwrite = false;
    data.type = 'image/png'; //string:File MIME type.

    //transfrom screencapture into binary data for wordpress xmlrpc
    var regex = /^data:.+/(.+);base64,(.*)$/;
    var matches = img.match(regex);
    data.bits = atob(matches[2]); //string: binary data. Shouldn't be base64-encoded.

    $.xmlrpc({
        url: wp.url,
        methodName: 'wp.uploadFile',
        params: [0, wp.user, wp.password, data],
        success: function(response, status, jqXHR) { 
            //this return the post id
            alert("worked :-)" + status + "/" + response + "/" +
                  jqXHR.responseXML + "/" + response.url); 
        },
        error: function(jqXHR, status, error) { 
            alert("fail :-(" + status + " " + error + " " + jqXHR.responseXML); 
        }
    });
});

Do you have any idea how I could get this working? Thanks a million!

Post Views: 5

Related posts

Leave a Reply

1 comment

  1. After a couple of hours, I finally figured it out. For anybody with the a similar problem.

    1. There is a great Javascript library for WordPress XML RPC on github that does all the magic and comes with a lot of sample rpc’s. It can be found at: http://github.com/developerworks/wordpress-xmlrpc-javascript-api

    2. Uploading a picture with the help of the librabry was no big deal after all.

    First you wanna decode the dataURL, you get from Chrome

    var imageData = new Base64(atob(dataURL.split(',')[1]));

    Afterwards, the upload…

    var imageUpload = wp.uploadFile(1, {
    name: 'filename.png', 
    type: 'image/png', 
    bits: imageData,    
    overwrite: true
});