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
- Create a Post model that implements
HasMedia and uses ModelHasEditorJsComponent trait
- Set up Filament resources for the Post model
- 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
- 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.
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.phpline 25.Steps to Reproduce
HasMediaand usesModelHasEditorJsComponenttraitError 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
What I've Tried