80 lines
1.9 KiB
JavaScript
80 lines
1.9 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);
|
|
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
|