Hi guys,
I need some help, I have problem with Tinymce version 4.9.8 upload image. I follow from this official guide (
https://www.tiny.cloud/docs-4x/general-c...agehandler)
This is my script from view
Code:
<?= script_tag('assets/tinymce/tinymce.min.js'); ?>
<script>
tinymce.init({
selector: 'textarea#post_content',
plugins: 'image code media',
toolbar: 'undo redo | styleselect | bold italic underline | link image media | code',
menubar: false,
document_base_url: '<?= base_url() ?>',
images_upload_handler: function (blobInfo, success, failure, progress) {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', '<?= base_url('admin/blog/imgUpload') ?>');
xhr.upload.onprogress = function (e) {
progress(e.loaded / e.total * 100);
};
xhr.onload = function() {
var json;
if (xhr.status < 200 || xhr.status >= 300) {
failure('HTTP Error: ' + xhr.status);
return;
}
// console.log(xhr.responseText);
json = JSON.parse(xhr.responseText);
// console.log(json.location);
if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.location);
};
xhr.onerror = function () {
failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
}
});
</script>
2. Controller code:
PHP Code:
public function blogImgUpload()
{
$accepted_origins = array('http://localhost:8080');
$imageFolder = "../public/blog_img/";
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 your script needs to receive cookies, set images_upload_credentials : true in
the configuration and enable the following two headers.
*/
// header('Access-Control-Allow-Credentials: true');
// header('P3P: CP="There is no P3P policy."');
// Sanitize input
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;
}
// Accept upload if there was no origin, or if it is an accepted origin
$filetowrite = $imageFolder . $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'}
// $img = [
// 'location' => base_url('blog_img/') . $temp['name']
// ];
$img = [
'location' => $filetowrite
];
// echo $this->response->setJSON($img);
return json_encode($img);
} else {
// Notify editor that the upload failed
header("HTTP/1.1 500 Server Error");
}
Routes.php settings
PHP Code:
$routes->group('admin', function($routes){
...
$routes->add('blog/imgUpload', 'Admin\BlogManagement::blogImgUpload');
..
});
1) The file is successfully upload at `blog_img/` directory
2) I receive error in chrome console
PHP Code:
Uncaught SyntaxError: Unexpected token < in JSON at position 43
at JSON.parse (<anonymous>)
at XMLHttpRequest.xhr.onload (create:150)
output/response from json_encode
Code:
{"location":"..\/public\/blog_img\/8.png"}
I hope someone can help me..
This is me. JK not me.