Empty CANVAS_PATH breaks the image uploads

[mho22]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

I tried to locate my canvas dashboard on the subdomain http://dashboard.blog.test/ at the root level.

So my files look like this :

config/canvas.php

return [
    'domain' => env('CANVAS_DOMAIN', null),
    'path' => env('CANVAS_PATH', 'canvas'),
...
]

.env

CANVAS_DOMAIN=dashboard.blog.test
CANVAS_PATH=

When I try to add a Featured image on a random post I get an error in the console :

POST http://api/uploads net::ERR_NAME_NOT_RESOLVED

Expected Behavior

The image should be uploaded on the right url :

POST http://dashboard.blog.test/api/uploads

Steps To Reproduce

1. Create a generic laravel project with :

composer create-project --prefer-dist laravel/laravel blog

2. Add a database for your project

3. Add Canvas :

composer require austintoddj/canvas

4. Install canvas:

php artisan canvas:install

5. Add env elements :

.env

APP_URL=http://blog.test

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog

CANVAS_DOMAIN=dashboard.blog.test
CANVAS_PATH=

5. Try to add a featured image in a post

Environment

PHP version : 8.1.1
Laravel version : 10.0.0
Database driver : 10.8.3-MariaDB Homebrew

Anything else?

This seems to be an error with the FeaturedImageModal.vue [ or EmbedImageModal.vue or AvatarModal.vue ]

resources/js/components/editor/FeaturedImageModal.vue file at line 230:
or
resources/js/components/modals/EmbedImageModal.vue file at line 234 :

getServerOptions() {
        return {
                url: `${this.settings.path}/api/uploads`,
                headers: {
                    'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content,
                },
        };
},

the url line, when this.settings.path equals '' sets the url as /api/uploads. This will call the error url http://api/uploads

To make it work, I suppose we should have something like :

getServerOptions() {
        return {
                url: this.settings.path ? `${this.settings.path}/api/uploads` : `api/uploads` ,
                headers: {
                    'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content,
                },
        };
},

I found out you added this getServerOptions() on AvatarModal.vue file line 108 :

getServerOptions() {
    return {
    // TODO: This check shouldn't need to be here
        url: this.settings.path === '/' ? `/api/uploads` : `${this.settings.path}/api/uploads`,
        headers: {
            'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content,
        },
    };
},

But this seems incorrect if you set CANVAS_PATH="/" [ tricky I know ], should this be copy pasted to the two other files ?

I can try to make a PR for this if wanted ?

[austintoddj]

Happy to check out a PR if you'd like to submit one 😄