diff options
author | therealbobo | 2020-09-17 08:42:00 +0000 |
---|---|---|
committer | therealbobo | 2020-09-17 08:42:00 +0000 |
commit | 9063c5d4d5b04e4c7f4e689c9246c4b37b72ec68 (patch) | |
tree | e59da614e29386daf53f3930851566b00b49e95a /frontend/src/views/Upload.js | |
parent | 4cfdf6e2dfe9184e988a145495e072571d512cdc (diff) | |
parent | 98355cdf838d8c18e9a28176ae7a847770545395 (diff) |
conflicts fixed and merge
Diffstat (limited to 'frontend/src/views/Upload.js')
-rw-r--r-- | frontend/src/views/Upload.js | 106 |
1 files changed, 106 insertions, 0 deletions
diff --git a/frontend/src/views/Upload.js b/frontend/src/views/Upload.js new file mode 100644 index 0000000..522afe8 --- /dev/null +++ b/frontend/src/views/Upload.js @@ -0,0 +1,106 @@ +import React, {Component} from 'react'; +import './Upload.scss'; +import {Button, ButtonGroup, Col, Container, Form, FormControl, InputGroup, Modal, Row, Table} from "react-bootstrap"; +import bsCustomFileInput from 'bs-custom-file-input' +import {createCurlCommand} from '../utils'; + +class Upload extends Component { + + constructor(props) { + super(props); + + this.state = { + selectedFile: null, + errors: "" + }; + + } + + onFileChange = event => { + this.setState({ selectedFile: event.target.files[0] }); + + }; + + componentDidMount() { + bsCustomFileInput.init() + } + + onFileUpload = () => { + const formData = new FormData(); + formData.append( + "file", + this.state.selectedFile, + this.state.selectedFile.name + ); + fetch('/api/pcap/upload', { + method: 'POST', + body: formData + }) + .then(response => { + if (response.status === 202 ){ + //this.setState({showConfig:false}); + this.props.onHide(); + //this.props.onDone(); + } else { + response.json().then(data => { + this.setState( + {errors : data.error.toString()} + ); + }); + } + } + ); + } + + + render() { + + return ( + <Modal + {...this.props} + show="true" + size="lg" + aria-labelledby="services-dialog" + centered + > + <Modal.Header> + <Modal.Title id="services-dialog"> + /usr/bin/upload + </Modal.Title> + </Modal.Header> + <Modal.Body> + <Container> + <Row> + <Form.File + type="file" + className="custom-file" + onChange={this.onFileChange} + label=".pcap/.pcapng" + id="custom-file" + custom + /> + </Row> + <Row> + <div class="error"> + <b> + <br/> + {this.state.errors + .split('\n').map((item, key) => { + return <span key={key}>{item}<br/></span>}) + } + </b> + </div> + </Row> + </Container> + </Modal.Body> + <Modal.Footer className="dialog-footer"> + + <Button variant="green" onClick={this.onFileUpload}>upload</Button> + <Button variant="red" onClick={this.props.onHide}>close</Button> + </Modal.Footer> + </Modal> + ); + } +} + +export default Upload; |