cant preview image with ajax in MVC project - php

Question

i am making a blogsite, and i can upload images to it using tinymce's richtext-editor, but the preview of the image doesnt show up in the textarea. (although if i upload the image anyway, i can perfectly see it in the blogfeed).
i suspect there is a problem with how i implemented tinymce into the MVC framework (brad traversy's framework on udemy). because when i look at the filepaths to the image they are different.
"<img src="http//localhost/mywebsite/content/images/image.jpg>". (image from the blogfeed)
"<img src="http//localhost/mywebsite/posts/content/images/image.jpg". (image from the tinymce editor)
for some reason the controller is being included when the image is loaded into the tinymce editor. i tried messing around with where the images should be saved, if i set it to $imageFolder = "images/"; then i can get the images to be seen in the blogfeed but not the preview. if i set $imageFolder = "../images/"; then the image can be seen in the preview but not in the blogfeed.
i also tried to define a constant path, "define ("IMGROOT", /path/to/my/site)" and then setting $imageFolder = IMGROOT . 'content/images"; but then i got the error "not allowed to load local resource" and im not very keen to circumvent that since it is probably a good reason to not load local resources once my blog is published.
upload.php:
<?php
//upload images
header('Content-Type: application/json');
/***************************************************
* Only these origins are allowed to upload images *
***************************************************/
$accepted_origins = array("http://localhost", "http://192.168.1.1", "http://example.com");
/*********************************************
* Change this line to set the upload folder *
*********************************************/
$imageFolder = "images/";
$temp = current($_FILES);
// 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'}
echo json_encode(array('location' => $filetowrite));
upload_handler:
tinymce.init({
selector: '#tinymcebody',
plugins: "image",
images_upload_url: '<?php echo URLROOT;?>/upload.php',
images_upload_handler: function (blobInfo, success, failure) {
var xhr;
var formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', '<?php echo URLROOT;?>/upload.php');
xhr.onload = function() {
var json;
if (xhr.status != 200) {
failure('HTTP Ereror: ' + 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());
console.log(formData);
xhr.send(formData);
}
});

Answer 1

I fixed it by adding a base_url to the tinymce init. this way it ignores the routing i got from the MVC tutorial and just loads any pictures that are in the specified folder. i also added 3 lines, im not entirely sure yet what they do but they do something to the path of the file.
note that i have defined constants in a config.php folder, so "URLROOT" is defined as "http:localhost/mywebsite".
tinymce.init({
selector: '#tinymcebody',
plugins: "image",
document_base_url : "<?php echo URLROOT; ?>",
relative_urls : false,
remove_script_host : false,
convert_urls : false,
images_upload_url: '<?php echo URLROOT;?>/upload.php',
images_upload_handler: function (blobInfo, success, failure) {
var xhr;
var formData;