Contrib.social

Console errors after uploading images

Open on Drupal.org →
Created on 29 April 2025, 13 days ago

Problem/Motivation

Note, the error is mostly generated by ChatGPT but I have reviewed it and hope I've clarified things.

When editing a content node (e.g., /node/1/edit) using the CKEditor integration that includes AI modules (e.g., AI Image generation or insertion), and while the Autosave Form module is enabled, an AJAX modal fails to open correctly.
An error occurs because the form handling attempts to serialize a Symfony\Component\HttpFoundation\File\UploadedFile object, which is not serializable by PHP.
As a result, the user sees an AJAX error with an HTTP 500 status, and the form submission fails.

The critical error message is:

Exception: Serialization of 'Symfony\Component\HttpFoundation\File\UploadedFile' is not allowed in serialize() (line 14 of core/lib/Drupal/Component/Serialization/PhpSerialize.php)

This happens when the form tries to cache or autosave a form state that includes an UploadedFile object without first handling it properly.

Steps to reproduce

  1. Enable the AI Provider modules that integrate with CKEditor (ai and a LLM Provider like ai_provider_google_vertex).
  2. Enable the Autosave Form module. This is using Drupal CMS with most defaults.
  3. Edit an existing node: go to /node/[nid]/edit.
  4. In a CKEditor field (e.g., a body or description field), open an AI plugin dialog that includes a file upload element (e.g., an "Insert Image" button with AI enhancement).
  5. Attempt to interact with the modal (for example, select or upload an image or trigger the AI generation). There should be errors in the browser console.
  6. Observe an AJAX error pop up:
    • HTTP Result Code: 500
    • The detailed error will indicate an exception during serialize() on UploadedFile.

Proposed resolution

  • ChatGPT suggests that we modify the affected form handlers (likely in the AI provider or CKEditor integration modules) to avoid storing the UploadedFile object directly into form state.
  • Instead:
    • Immediately move uploaded files into Drupal’s managed temporary or permanent file storage using file_save_upload().
    • Store only the File entity ID (fid) or URI reference in the form state.
  • Review use of Autosave Form hooks to ensure they do not attempt to serialize raw file objects.

Remaining tasks

  • Confirm which form element(s) (image upload or AI field) introduce the UploadedFile object into the form state.
  • Refactor the form handling to store only serializable values (e.g., file IDs or URIs).
  • Add unit or kernel tests to verify that form state caching does not break with file uploads.
  • Retest editing a node with the AI CKEditor dialogs with Autosave enabled.
  • (Optional) Review Drupal’s guidance on FormStateInterface::cleanValues() for best practices.

User interface changes

  • None directly.
  • Users will no longer encounter AJAX 500 errors when interacting with AI modals and uploading images in CKEditor.

API changes

  • None expected. A solution may involve using file_save_upload() and only storing File entity references instead of full file objects.

Data model changes

  • None expected.
  • Uploaded files should already be handled via Drupal’s file entities and the existing file system.
🐛 Bug report
Status

Active

Version

1.0

Component

Code

Created by

🇨🇦Canada mgifford Ottawa, Ontario

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024