import React, { useState } from 'react';
import axios from 'axios';
import {
    CCol,
    CFormGroup,
    CInput,
    CInputFile,
    CLabel,
    CButton,
    CCard,
    CCardHeader,
    CCardBody,
    CCardFooter,
} from '@coreui/react'
import CIcon from '@coreui/icons-react'


function Uploader() {

    const [file, setFile] = useState(null);

    function onChangeHandler(e) {
        setFile(e.target.files[0])
    }

    function onClickHandler(e) {
        const data = new FormData()
        data.append('file', file);
        //console.log(file);
        console.log('calling upload');
        axios.post("https://fsbsso.sumasen.net/upload", data, { // receive two parameter endpoint url ,form data
            })
            .then(res => { // then print response status
                //console.log(res.statusText)
                if (res.statusText == 'OK') {
                  alert("正常にアップロードされました");
                }
            });
    }

    return ( <
        div >
        <
        CCard >
        <
        CCardHeader >
        アップロード <
        /CCardHeader> <
        CCardBody >
        <
        CFormGroup row >
        <
        CCol md = "3" >
        <
        CLabel htmlFor = "date-input" > アップロードするファイルを選んでください < /CLabel> < /
        CCol > <
        CCol xs = "12"
        md = "9" >
        <
        CInputFile type = "file"
        onChange = { onChangeHandler }
        id = "file-input"
        name = "file-input" / >
        <
        /CCol> < /
        CFormGroup >
        <CCardFooter >
        <CButton type = "submit"
        onClick = { onClickHandler }
        size = "sm"
        color = "primary" > < CIcon name = "cil-scrubber" / > アップロード < /CButton> < /
        CCardFooter>
        </CCardBody>
        </CCard>
        </div>
    )
}

export default Uploader