POST file upload to flask server

Author: jaejaywoo

backend/app.py

@@ -1,11 +1,21 @@
-from flask import Flask
+from flask import Flask, request
 
 app = Flask(__name__)
 
 
-@app.route('/')
-def hello():
-    return "Hello World!"
+@app.route('/', methods=['POST'])
+def upload_file():
+    print(f'request method: {request.method}')
+    print(f'request object: {request}')
+    print(f'request files: {request.files}')
+    print(f'request form: {request.form}')
+
+    if 'file' in request.files:
+        file = request.files['file']
+        print(f'request files: {file}')
+    else:
+        print(f'No file')
+    return "File upload complete!"
 
 if __name__ == '__main__':
     app.run(host='127.0.0.1', port=5000)

index.html

@@ -39,7 +39,12 @@
                 <br><br>
                 <label for="user-background">Your Background</label>
                 <textarea id="user-background" rows="5" cols="50"></textarea>
-                Upload Resume (pdf only): <input type="file" id="upload-resume" accept=".pdf">
+                Upload Resume: 
+                <!-- <input type="file" id="upload-resume"/> -->
+                <form id="upload-resume-form" action="" enctype="multipart/form-data" method="post">
+                    <input type="file" name="file" id="upload-resume"/>
+                    <button>Upload</button>
+                </form>
                 <br><br>
                 <label for="job-position">Job Position</label>
                 <input type="text" id="job-position">

renderer.js

@@ -6,6 +6,7 @@ var currentWriting = null;
 var coverLetterButton = null;
 var whyUsButton = null;
 var uploadResumeButton = null;
+var uploadResumeForm = null;
 var generateButton = null;
 var goBackButton = null;
 
@@ -35,8 +36,11 @@ apiSubmitButton.addEventListener("click", async event => {
     // Default
     selectCoverLetterBtn();
 
-    uploadResumeButton = waitUntilLoad('upload-resume');
-    uploadResumeButton.addEventListener('change', uploadResume);
+    // Upload resume submit
+    // uploadResumeButton = waitUntilLoad('upload-resume');
+    // uploadResumeButton.addEventListener('change', uploadResume);
+    uploadResumeForm = waitUntilLoad('upload-resume-form');
+    uploadResumeForm.addEventListener('submit', uploadResume);
 
     // Generate button click
     generateButton = waitUntilLoad('generate-btn');
@@ -59,17 +63,24 @@ function selectWhyUsBtn() {
     currentWriting = 'why-us';
 }
 
-async function uploadResume() {
-    // const file = this.files[0];
-    // let text = await file.text();
-    // console.log(text);
+async function uploadResume(event) {
+    event.preventDefault();
 
-    // TODO: cannot make connection with the backend.
-    // Try https://github.com/megasanjay/electron-flask
-    axios.get(`${SERVER_URL}/`)
+    // console.log(this.file);
+    // let resumeInput = document.getElementById('upload-resume');
+    // console.log(x.files);
+
+    let formData = new FormData();
+    formData.append("file", this.file.files[0]);
+    console.log(formData);
+
+    axios.post(`${SERVER_URL}/`, formData, {
+        headers: { 
+            "Content-Type": "multipart/form-data"
+        }
+    })
     .then((response) => {
         console.log(response.data);
-        console.log('server connected');
     })
     .catch((error) => {
         console.error(error);