From the course: React: Cloud-Powered Apps with Firebase
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
File upload trigger
From the course: React: Cloud-Powered Apps with Firebase
File upload trigger
- We have our form now. Let's write the handlers in order to trigger the file upload dialogue. Well, we need to trigger a click event on the hidden input. And a way we can do that is by using Refs, which allows us to get access to the DOM. Let's head now to the profile image component. Let's go ahead and import useRef from React. We can create a ref here. Initial value will be null. And then we can pass as ref object to React using the ref prop here. This would be fileInput. On the button, we can then trigger a click on this input by calling fileInput.current.click. Finally, let's add a handler on the hidden fileInput and log out the files for now. Making this an onChange, grab event and call fileChange with the files. Let's create that function now, called fileChange. It will receive a list of files. And let's log that out for now. Let's give that a save and head over to our browser. I'm going to open up the…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.