Add ./upload?url= and &tags= functionality

[phil-flip]

That would help adding pictures quicker from websites by using a javascript bookmark, like shimmie2 has.

("AssetArchive" is the name of my image board)

javascript:(
  function() {
    if(typeof window=="undefined" || !window.location || window.location.href=="about:blank") {
      window.location = "http://raspiserver:800";
    }
    else if(typeof document=="undefined" || !document.body) {
      window.location = "http://raspiserver:800"+encodeURIComponent(window.location.href);
    }
    else if(window.location.href.match("\/\/raspiserver:800.*")) {
      alert("You are already at Asset Archive!");
    }
    else {
      var tags = prompt("Please enter tags", "tagme");
      if(tags != "" && tags != null) {
        var link = "http://raspiserver:800/upload?url="+location.href+"&tags="+tags;var w = window.open(link, "_blank");
      }
    }
  }
)();

[neobooru]

If you have full access to all JavaScript features can't you just use the API to 'POST' to the upload endpoint? You can pass {"contentUrl":"http://example.com/file.jpg"} in the body to upload a file from an url. I also was looking for a way to quickly import images into my szurubooru instance, and I ended up creating a browser extension for that.

[phil-flip]

I'll look into what I can do to make that bookmark. Your add-on sadly doesn't work properly (Firefox). When I try to test the connection it returns e.reponse is undefined. (But it's the wrong repo to discuss that.)

[phil-flip]

Well, whatever I try, I can't get past ValidationErrors... No idea what I am doing wrong…

[neobooru]

The most likely issue is that you are sending a GET request, instead of the (required) POST request. Please try the following snippet (make sure to update the domain, username, and authToken variables).

If this doesn't work then it's likely that CORS isn't configured correctly on your server.

var domain = "https://szurubooru.example.com"; // No trailing slash.
var username = "admin"; // The user that is uploading the post.
var authToken = "75a768bd-d8b5-4e78-9486-7be091122a48"; // Get this from Account -> Login Tokens

function encodeTag(tag) {
    // Replace spaces with underscores and make everything lowercase.
    return tag.replace(/\s/g, "_").toLowerCase();
}

var data = {
    tags: [encodeTag("sucrose (genshin impact)")],
    safety: "safe",
    source: "https://safebooru.org/index.php?page=post&s=view&id=3310162", // Optional, you can remove this if you want.
    contentUrl: "https://safebooru.org//images/3182/8f087e9319dda9c18896b9eb5acc14c68e7690f7.png"
    // All fields -> https://github.com/rr-/szurubooru/blob/master/doc/API.md#creating-post (url might not scroll to the correct section, scroll to "Creating post")
};

var response = await fetch(domain + "/api/posts", {
    method: "POST",
    mode: "cors",
    credentials: "include",
    headers: {
        Accept: "application/json",
        Authorization: "Token " + btoa(username + ":" + authToken)
    },
    body: JSON.stringify(data)
});

console.log(await response.json());

Though to be honest, I recommend using my extension. If you need help setting it up then please feel free to open an issue on its repo.

[sgsunder]

I don't really see the reason to have two different methods to specify data in a POST request. I feel like using query strings should only really be used if you want the browser to cache the response, which would be useless for POST/PUT requests.