I am trying to remove image in froala text editor, I can upload image, but i can't delete image. Here is what I am trying to achieve:
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js'></script>
</head>
<body>
<div class="sample">
<h2>File upload example.</h2>
<form>
<textarea id="edit" name="content"></textarea>
</form>
</div>
<script>
new FroalaEditor('#edit', {
imageUploadURL: 'upload_image.php',
fileUploadParams: {
id: 'my_editor'
}
})
var editor = new FroalaEditor('#edit');
editor.opts.events['image.removed'] = function (e, editor, $img) {
$.ajax({
// Request method.
method: 'POST',
// Request URL.
url: 'delete_image.php',
// Request params.
data: {
src: $img.attr('src')
}
})
.done (function (data) {
console.log ('Image was deleted');
})
.fail (function (err) {
console.log ('Image delete problem: ' + JSON.stringify(err));
})
}
</script>
</body>
</html>
upload_image.php :
<?php
try {
// File Route.
$fileRoute = "/uploads/";
$fieldname = "file";
// Get filename.
$filename = explode(".", $_FILES[$fieldname]["name"]);
// Validate uploaded files.
// Do not use $_FILES["file"]["type"] as it can be easily forged.
$finfo = finfo_open(FILEINFO_MIME_TYPE);
// Get temp file name.
$tmpName = $_FILES[$fieldname]["tmp_name"];
// Get mime type.
$mimeType = finfo_file($finfo, $tmpName);
// Get extension. You must include fileinfo PHP extension.
$extension = end($filename);
// Allowed extensions.
$allowedExts = array("gif", "jpeg", "jpg", "png", "svg", "blob");
// Allowed mime types.
$allowedMimeTypes = array("image/gif", "image/jpeg", "image/pjpeg", "image/x-png", "image/png", "image/svg+xml");
// Validate image.
if (!in_array(strtolower($mimeType), $allowedMimeTypes) || !in_array(strtolower($extension), $allowedExts)) {
throw new \Exception("File does not meet the validation.");
}
// Generate new random name.
$name = sha1(microtime()) . "." . $extension;
$fullNamePath = dirname(__FILE__) . $fileRoute . $name;
// Check server protocol and load resources accordingly.
if (isset($_SERVER["HTTPS"]) && $_SERVER["HTTPS"] != "off") {
$protocol = "https://";
} else {
$protocol = "http://";
}
// Save file in the uploads folder.
move_uploaded_file($tmpName, $fullNamePath);
// Generate response.
$response = new \StdClass;
$response->link = $protocol.$_SERVER["HTTP_HOST"].dirname($_SERVER["PHP_SELF"]).$fileRoute . $name;
// Send response.
echo stripslashes(json_encode($response));
} catch (Exception $e) {
// Send error response.
echo $e->getMessage();
http_response_code(404);
}
?>
delete_image.php :
<?php
try {
$response = FroalaEditor_Image::delete($_POST['src']);
echo stripslashes(json_encode('Success'));
}
catch (Exception $e) {
http_response_code(404);
}
?>
I didn't find any other tutorial in this field and the official site tutorial was not enough. I tried for a whole day, but it didn't work. I sincerely appreciate your help.