Building in Public - 2

Posted On: 2024-06-11

I haven’t worked with file uploads from scratch before, so I did some exploration.

Adding a component for file uploads is actually quite simple, it’s adding an <input> tag with a type="file" attribute. Through normal browser code, you can access this using document.getElemenyById and add an event listener to work with the upload. Since I’m using React I used the onChange attribute and a state hook.

Something that caught me off guard was the callback. I usually use e.target.value , but I learned that this will just be a filepath as a String, not the actual file itself. Instead, I had to use the files property (i.e e.target.files) to access the FileList from the input element and could read the file contents from that.

The more you know 🌟