What's a good light weight library to handle inputting text that also supports file uploads?

#discuss #opensource

What I'm really looking for is almost a clone of GitHub's issue comment box.

Key features are:

Works in all major browsers (very important)
Upload files by drag / drop, clicking a link, or pasting (very important)
Icon support for common formatting (nice but not necessary)

Also for the file uploader, it's really important that it works similar to GitHub where after supplying the file, it will inject the markdown image syntax with the absolute URL to the uploaded file directly into the editor.

jQuery dependency would also be fine if it comes down to it.

Top comments (1)

Meghan (she/her) • Jun 17 '18

This isn't fully tested but should be pretty close :)
(Filler variables are in caps)

INPUT_ELEMENT.addEventListener("paste", async (e) => {
    const f = e.clipboardData.items[0];
    const d = new FormData();
    d.append("picture", f);
    return fetch(IMAGE_HOST, {
        method: "POST",
        body: d
    })
    .then((x) => x.text())
    .then((x) => {
        INPUT_ELEMENT.value += `![alt_text](${x.url})`;
    });
});