On the New Upload page
I want to fill the File URL, Sources and Description fields with a Tampermonkey script.

Something like this:

// ==UserScript==
// @name         e621 upload test
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Fills the e621 upload form
// @author       Mantikor
// @match        https://e621.net/uploads/new
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let element_url = document.querySelector("div.flex-grid:nth-child(3) > div:nth-child(2) > div:nth-child(2) > label:nth-child(1) > input:nth-child(1)");
    element_url.value = "https://d.furaffinity.net/art/fender/1284661300/1284661300.fender_fender.png";

    let element_source = document.querySelector(".upload-source-row > input:nth-child(1)");
    element_source.value = "https://www.furaffinity.net/view/4483888/";

    let element_description = document.querySelector("#post_description");
    element_description.value = "Test Test Test";
})();

Problem:
When I click inside the Artists field and start typing, the File URL and Description disappear.
And when I click the Plus button to the right of the Source field, the source disappears.

How can I make this work?
So far, my solution involves "focus" event handlers that put text in the clipboard, and the user pastes it manually.

edit:
I know about the e621 API.
But I want to use the existing upload form, not make my own.

There are a few parameters the upload page can use to prefill the fields. Instead of filling them via js you would just use the userscript to redirect the user to the appropriate url.

In this case it would be https://e621.net/uploads/new?upload_url=https://d.furaffinity.net/art/fender/1284661300/1284661300.fender_fender.png&sources=https://www.furaffinity.net/view/4483888&description=Test%20Test%20Test

These are all the parameters you can use:
upload_url, parent, description, sources, tags. Multiple sources need to be comma-seperated, tags are space seperated. There's also rating_locked and locked_tags which can be used when the user has the appropriate permissions for those.

The uploader uses vue internally which is why the changes you made via the userscript were not persisted correctly.

To elaborate on what Earlopain has said. Vue maintains an internal copy of the data and uses that to update the visual copy. This is driven by input events to the fields, not by the dom element itself. You can "fix" your script by having it emit input events to the field. This is only guaranteed to work if the page has fully loaded, so some form of waiting for content ready and then a few ms would be needed.

The better fix here is to use the provided fill options within the script for the various fields.

mantikor said:
edit:
I know about the e621 API.
But I want to use the existing upload form, not make my own.

If you are referring to Earlopain's response, it sounds like you don't need to mess with the API at all. It's just URL parameters. So instead of activating your script on the uploads page itself, you would activate it for example on an Inkbunny page, and launch a new page with the appropriate values filled in on the url.

For example, to upload Mirror Twi from Inkbunny, you would generate the url https://e621.net/uploads/new?upload_url=https://va2.ib.metapix.net/files/full/3815/3815888_ColdBloodedTwilight_twimirror.png&sources=https://inkbunny.net/s/2586357&description=Please%20consider%20supporting%20my%20SubscribeStar:%20the%20Tower%20of%20Stars

Something like

let source = get_current_url();
let upload_url = get_image()['href'];
let description = get_description().innerHTML;

let built_url = 'https://e621.net/uploads/new?' + 'upload_url=' + upload_url + '&sources=' + source + '&description=' + description;
built_url = escape(built_url);

launch_new_tab(built_url);

Thank you for your answers!
With the query string, writing the userscript is almost trivial.

If only converting an FA post description to DText were this easy...
I'll probably use XSLT for that.

kiranoot said: You can "fix" your script by having it emit input events to the field.

To expand on this one, this is how I've been doing it.
https://github.com/bitWolfy/re621/blob/master/src/js/components/utility/UtilEvents.ts#L44-L55

But yeah, that's only needed for fields not filled in by URL parameters. So, tags and such.
And copying those from FurAffinity is a terrible idea.

mantikor said:
If only converting an FA post description to DText were this easy...

Doesn't Idem's Sourcing Suite handle DText in descriptions?
Don't quote me on that, I don't remember for sure.

bitwolfy said:
Doesn't Idem's Sourcing Suite handle DText in descriptions?
Don't quote me on that, I don't remember for sure.

You're right, it does :)
And it has an "Upload to e621" button, too.

The URL parameters don't work if the description is very long.

Example:
https://www.furaffinity.net/user/sakda/
https://www.furaffinity.net/view/45134129/
https://d.furaffinity.net/art/sakda/1639981810/1639981810.sakda_2-5_caning.jpg

Idem's Sourcing Suite inserts an "Upload to e621" link on every FA view page.
On the above FA view page, the link is:
(warning, huge URL)

This leads to an error page on e621:
414 Request-URI Too Large

But that's not a big deal, because ISS also adds a "Copy Description" button to every FA view page.

Nginx limits URLs to 8KB (8192 characters) by default, otherwise you'll get the aforementioned error. The error comes from openresty which itself is based on nginx.

earlopain said:
Nginx limits URLs to 8KB (8192 characters) by default, otherwise you'll get the aforementioned error. The error comes from openresty which itself is based on nginx.

Thanks, I'll ask Idem to include an "Upload to e621 without description" link.