Error 403 when trying to upload image using TinyMCE - php

Question

I'm trying to upload images through TinyMCE but am getting "HTTP Error: 403" shown in the editor itself. I've taken the code from the website for both the script and the php page respectively:
tinymce.init({
selector: "textarea",
plugins: "link image",
height:300,
setup: function (editor) {
editor.on('change', function () {editor.save();});
},
images_upload_handler: function (blobInfo, success, failure) {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', 'queries/editorImageUpload.php');
xhr.onload = function() {
var json;
if (xhr.status != 200) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.location);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
}
});
And then within 'editorImageUpload.php', I think the problem is to do with the $accepted_origins part as its returning a 403 error:
$accepted_origins = array("https://localhost", "https://77.104.172.194");
$imageFolder = "pictures/Test/";
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;
}
}
Any insight on this would be very helpful.

Answer 1

First of all you have two problems with your code
-your php code does not transfer the image to the server
-in your php code you are making array of $accepted_origins with "https://localhost" and you forget the unsecured version "http://localhost"
so the fastest fix for your problem is to write valid php code that will transfer the image to your server and return the image full path for the editor here is the php code
editorImageUpload.php
<?php
$ds = DIRECTORY_SEPARATOR;
$storeFolder = 'images';
if (!empty($_FILES))
{
$tempFile = $_FILES['file']['tmp_name'];
$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;
$file_name = substr(md5(rand(1, 213213212)), 1, 5) . "_" . str_replace(array('\'', '"', ' ', '`'), '_', $_FILES['file']['name']);
$targetFile = $targetPath. $file_name;
if(move_uploaded_file($tempFile,$targetFile)){
die( $_SERVER['HTTP_REFERER']. $storeFolder . "/" . $file_name );
}else{
die('Fail');
}
}
?>
and in your javascript callback you have to check for the xhr.response not the xhr.responseText since you are dying with the image full path
Tinymce code
tinymce.init({
selector: "textarea",
plugins: "link image",
height:300,
images_upload_handler: function (blobInfo, success, failure) {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', 'editorImageUpload.php');
xhr.onload = function() {
var json;
if (xhr.status != 200) {
failure('HTTP Error: ' + xhr.status);
return;
}
console.log(xhr.response);
//your validation with the responce goes here
success(xhr.response);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
}
});