javascript - base64 Image POST request from HTML through PHP to MySQL

Question

I'm trying to POST to a database an image in the form of a base64 string. Up to now, I'm able to turn it into an object inside a tag in HTML. I think I'm misunderstanding how to perform a post method from an HTML through a PHP file.

Instead of using a PHP file to route it, could I set const url = "/region_setting/cleardb.com" ? or do I actually need PHP to send some data to a database? Could I skip PHP and perform a request straight from HTML?

// image and form created
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
const form = document.createElement('form');

const method = 'post';
const url = 'mysql.php';

// Is this correct? How do I pass image to the PHP file? Is the PHP file receiving the image data?
$.post('mysql.php', {image: image, function(data){
  alert(data);
}});

PHP file:

<?php
$servername = "/region_setting/.cleardb.com";
$username = "";
$password = "";
$dbname = "";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
echo $_POST['image'];

// Store image as string to database (image column is configd to store TEXT)
$sqlStatement = "INSERT INTO dbname (image) VALUES ($image)";
$res = mysqli_query($conn, $sqlStatement );
echo $sqlStatement;
?>

I'm hosting the db on Heroku, I'll be storing sensitive variables on Config Vars. The database has been created already.

question from:https://stackoverflow.com/questions/65876231/base64-image-post-request-from-html-through-php-to-mysql

Answer 1

Waitting for answers