62 lines
1.4 KiB
JavaScript
62 lines
1.4 KiB
JavaScript
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
|