Skip to content

[Bug]: doesn't work in Laravel 12 / Filament 3 #7

@cemkoker

Description

@cemkoker

Image Upload Fails with "Class name must be a valid object or a string" Error

Description

When trying to upload an image using the Editor.js Image Tool in Filament, the request fails with a 500 error. The server returns the following error message:

"message": "Class name must be a valid object or a string"

This occurs in FilamentEditorJsController.php line 25.

Steps to Reproduce

  1. Create a Post model that implements HasMedia and uses ModelHasEditorJsComponent trait
  2. Set up Filament resources for the Post model
  3. Try to upload an image in the Editor.js component

Error Details

Client-side console error:

[Log] Image Tool: uploading failed because of (filament-editorjs-scripts.js, line 89)
AxiosError
code: "ERR_BAD_RESPONSE"
message: "Request failed with status code 500"
response: {
"message": "Class name must be a valid object or a string",
"exception": "Error",
"file": "/path/to/vendor/athphane/filament-editorjs/src/Http/Controllers/FilamentEditorJsController.php",
"line": 25,
"trace": Array
}
status: 500

Request URL:

https://mysite.test/admin/editorjs/upload/image/App%5CModels%5CPost/1

Environment

  • PHP: 8.4.5
  • Laravel: Latest (10.x)
  • athphane/filament-editorjs: Latest
  • Filament: Latest

What I've Tried

  1. Registered the model through a service provider:
EditorJs::registerModels([
    Post::class,
]);
	2.	Ensured the model has the correct setup:
class Post extends Model implements HasMedia
{
    use HasFactory, InteractsWithMedia, ModelHasEditorJsComponent;
    
    // Model implementation
}
	3.	Made sure axios is available in the admin panel by adding:
FilamentView::registerRenderHook(
    PanelsRenderHook::HEAD_END,
    fn(): string => Blade::render('@vite(\'resources/js/app.js\')'),
);
	4.	Cleared all caches (⁠php artisan config:clear, ⁠php artisan cache:clear)
Questions
	1.	Is there a specific way to register models for image uploads that isn't documented?
	2.	Is the error related to URL encoding of the class name in the upload path (⁠App%5CModels%5CPost)?
	3.	Are there any additional configuration steps needed beyond implementing the interface and using the trait?
Any assistance would be greatly appreciated as this is blocking our content creation workflow.
Additional Context
The Spatie Media Library is set up correctly and works with other parts of the application. The error appears to be specifically related to how the FilamentEditorJs component resolves the model class during image upload.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions