Skip to content
loading...

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

twitter logo github logo ・1 min read  

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.

twitter logo DISCUSS (1)
markdown guide
 

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})`;
    });
});
Classic DEV Post from Nov 28 '19

New browser on the block!

Photo by Jacalyn Beales on Unsplash Well, it looks like the web browser ecosystem is getting another...

Nick Janetakis profile image
I'm a full stack web developer who has been freelancing for the last 20 years. I write about everything from development to production and also have video courses on my site!