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);
    axios.post("https://natnats.mobilous.com:8000/upload", data, { // receive two parameter endpoint url ,form data
      })
      .then(res => { // then print response status
        console.log(res.statusText)
    });
  }

  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