I'm working on a blog system whit multiple users. I'm implementing tinymce as the default editor to create the contents. All works fine, but I need to modify the image upload of tinymce, I need that every user when save the created contents, if choose to add images to the content,will upload them to a dedicated folder, created if not exists, inside the default upload directory configured in the php upload script. I've the following code, but It's not work as expected, when I post the content it will not create the new directory for the images, but it will only save the content to the database. TinyMCE configuration:
<script>
$(document).ready(function(){
tinymce.init({
selector: '#post-content',
height: 380,
plugins: 'save print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help',
toolbar: 'save | formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat | image',
images_upload_url: 'ImageHandler.php',
automatic_uploads: false,
save_onsavecallback: function(){
var action = 'savePost';
var dataTitle = $('#clientName').val();
var data = tinymce.get('post-content').getContent();
$.ajax({
type: 'POST',
url: 'PostHandler.php',
data: {action: action, client_name: dataTitle, post_content: data},
cache: false,
success: function(response){
alert(response);
}
});
}
});
});
</script>
ImageHandler.php (The script is the one who is posted on the tinymce documentation, I've only commented the CORS part because it will cause to me some problem.)
<?php
$accepted_origins = array("http://localhost", "http://192.168.1.1", "http://example.com");
$imageFolder = "../../img/portfolio/";
reset ($_FILES);
$temp = current($_FILES);
if (is_uploaded_file($temp['tmp_name'])){
// if (isset($_SERVER['HTTP_ORIGIN'])) {
// // same-origin requests won't set an origin. If the origin is set, it must be valid.
// if (in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)) {
// header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
// } else {
// header("HTTP/1.1 403 Origin Denied");
// return;
// }
// }
if (preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $temp['name'])) {
header("HTTP/1.1 400 Invalid file name.");
return;
}
// Verify extension
if (!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))) {
header("HTTP/1.1 400 Invalid extension.");
return;
}
if(!file_exists($_POST['client_name'])){
$clientFolder = mkdir($imageFolder.$_POST['client_name'], 0777);
}
// Accept upload if there was no origin, or if it is an accepted origin
//$filetowrite = $imageFolder . $temp['name'];
$filetowrite = $clientFolder . $temp['name'];
move_uploaded_file($temp['tmp_name'], $filetowrite);
// Respond to the successful upload with JSON.
// Use a location key to specify the path to the saved image resource.
// { location : '/your/uploaded/image/file'}
echo json_encode(array('location' => $filetowrite));
} else {
// Notify editor that the upload failed
header("HTTP/1.1 500 Server Error");
}
?>
PostHandler.php (This file will manage the save of the users contents)
<?php
require_once dirname(__DIR__, 1).'/Config.php';
if(isset($_POST['action']) && $_POST['action'] === 'savePost'){
$clientName = $_POST['client_name'];
$postContent = $_POST['post_content'];
$stmt = $db->prepare("INSERT INTO portfolio (post_content, client_name) VALUES (?, ?)");
if($stmt->execute(array($postContent, $clientName))){
echo 'ok';
} else {
echo $db->errorCode();
}
}
?>
