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 🌟
Top comments (0)