Add Video File Input and Preview in a Next.js App
In order to send video for processing you will add a file input along with the preview of what video you gonna upload.
It’s important to note, that even though you are using a file input to send video file to Symbl Async Video API, it’s also possible to send URL instead of the file. You can read more about that here
Instructor: [0:00] Let's add a video file input to our app. We'll import useState from React. Now, let's have a file state and setFile. We'll useState with empty string inside.
[0:26] Let's add onChange handler. Whenever I would select the file, file will be updated within useState. We'll use setFile. It is our target files, position zero because we care only about one file.
[0:52] Another thing that we need to add is video preview. We'll use max height as 100. Instead of having dummy div with a Video Component caption inside, let's put video element. Let's id of video summary. We want to have controls. We want to provide a source. We'll use another state. We'll call it videoSrc. Obviously, it will fail because we haven't created it yet.
[1:31] Let's go and create our state, the videoSrc and setVideoSrc. Then also let's create videoRef to get some reference for our video element in case we'll need it in the future. We'll provide the ref with videoRef that we've just created, and we also need to bring useRef from React.
[2:08] Now, we need to listen to the change for our file state variable. We'll use useEffect for that. Inside useEffect, we will create a new source that will be used to render our file to the screen. We use createObjectURL for that and create a new blob providing a file, and also providing a type.
[2:35] Our file type in this case is video/mp4. Whenever we create the source, we need to update our video source in the state. We also need to pass file dependency to useEffect to run whenever the file is changing.
[3:00] Let's try. If it's working, let's copy our AppID, paste it here, copy our AppSecret, paste here, log in. Then let's choose a file. Try these tested before. As you can see, the file is previewing.
[3:23] Let's prepare our app to send file for processing. We'll style our button a bit, giving it more greenish color. We'll supply the color theme as teal, the size of the button be medium, and onClick handler. An onClick handler, what it will do is log, submit file for processing.