Wordpress Upload Plugin Form Will Not Activate In Headless Browser

Question

I am working on a little project where PhamtomJS will log into my site and upload a plugin to it. I almost have it, except for one strange problem. Although the file.upload portion of my code works perfectly, the Install now button remains disabled. Here is a picture rendered from Phantom:

As you can see, the button is still disabled. So when I try to click it using the getElementById() method, it will not work. Nor will it work if I try to submit the form by doing:

document.querySelector('form[action*="/wp-admin/update.php?action=upload-plugin"]').submit()

I have also tried enabling the button manually and then clicking it via Javascript, but that has not worked either. Any ideas?

EDIT When trying to pull the outer HTML of the button, I typed the following into console:

console.log(document.querySelector('#install-plugin-submit').outerHTML)

The result of this code was the following:

<input type="submit" name="install-plugin-submit" id="install-plugin-submit" class="button" value="Install Now">

Answer 1

How did you get the value into the file input box? Depending on the browser (client) implementation, simply adding text as the file input value likely will not trigger the box's change event.

The first (read: simplest) solution may be to try $('form.wp-upload-form input[type="file"]').trigger('change'); after you whack in the value. (If you're not using jQuery, see here on how to trigger a native event; it looks like you already know how to select nodes. PhantomJS may very well have a native trigger function because it's the kind of thing you do in that kind of application.)

Failing that, you may want to simply upload the file through JS. I'm on 4.7.3 and my form looks like this:

<form method="post" enctype="multipart/form-data" class="wp-upload-form" action="http://[server]/wp-admin/update.php?action=upload-plugin"> <input type="hidden" id="_wpnonce" name="_wpnonce" value="[nonce]"><input type="hidden" name="_wp_http_referer" value="/wp-admin/plugin-install.php"> <label class="screen-reader-text" for="pluginzip">Plugin zip file</label> <input type="file" id="pluginzip" name="pluginzip"> <input type="submit" name="install-plugin-submit" id="install-plugin-submit" class="button" value="Install Now" disabled=""> </form>

Put together a FormData, scrape the submit URL from the action tag on the form, make sure you include the nonce and probably pass the submit value for good measure. Assembling a multipart/form-data POST is annoying without a suitable plugin but if you've gotten this far you've probably had to deal with more annoying stuff already.

WordPress shouldn't be able to tell the difference between what you submit from its own form or what you fake together and throw at the same URL. If it is, check the client string setting, make sure you've got the nonce right and make sure you're setting the referer [sic.] correctly.