Show Captured WebCam file name to Next Page in Python (Flask)

I am trying to capture an image from WebCam and show its file name on the next page when the user clicks the Upload button. Currently, the snap function is taking the image and working fine. But When the users click on the Upload button, nothing happened.

Expected Output: Click on the Upload button will open a New Page (Test2) and show the file name.

My Code

app.py

@app.route('/Test', methods=['GET','POST'])
def Test():
    if request.method == 'POST':
        return render_template('Test2.html',data=request.form['file'])
    return render_template('Test.html')

if __name__ == '__main__':
app.run(debug=True)

Test.html

<!doctype html>

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>WebcamJS Test Page</title>
    <style type="text/css">
        body { font-family: Helvetica, sans-serif; }
        h2, h3 { margin-top:0; }
        form { margin-top: 15px; }
        form > input { margin-right: 15px; }
        #results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
    </style>
</head>
<body>
    <div id="results">Your captured image will appear here...</div>
    
    <h1>WebcamJS Test Page</h1>
    <h3>Demonstrates simple 320x240 capture &amp; display</h3>
    
    <div id="my_camera"></div>
    
    <!-- First, include the Webcam.js JavaScript Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.26/webcam.min.js" integrity="sha512-dQIiHSl2hr3NWKKLycPndtpbh5iaHLo6MwrXm7F0FM5e+kL2U16oE9uIwPHUl6fQBeCthiEuV/rzP3MiAB8Vfw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>   
    <form method="POST" enctype="multipart/form-data" id="myForm">
        <table>
            <tr>
                <td>Name/EmailId</td>
                <td>:  <input type="text" name="userID"></td>
            </tr>
            <tr>
                <td><input type="button" value="Upload" onclick="upload()"></td>
            </tr>
        </table>
    </form>
    <div id="my_camera"></div>
    <input type="button" onclick="snap()" value="Snap">
    <div id="results"></div>
    
    </body>
<script>


   function ShowCam() {
    Webcam.set({
        width: 320,
        height: 240,
        image_format: 'jpeg',
        jpeg_quality: 100
    });
    Webcam.attach('#my_camera');
}
window.onload= ShowCam;

function snap() {
    Webcam.snap( function(data_uri) {
        // display results in page
        document.getElementById('results').innerHTML = 
        '<img id="image" src="'+data_uri+'"/>';
      } );      
}

function upload() {
    console.log("Uploading...")
    var image = document.getElementById('image').src;
    var form = document.getElementById('myForm');
    var formData = new FormData(form);
    formData.append("file", image);
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", "/Test");

    // check when state changes, 
    xmlhttp.onreadystatechange = function() {

    
    }

    xmlhttp.send(formData);
    console.log(formData);

    console.log(formData.get('file'));
    console.log(formData.get('userID'));
}

</script>

Test2.html

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<p> {{data}}

</body>
</html>

Show Captured WebCam file name to Next Page in Python (Flask)

0 Answers