prosperchild

I prefer store it as path in the database than blob type which we make my database grow necessarily M This is the updated code

The HTML code is a registration form with input fields for registration number and password and a video element to capture the user's photo. The JavaScript code uses the getUserMedia API to access the user's camera and display the video stream in the video element. When the upload button is clicked, the video frame is drawn to a canvas, the image data is retrieved from the canvas and added to a FormData object along with the registration number and password. The registration button has a retake and upload file button displaying when the regno of the user is found in the mysql database, using php pdo. The FormData object is then sent to the server via an XMLHttpRequest to the "upload_image.php" file for processing. The first PHP file "upload_image.php" connects to a MySQL database using PDO, retrieves the image data and registration number from the POST request, checks if the registration number exists in the database, if it does, it updates the image data in the table, if the registration number does not exist in the database, it returns an error message. The second PHP file "verify_user.php" is called via a fetch call to verify the user by checking registration number and password, if the user is verified, it will show the video container and allow user to take a photo. Here is my scripts: front-end page:members.php.

The HTML code is a registration form with input fields for registration number and password and a video element to capture the user's photo. The JavaScript code uses the getUserMedia API to access the user's camera and display the video stream in the video element. When the upload button is clicked, the video frame is drawn to a canvas, the image data is retrieved from the canvas and added to a FormData object along with the registration number and password. The registration button has a retake and upload file button displaying when the regno of the user is found in the mysql database, using php pdo. The FormData object is then sent to the server via an XMLHttpRequest to the "upload_image.php" file for processing. The first PHP file "upload_image.php" connects to a MySQL database using PDO, retrieves the image data and registration number from the POST request, checks if the registration number exists in the database, if it does, it updates the image data in the table, if the registration number does not exist in the database, it returns an error message. The second PHP file "verify_user.php" is called via a fetch call to verify the user by checking registration number and password, if the user is verified, it will show the video container and allow user to take a photo. Here is my scripts: front-end page:members.php

