Sending Images to Wordpress – Trouble With Upload

Actions - Help & Questions
1

I was hoping someone here could help me with a bit of a round-about way I’m utilizing Drafts to (hopefully) upload an image to Wordpress. I think my issue might lie in a slight misunderstanding of what exactly the Wordpress XML-RPC expects when receiving a file.

So, the general workflow is this. The action is triggered and it immediately switches over to Shortcuts and runs a shortcut I’ve built to get the image and related information. Shortcuts passes a dictionary back to Drafts of format:

shortcut_result = {
	string alt,
	string data,
	string name,
	string title,
	string type
}

Most of this is just metadata for the image. Key to this particular issue is that in the workflow, I let the user pick a photo, then I convert it to base64 and store it in the shortcut_result.data dictionary entry as a string.

In Drafts, after setting up the credentials, I then construct the following request to send to Wordpress:

let the_image = JSON.parse(draft.getTemplateTag("shortcut_result"));
let method = "wp.uploadFile";
let params = [
	1,
	cred.getValue("username"),
	cred.getValue("password"),
	{
		bits: the_image.data,
		name: the_image.name + "." + the_image.type,
		type: MIMEtypes[the_image.type]
	}
];

While this successfully posts, the image file created on the server is corrupted and won’t display. I also tried adding polyfills into the script for atob() and btoa() support, which didn’t seem to work the way I tried. Lastly, I stole the Base64 constructor from a Javascript XML-RPC library, converted the base64 back to binary to pass into the Base64 constructor, and then tried sending the object:

var Base64 = {
	binary bits,
	func encode,
	func decode
}

This didn’t work, nor did sending Base64.encode().

I really think I’m just missing something on how to package the binary data for Wordpress to properly ingest. MIME types are correct, and if I paste the base64 data Shortcuts returns into a base64 → image decoder the images appear properly, so it’s all in how I’m sending the data to Wordpress.

Anybody have any advice? Is there something with Drafts’ WordPress class I could be missing that is causing the problem? Some other way I could package the base64 data?

2

Just briefly looking at this, but based on a few Stack Overflow posts, it seems Wordpress is looking for the base64 string to be wrapped in <base64> tags…they have a class IXR_Base64 that just wraps it like that and is what they are looking for…

Untested, but maybe try:

let params = [
	1,
	cred.getValue("username"),
	cred.getValue("password"),
	{
		bits: "<base64>" + the_image.data + "</base64>",
		name: the_image.name + "." + the_image.type,
		type: MIMEtypes[the_image.type]
	}
];
3

Gave it a try and no go :-/

Here’s the image Wordpress produced: https://www.aweathermoment.com/wordpress/wp-content/uploads/2018/10/img_4672.png

Maybe someone smarter in this than I can see what’s gone wrong.

The WP call in Drafts successfully executes, though. So that’s good?

My hope is doing it via scripting so that I can get the Post ID after the upload, then edit the post to add the various metadata (title, alt text, caption, etc.) within the Wordpress installation. After that’s the easy part of inserting a formatted markdown image link.

Edit: I’m a little curious if the problem could be rooted in a string encoding problem or something like that? Does Drafts do any encoding manipulation on what’s returned from Shortcuts?