php - cant preview image with ajax in MVC project

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;