React Typescript Video Preview-CodePudding

I'm trying to create a video preview for a internal project, with "React & Typescript" using react hooks below is the component code,

import React, { useEffect, useRef, useState } from 'react';
import { INewVideo } from 'src/models';
import { useForm } from 'react-hook-form';

const NewVideo: React.FC = () => {

    const { register, handleSubmit } = useForm<INewVideo>();
    const [file, setFile] = useState<any>();
 
    const videoChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
        console.log(event.currentTarget.files![0]);
        setFile(event.currentTarget.files![0])
    };
    useEffect(() => {
        console.log("use effect", file)

    }, [file])

    return (<div>
        <input
            accept="video/mp4, video/mov"
            onChange={videoChangeHandler}
            type="file"
        />
        {
            file ? (
                <div>
                    {file}
                </div>
            ) : ("No Video")
        }
    </div>)
};

export default NewVideo;

But I'm not able to set the file, its throwing below error I need to render upload video & give options for screen capture & trimming features. But these are later stages

CodePudding user response：

You are getting this error because file is not a JSX.Element which you are trying to render in your DOM. Basically you got some Object in your file state. Either you can provide this as a source for HTML.Video Element or you can get file object data from it.

{
  file ? <div> {file.name}</div> : "No Video";
}

This code should print the file name in your screen. This is the main place where you are getting some error.

Or if you want to show the preview of your recent upload video you can simply pass that file object as a HTML.Video src. Like it:

{
  file ? <div> <video src={URL.createObjectURL(file)} autoPlay /></div> : "No Video";
}

This will show the preview of your video.

CodePudding user response：

I've found below

import React, { useEffect, useState } from 'react';
import { INewVideo } from 'src/models';
import { useForm } from 'react-hook-form';

const NewVideo: React.FC = () => {

    const { register } = useForm<INewVideo>();
    const [file, setFile] = useState<any>();

    const videoChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
        const file = event.currentTarget.files![0];
        console.log("File", file);
        const reader = new FileReader();
        reader.addEventListener("load", () => {
            setFile(reader.result);
        });
        reader.readAsDataURL(event.target.files![0]);
    };
    useEffect(() => {
        console.log("use effect", file)

    }, [file])

    return (<div>
        <input
            {...register("Link")}
            accept="video/mp4, video/mov"
            onChange={videoChangeHandler}
            type="file"
        />
        <video controls src={file} />
    </div>)
};

export default NewVideo;