Youtube 만들기 - 5) 비디오 업로드 Form 만들기 4(비디오 업로드 하기)

 

submit 버튼을 누르면 실제로 mongo db 로 비디오를 보내는 기능을 만든다. 

 

순서

 

mongodb는 mysql같은 RDBMS에서 부르는 호칭과는 조금 다르다. 

 

 

 

server>models>Video.js파일을 만들어준다. 

user의 형식을 만든 것처럼 video에서 필요한 내용을 만들어준다. 

여기서 writer는 비디오를 업로드 하는 사람이다. 

쓰는 사람의 Id 만을 넣어도 쓰는 사람의 모든 것을 불러올 수 있도록 schem.types.objectId를 이용한다. (ref: 'User')

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const videoSchema = mongoose.Schema({

    writer: {
        type : Schema.Types.ObjectId, 
        ref:'User'//Id만 넣어도 user에 가서 모든 정보를 가져올 수 있다. 
    },
    title:{
        type:String,
        maxlength: 50
    },
    description:{
        type:String
    },
    privacy:{
        type:Number
    },
    filePath:{
        type:String
    },
    category:{
        type:String
    },
    views:{
        type:Number,
        default:0
    },
    duration:{
        type:String
    },
    thumbnail:{
        type:String
    }

}, {timestamps:true})//업데이트 시간 표시

const Video = mongoose.model('Video', videoSchema)
module.exports = { User }

 

 

videoupload페이지에가서 onsubmit 기능을 추가한다. 

useSelector를 이용해서 const user변수로 state을 가져온다. 

import React, {useState} from 'react'
import {Typography, Button, Form, message, Input, Icon } from 'antd';
import Dropzone from 'react-dropzone';
import Axios from 'axios';
import {useSelector} from 'react-redux';


function VideoUploadPage(props) {

    const user = useSelector(state => state.user); //state에 담겨있는 user정보들 가지고 온다. (redux의 useselector)




    const onSubmit=(e)=>{

        e.preventDefault();//클릭하면하려고 했던것 들 방지하고 우리가 하고 싶은 것 넣을 수 있다.
        const variable = { //  state에서 id 를 가지고 있기 때문에 리덕스를 통해서 가져오면 된다. 
            writer: user.userData._id,
            title: VideoTitle,
            description: Description,
            privacy: Private,
            filePath: FilePath,
            category: Category,
            duration: Duration,
            thumbnail : ThumbnailePath
        }
        Axios.post('/api/video/uploadVideo',variable)
        .then(response =>{
            if(response.data.success){
                //성공하면 랜딩페이지로 보내주자. (메세지 3초 띄우고 나서)
                message.success('성공적으로 업로드를 했습니다.')
                setTimeout(()=>{
                props.history.push('/')

                },3000);
            }else{
                alert('비디오 업로드에 실패 했습니다. ')
            }
        })

    }
    return (

                <Form onSubmit={onSubmit}>
                    
                    <Button type="primary" size = "large" onClick={onSubmit}>
                        Submit
                    </Button>

                </Form>
    )
}

export default VideoUploadPage

 

Video.js파일로 가서 라우트를 만들어 준다. 

const {video } = require("../models/Video");


router.post('/uploadVideo', (req, res)=>{
    //비디오 정보들을 저장한다. 
    const video =new Video(req.body)//모든 variables를 인스턴스로 만들어서 정보를 가져온다. 
    video.save((err, doc)=>{//mongodb 메소드로 저장
        if(err){
            return res.json({success:false, err})
        }
        res.status(200).json({success:true})

    })

})

 

실제로 몽고db에 가보면 비디오가 잘 들어와 있다.