Location not showing properly tinymce Image upload

Location not showing properly tinymce Image upload

Problem Description:

I am trying to add image upload plugin to tinymce. But it creates the image url without one directory. Like follows:

present -> localhost/blog/includes/tinymce/images/home-about.png

<br>

what I want to have -> localhost/blog/admin/includes/tinymce/images/home-about.png

I want to add admin directory to this url. Actually, this url is showing in the blog post in home directory

here

This is my tinymce.init code:

<script>

    const example_image_upload_handler = (blobInfo, progress) => new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', 'includes/tinymce/postAccepter.php');

        xhr.upload.onprogress = (e) => {
            progress(e.loaded / e.total * 100);
        };

        xhr.onload = () => {
            if (xhr.status === 403) {
                reject({ message: 'HTTP Error: ' + xhr.status, remove: true });
                return;
            }

            if (xhr.status < 200 || xhr.status >= 300) {
                reject('HTTP Error: ' + xhr.status);
                return;
            }

            const json = JSON.parse(xhr.responseText);

            if (!json || typeof json.location != 'string') {
                reject('Invalid JSON: ' + xhr.responseText);
                return;
            }

            resolve(json.location);
        };

        xhr.onerror = () => {
            reject('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
        };

        const formData = new FormData();
        formData.append('file', blobInfo.blob(), blobInfo.filename());

        xhr.send(formData);
    });

    tinymce.init({
        selector: 'textarea#default',
        plugins: 'code media image',
        height: 500,
        branding: false,
        elementpath: false,

        toolbar: 'link image insert | undo redo |  formatselect | bold italic underline forecolor removeformat | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | table blockquote codesample code',

        block_unsupported_drop: false,
        images_upload_url: 'admin/includes/tinymce/postAccepter.php',
        automatic_uploads: true,
        images_upload_base_path: 'tinymce/images',
        images_upload_credentials: true,
        images_upload_handler: example_image_upload_handler,
        images_reuse_filename: true,

    });
</script>

And this is the postAccepter.php:

<?php
/***************************************************
 * 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/";

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;
    }
}

// Don't attempt to process the upload on an OPTIONS request
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    header("Access-Control-Allow-Methods: POST, OPTIONS");
    return;
}

reset ($_FILES);
$temp = current($_FILES);
if (is_uploaded_file($temp['tmp_name'])){
    /*
      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("/([^wsd-_~,;:[]().])|([.]{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);

    // Determine the base URL
    $protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on' ? "https://" : "http://";
    $baseurl = $protocol . $_SERVER["HTTP_HOST"] . rtrim(dirname($_SERVER['REQUEST_URI']), "/") . "/";

    // 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' => $baseurl . $filetowrite));
} else {
    // Notify editor that the upload failed
    header("HTTP/1.1 500 Server Error");
}

?>

enter image description here

I tried to fix it but I cannot. Help appreciated Thanks!

Solution – 1

convert_urls: false,

worked for me!!!!