Upload New File

IT17160162/webapp/src/components/uploadFiles.js

+import React from 'react';
+import axios from 'axios';
+import { Button, Table, Alert, Spinner } from 'react-bootstrap';
+import { Trash, Download } from 'react-bootstrap-icons';
+import jsPDF from "jspdf"
+import "jspdf-autotable";
+import Dropzone from 'react-dropzone'
+
+const originUrl = "http://localhost:5000";
+
+export default class UploadFiles extends React.Component {
+    constructor(props) {
+        super(props);
+        
+        this.state = {
+          selectedFiles: [],
+          progressInfos: [],
+          message: [],
+          isFetching: false,
+          fileInfos: [],
+        };
+
+        this.selectFiles = this.selectFiles.bind(this);
+        this.uploadFiles = this.uploadFiles.bind(this);
+        this.selectDropedFiles = this.selectDropedFiles.bind(this);
+        this.removeUploadedImage = this.removeUploadedImage.bind(this);
+        this.exportPdf = this.exportPdf.bind(this);
+      }
+
+    selectFiles(event) {
+        this.setState({
+          progressInfos: [],
+          selectedFiles: event.target.files,
+        });
+      }
+
+    selectDropedFiles(files) {
+    const { selectedFiles } = this.state;
+    this.setState({
+        progressInfos: [],
+        selectedFiles: [...selectedFiles, ...files],
+        serverError: false
+    });
+    }
+
+    uploadFiles(e) {
+        e.preventDefault();
+        const { selectedFiles } = this.state;
+        const { requirements } = this.props;
+        let _progressInfos = [];
+        this.setState({
+          results: null,
+          serverError: false,
+          isFetching : true,
+        })
+        // console.log("selectedFiles", len(selectedFiles))
+        const formData = new FormData()
+
+        const blob = new Blob([requirements], {
+        type: 'application/text'
+        });
+        formData.append('requirements', blob)  
+
+        for (let i = 0; i < selectedFiles.length; i++) {
+        //   _progressInfos.push({ percentage: 0, fileName: selectedFiles[i].name });
+            formData.append('file', selectedFiles[i])  
+        }
+        
+        axios.post(`${originUrl}/resume-submission`, formData)
+                .then(res => {
+                    console.log(res);
+                    this.setState({ results: res.data, isFetching: false })
+                })
+                .catch(err => this.setState({ serverError: true, isFetching: false }));
+      }
+
+      removeUploadedImage(index) {
+  
+        const { selectedFiles } = this.state;
+        if (selectedFiles) {
+          selectedFiles.splice(index, 1)
+        }
+     
+        this.setState({
+            selectedFiles,
+        });
+      }
+
+      exportPdf() {
+        const unit = "pt";
+        const size = "A4"; // Use A1, A2, A3 or A4
+        const orientation = "portrait"; // portrait or landscape
+    
+        const marginLeft = 40;
+        const doc = new jsPDF(orientation, unit, size);
+    
+        doc.setFontSize(15);
+    
+        const title = "Applicant Ranking";
+        const headers = [["Applicant File Name", "Score", "Rank"]];
+        const { results } = this.state;
+        const data = results.map(result=> [result.resumeName, result.score, result.rank]);
+    
+        let content = {
+          startY: 100,
+          head: headers,
+          body: data
+        };
+    
+        doc.text(title, marginLeft, 40);
+        doc.setFontSize(10);
+        doc.text("Generated on : " + Date(), marginLeft, 65);
+        doc.text("Total applicants : " + results.length, marginLeft, 85);
+        doc.autoTable(content);
+        doc.save("applicant-rank-report.pdf")
+      }
+
+
+    render() {
+      const { selectedFiles, progressInfos, message, fileInfos, results, serverError, isFetching } = this.state;
+
+        console.log('results', results)
+      return (
+        <div>
+            {serverError && (
+              <Alert variant="danger" className="danger-alert">
+                An error occured, Could not process the applicant data. Please try again
+              </Alert>
+            )}
+
+            <Dropzone onDrop={acceptedFiles => this.selectDropedFiles(acceptedFiles)}>
+              {({getRootProps, getInputProps}) => (
+                <section>
+                  <div {...getRootProps()} className="drag-drop-box">
+                    <input {...getInputProps()} />
+                    <p className="drag-drop-box-text">
+                      {selectedFiles && selectedFiles.length > 0 ? (
+                        `Succesfully uploded resumes (${selectedFiles.length})`
+                      ) : (
+                        "Drag & drop your applicant resumes here, or click to select"
+                      )}
+                      </p>
+                  </div>
+                </section>
+              )}
+           </Dropzone>
+
+          {selectedFiles && selectedFiles.length > 0 && (
+            <div className="card uploaded-resumes">
+              <div className="card-header">Uploaded resumes ({selectedFiles.length})</div>
+              <ul className="list-group list-group-flush">
+                {selectedFiles.map((file, index) => (
+                  <li className="list-group-item" key={index}>
+                    <p className="uploaded-file-name">{index + 1}. {file.name}</p>
+                    <Trash className="uploaded-file-delete" onClick={() => this.removeUploadedImage(index)} />
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          <div className="rank-div upload-start-ranking">
+            <Button disabled={selectedFiles.length == 0 ? true : false} className="rank-button" variant="success" onClick={this.uploadFiles}>
+              Start Applicant Ranking
+            </Button>
+          </div>
+
+          {isFetching && (
+            <div className="uploadingLoder">
+              <Spinner animation="border" role="status">
+                <span className="sr-only">Loading...</span>
+              </Spinner>
+            </div>
+          )}
+
+          { results && (
+            <>
+              <Button variant="info" onClick={this.exportPdf} className="pdf-download-button"><Download /> Download as PDF</Button>
+              <p className="applicant-rank-title">Applicant Ranks</p>
+              <Table striped bordered hover className="pdf-rank-table">
+                <thead>
+                  <tr>
+                    <th>Resume File Name</th>
+                    <th>Score</th>
+                    <th>Rank</th>
+                  </tr>
+                </thead>
+                <tbody>
+                { results.map((rankObject, index) => (
+                    <tr key={index}>
+                      <td>{rankObject.resumeName}</td>
+                      <td>{rankObject.score}</td>
+                      <td>{rankObject.rank}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </Table>
+            </>
+          )}
+
+
+        </div>
+      );
+    }
+  }
\ No newline at end of file