I’m using React Quill for the text editor, so when I upload images, they go to the backend as base64. I’m handling them in PHP to decode and upload them to the images folder as photos. Still, some images I’m uploading from the text editor higher than 600kb are immediately uploaded to the database as base64. They don’t get decoded and uploaded to the images folder as an image like png.
PHP Code
preg_match_all('/<img.*?src="data:image/(.*?);base64,(.*?)".*?>/si', $description, $matches);
if (isset($matches[1]) && isset($matches[2])) {
$imageData = $matches[2];
$imagePath = 'images/';
foreach ($imageData as $key => $base64Data) {
$extension = $matches[1][$key];
// Generate a unique filename
$imageName = uniqid() . '.' . $extension;
// Decode the base64 image data
$decodedImage = base64_decode($base64Data);
// Save the image file
$imageFilePath = $imagePath . $imageName;
file_put_contents(__DIR__ . '/' . $imageFilePath, $decodedImage);
// Replace the base64 image data with the image file path in the description field
$description = str_replace($matches[0][$key], '<img src="' . $imageFilePath . '">', $description);
}
}