비디오 업로드 만들기 1

비디오 업로드 부분을 구현할 예정 입니다. 

view 폴더 아래에 

VideoUploadPage 폴더 생성

그안에 

VideoUploadPage.js 파일 생성 해주세요

그리고 

 

extension이 설치 되어 있다면 

rfce 명령어를 입력하면 자동으로 

이렇게 생성이 됩니다.

 

그리고 라우터를 생성을 해줘야 합니다. 그러기 위해서는 

App.js 부분으로 가서 

import VideoUploadPage from "./views/VideoUploadPage/VideoUploadPage.js"

 

이거 추가 

          <Route exact path="/video/upload" component={Auth(VideoUploadPage, true)} />

 

true 옵션은 로그인한 사람만 접근 가능하게 하는것

 

 

확인해보면 이렇게 된것이 보인다. 성공입니다. 

 

그리고 RightMenu로 들어가서 

맨아래 쪽 보면

        <Menu.Item key="upload">

          <a href="/video/upload"></a>

        </Menu.Item>

 

이부분을 추가해주면 됩니다. 위에처럼요

Video 업로드 부분을 저렇게 antd 이용해서 디자인해주고

import React from 'react'
import {Typography, Button, Form, Message, Input, Icon} from 'antd';

const {TextArea} = Input;
const {Title} = Typography;
function VideoUploadPage() {
    return (
        <div style={{maxWidth:'700px',margin:'2rem auto'}}>
            <div style={{textAlign:'center',marginBottom:'2rem'}}>
                <Title level={2}>Upload Video</Title>
            </div>
            <Form onSubmit>
                <div style={{display:'flex',justifyContent:'space-between'}}>
                 {/*Drop zone*/}

                 {/*Thumbnail*/}
                 <div>
                     <img src alt/>
                 </div>
                </div>
            <br/>
            <br/>
            <label>Title</label>
            <Input
                onChange
                value
            />
            <br/>
            <br/>
            <label>Description</label>
            <TextArea
                onChange
                value
            />
            <br/>
            <br/>
            <select onChange>
                <option>key value</option>    
            </select>
            <br/>
            <br/>
            <select onChange>
                <option>key value</option>    
            </select>
            <br/>
            <br/>
            <Button type="primary" size="large" onClick>
                Submit
            </Button>

            </Form>
        </div>
    )
}

export default VideoUploadPage

 

이렇게 코딩 해주면 

이렇게 구현이 되고 

드롭존을 만들기 위해 

client에 다운해줍니다.

npm install react-dropzone --save

를 해줍니다.

 

 

그리고 드롭존을 생성해야하는데 우선 import를 해줍니다. 

import Dropzone from 'react-dropzone';

                    <Dropzone
                    onDrop
                    multiple
                    maxSize
                    >
                    {({getRootProps, getInputProps})=>(
                            <div style={{width:'300px', height:'240px', border:'1px solid lightgray',display :'flex',
                            alignItems:'center',justifyContent:'center'}}{...getRootProps()}>
                                <input{...getInputProps()}/>
                                <Icon type="plus" style={{fontSize:'3rem'}}/>
                            </div>
                    )}

                    </Dropzone>

여기 까지하면 드롭존이 생성이 됩니다.