app.py user-input image receive using POST and AJAX to prevent reload…

…ing after form submit, default event listener override

.gitignore

@@ -1 +1,2 @@
-myenv/
+myenv/
+__pycache__/

app.py

@@ -1,11 +1,16 @@
-from flask import Flask, render_template, url_for
-
+from flask import Flask, render_template, url_for, request
+import os
 app = Flask(__name__)
-
+UPLOAD_FOLDER = os.path.join('static', 'uploads')
 @app.route('/')
 def index():
     return render_template("index.html")
 
-@app.route('/recommendation')
+@app.route('/recommendation', methods = ['GET', 'POST'])
 def recommendation():
+    if request.method == 'POST':
+        if 'image' in request.files:
+            image = request.files['image']
+            image.save(os.path.join(UPLOAD_FOLDER, image.filename))
+            return render_template("recommendation.html")
     return render_template("recommendation.html")

static/js/script.js

@@ -1,12 +1,28 @@
+function upload() {
+  const fileUploader = document.querySelector('#image-upload');
+  const image = fileUploader.files[0];
+  const fileReader = new FileReader();
+  fileReader.readAsDataURL(image);
 
-function upload(){
-    const fileUploader = document.querySelector('#image-upload')
-    const image = fileUploader.files[0]
-    const fileReader = new FileReader();
-    fileReader.readAsDataURL(image);
-
-    fileReader.onload = (fileReaderEvent) => {
+  fileReader.onload = (fileReaderEvent) => {
       const profilePicture = document.querySelector('.image-preview');
       profilePicture.style.backgroundImage = `url(${fileReaderEvent.target.result})`;
-    }
-}
+  }
+}
+
+// Prevent the form from refreshing the page when submitting
+document.querySelector('form').addEventListener('submit', function(event) {
+  event.preventDefault();  // Prevent the default form submission (page reload)
+
+  const formData = new FormData(this);
+
+  fetch('/recommendation', {
+      method: 'POST',
+      body: formData
+  })
+  .then(response => response.text())
+  .then(html => {
+      console.log("Form submitted successfully.");
+  })
+  .catch(error => console.error('Error:', error));
+});

templates/recommendation.html

@@ -29,8 +29,12 @@
 
         <div class="main-body">
             <div class="top-body">
-            <div class="upload"><input type="file" id="image-upload" onchange="upload()" hidden>
+            <div class="upload">
+                <form action="/recommendation" method="post" enctype="multipart/form-data">
+                <input type="file" id="image-upload" onchange="upload()" name="image" hidden/>
                 <label for="image-upload" class="upload-label">Upload Image</label>
+                <button type="submit">Show Reccomandation</button>
+                </form>
             </div>
             <div class="image-preview">
             </div>