![](https://i0.wp.com/media.dev.to/cdn-cgi/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flaq734yxegmqgpa2hg5a.png?w=1200&ssl=1)
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 🌟
Discover more from Coursity
Subscribe to get the latest posts sent to your email.