DEV Community

Nick Janetakis
Nick Janetakis

Posted on

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

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)

Collapse
 
nektro profile image
Meghan (she/her)

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})`;
    });
});