The HTML code is a registration form with input fields for registration number and password and a video element to capture the user's photo. The JavaScript code uses the getUserMedia API to access the user's camera and display the video stream in the video element. When the upload button is clicked, the video frame is drawn to a canvas, the image data is retrieved from the canvas and added to a FormData object along with the registration number and password. The registration button has a retake and upload file button displaying when the regno of the user is found in the mysql database, using php pdo. The FormData object is then sent to the server via an XMLHttpRequest to the "upload_image.php" file for processing. The first PHP file "upload_image.php" connects to a MySQL database using PDO, retrieves the image data and registration number from the POST request, checks if the registration number exists in the database, if it does, it updates the image data in the table, if the registration number does not exist in the database, it returns an error message. The second PHP file "verify_user.php" is called via a fetch call to verify the user by checking registration number and password, if the user is verified, it will show the video container and allow user to take a photo. Here is my scripts: front-end page:members.php <html> <head> <title>Registration Form</title> </head> <body> <form id="registration-form" enctype="multipart/form-data"> <div> <label for="regno">Registration Number:</label> <input type="text" id="regno"> </div> <div> <label for="password">Password:</label> <input type="password" id="password"> </div> <div> <video id="video" width="400" height="300"></video> </div> <div> <button type="button" id="verify">Verify</button> <button type="button" id="upload">Upload Image</button> <button type="button" id="retake">Retake</button> <button type="button" id="uploadFile">Upload File</button> </div> </form> <script> // Get user media and display video stream let video = document.querySelector('video'); navigator.mediaDevices.getUserMedia({ video: true }) .then(stream => { video.srcObject = stream; video.play(); }); // Capture image from video stream let uploadButton = document.querySelector('#upload'); uploadButton.addEventListener('click', e => { let canvas = document.createElement('canvas'); let context = canvas.getContext('2d'); canvas.width = video.videoWidth; canvas.height = video.videoHeight; context.drawImage(video, 0, 0, canvas.width, canvas.height); let imageData = canvas.toDataURL('image/jpeg'); // Encrypt the parameters let encryptedParams = CryptoJS.AES.encrypt(JSON.stringify({ imageData: imageData, regno: document.querySelector('#regno').value, password: document.querySelector('#password').value }), 'secret key'); // Send encrypted parameters to server let xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = () => { if (xhttp.readyState == 4 && xhttp.status == 200) { let response = JSON.parse(xhttp.response); if (response.status == 'success') { document.querySelector('#retake').style.display = 'none'; document.querySelector('#uploadFile').style.display = 'none'; } else { alert('Error: ' + response.message); } } }; xhttp.open("POST", "upload_image.php", true); xhttp.send(encryptedParams); }); // Verify_use.php let verifyButton = document.querySelector('#verify'); verifyButton.addEventListener('click', e => { let regno = document.querySelector('#regno').value; let password = document.querySelector('#password').value; // Encrypt the parameters let encryptedParams = CryptoJS.AES.encrypt(JSON.stringify({ regno: regno, password: password }), 'secret key'); // Send encrypted parameters to server let xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = () => { if (xhttp.readyState == 4 && xhttp.status == 200) { let response = JSON.parse(xhttp.response); if (response.status == 'success') { document.querySelector('#videoContainer').style.display = 'block'; } else { alert('Error: ' + response.message); } } }; xhttp.open("POST", "verify_user.php", true); xhttp.send(encryptedParams); }); </script> </body> </html> upload_image.php script: <?php // upload_image.php // Connect to MySQL database $host = 'localhost'; $dbname = 'school'; $username = 'root'; $password = ''; try { $conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password); $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // Retrieve image data from POST request $imageData = $_POST['imageData']; $regno = $_POST['regno']; // Check if registration number exists in database $stmt = $conn->prepare('SELECT * FROM users WHERE regno = :regno'); $stmt->execute(['regno' => $regno]); $result = $stmt->fetch(); // If registration number exists, update image data if ($result) { $stmt = $conn->prepare('UPDATE users SET image = :imageData WHERE regno = :regno'); $stmt->execute(['imageData' => $imageData, 'regno' => $regno]); // Return success response echo json_encode(['status' => 'success']); } else { // Return error response echo json_encode(['status' => 'error', 'message' => 'Registration number does not exist in database']); } } catch(PDOException $e) { echo json_encode(['status' => 'error', 'message' => $e->getMessage()]); } ?> verify_user.php: <?php // verify_user.php // Connect to MySQL database $host = 'localhost'; $dbname = 'school'; $username = 'root'; $password = ''; try { $conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password); $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // Retrieve registration number and password from GET request $regno = $_GET['regno']; $password = $_GET['password']; // Check if registration number and password match in database $stmt = $conn->prepare('SELECT image FROM users WHERE regno = :regno'); $stmt->execute(['regno' => $regno]); $imageData = $stmt->fetchColumn(); // Convert image data to varchar $imageString = base64_encode($imageData); // Update image data in database $stmt = $conn->prepare('UPDATE users SET image = :imageString WHERE regno = :regno'); $stmt->execute(['imageString' => $imageString, 'regno' => $regno]); // Check if update was successful if ($stmt->rowCount() > 0) { echo 'Image data successfully updated to varchar in database.'; } else { echo 'Error: Image data could not be updated to varchar in database.'; } // Close database connection $conn = null; } catch(PDOException $e) { echo json_encode(['status' => 'error', 'message' => $e->getMessage()]); } ?>

The HTML code is a registration form with input fields for registration number and password and a video element to capture the user's photo. The JavaScript code uses the getUserMedia API to access the user's camera and display the video stream in the video element. When the upload button is clicked, the video frame is drawn to a canvas, the image data is retrieved from the canvas and added to a FormData object along with the registration number and password. The registration button has a retake and upload file button displaying when the regno of the user is found in the mysql database, using php pdo. The FormData object is then sent to the server via an XMLHttpRequest to the "upload_image.php" file for processing. The first PHP file "upload_image.php" connects to a MySQL database using PDO, retrieves the image data and registration number from the POST request, checks if the registration number exists in the database, if it does, it updates the image data in the table, if the registration number does not exist in the database, it returns an error message. The second PHP file "verify_user.php" is called via a fetch call to verify the user by checking registration number and password, if the user is verified, it will show the video container and allow user to take a photo. Here is my scripts: front-end page:members.php NOTE: Script code removed, see script below. The script isnt working..No image uploaded to database? i want the image stored in mysql database to be in varchar and not in blob form? How do i achieve this task? is there a better ways?