<file-preview> - A simple web component for file previews

This was a "I can't fall asleep and my mind is wondering" type of idea and honestly, I'm surprised at how good it came out. For a while now I've shared demos where a user picks an image and ... something. It doesn't matter. But I typically add a preview of the image when it's selected. This works because once the user selects a file on their local system, JavaScript can then access the bits of that file, making it trivial then to render it. The idea I had, late at night, was simple - what if this could be a web component and expanded to cover different file types? In my imagination, it would look something like this in code: <form> <!-- various other form things --> <label for="upload">Select a file: </label> <input type="file" id="upload" name="upload"> <file-preview file-id="upload"></file-preview> </form> The component takes one attribute, file-id, which points to the ID value of the field to monitor. As for preview support, I figured I could cover these: Images (of course) HTML,…