From 65f9bb547a24dd851d366f22950cb4301f3e8ae4 Mon Sep 17 00:00:00 2001
From: therealbobo
Date: Thu, 17 Sep 2020 18:36:47 +0200
Subject: full support to upload/load

---
 frontend/src/views/Upload.js | 112 ++++++++++++++++++++++++++++++++++++-------
 1 file changed, 94 insertions(+), 18 deletions(-)

diff --git a/frontend/src/views/Upload.js b/frontend/src/views/Upload.js
index d3f6bf3..29d514d 100644
--- a/frontend/src/views/Upload.js
+++ b/frontend/src/views/Upload.js
@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import './Upload.scss';
-import {Button, ButtonGroup, Col, Container, Form, FormFile, InputGroup, Modal, Row, Table} from "react-bootstrap";
+import {Button, ButtonGroup, ToggleButton, Col, Container, Form, FormFile, InputGroup, Modal, Row, Table} from "react-bootstrap";
 import bsCustomFileInput from 'bs-custom-file-input'
 import {createCurlCommand} from '../utils';
 
@@ -11,11 +11,34 @@ class Upload extends Component {
 
 		this.state = {
 		  selectedFile: null,
+		  removeOriginal: false,
+		  flushAll:       false,
 			errors: ""
 		};
 
+        this.flushAllChanged = this.flushAllChanged.bind(this);
+        this.removeOriginalChanged = this.removeOriginalChanged.bind(this);
+
+
+    }
+
+    flushAllChanged() {
+        this.setState({flushAll: !this.value});
+		this.checked = !this.checked;
+		this.value = !this.value;
+    }
+
+    removeOriginalChanged() {
+        this.setState({removeOriginal: !this.value});
+		this.checked = !this.checked;
+		this.value = !this.value;
     }
 
+	onLocalFileChange = event => { 
+      this.setState({ selectedFile: event.target.value }); 
+     
+    }; 
+
 	onFileChange = event => { 
       this.setState({ selectedFile: event.target.files[0] }); 
      
@@ -26,14 +49,14 @@ class Upload extends Component {
 	}
 
     onFileProcess = () => {
-		const formData = new FormData();
-		formData.append( 
-		  "file", 
-		  this.state.selectedFile.name 
-		); 
+		const data = {
+		  "file": this.state.selectedFile,
+		  "flush_all": this.state.flushAll,
+		  "delete_original_file": this.state.removeOriginal};
+
 		fetch('/api/pcap/file', {
 			method: 'POST',
-			body: formData
+			body: JSON.stringify(data)
 		})
 			.then(response => {
 				if (response.status === 202 ){
@@ -89,12 +112,31 @@ class Upload extends Component {
             >
                 <Modal.Header>
                     <Modal.Title id="services-dialog">
-                        /usr/bin/upload
+                        /usr/bin/load_pcap
                     </Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
                     <Container>
                         <Row>
+                            <Col>
+							--local
+                            </Col>
+                            <Col>
+							--upload
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col>
+							<Form.Control
+							type="text"
+							id="pcap-upload"
+							className="custom-file"
+							onChange={this.onLocalFileChange}
+							placeholder="local .pcap/.pcapng"
+							custom
+							/>
+                            </Col>
+                            <Col>
 							<Form.File
 							type="file"
 							className="custom-file"
@@ -103,16 +145,52 @@ class Upload extends Component {
 							id="custom-file"
 							custom
 							/>
+                            </Col>
                         </Row>
-						<hr/>
+						<br/>
                         <Row>
-							<Form.Control
-							type="text"
-							id="pcap-upload"
-							onChange={this.onLocalFileChange}
-							placeholder="local .pcap/.pcapng"
-							custom
-							/>
+                            <Col>
+									<ButtonGroup toggle className="mb-2">
+									<ToggleButton
+									  type="checkbox"
+									  variant="secondary"
+									  checked={this.state.removeOriginal}
+									  value={this.state.removeOriginal}
+									  onChange={() => this.removeOriginalChanged()}
+									>
+									  --remove-original-file
+									</ToggleButton>
+								  </ButtonGroup>
+                            </Col>
+                            <Col>
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col>
+									<ButtonGroup toggle className="mb-2">
+									<ToggleButton
+									  type="checkbox"
+									  variant="secondary"
+									  checked={this.state.flushAll}
+									  value={this.state.flushAll}
+									  onChange={() => this.flushAllChanged()}
+									>
+									  --flush-all
+									</ToggleButton>
+								  </ButtonGroup>
+                            </Col>
+                            <Col>
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col>
+								<br/>
+								<Button variant="blue" onClick={this.onFileProcess}>process_local</Button>
+                            </Col>
+                            <Col>
+								<br/>
+								<Button variant="green" onClick={this.onFileUpload}>upload</Button>
+                            </Col>
                         </Row>
 						<hr/>
                         <Row>
@@ -130,8 +208,6 @@ class Upload extends Component {
                 </Modal.Body>
                 <Modal.Footer className="dialog-footer">
 
-                    <Button variant="blue" onClick={this.onFileProcess}>process_local</Button>
-                    <Button variant="green" onClick={this.onFileUpload}>upload</Button>
                     <Button variant="red" onClick={this.props.onHide}>close</Button>
                 </Modal.Footer>
             </Modal>
-- 
cgit v1.2.3-70-g09d2