Console errors after uploading images using AI module
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3521839. -->
Reported by: [mgifford](https://www.drupal.org/user/27930)
Related to !601 !576
>>>
<h3 id="summary-problem-motivation">Problem/Motivation</h3>
<p>Note, the error is mostly generated by ChatGPT but I have reviewed it and hope I've clarified things. </p>
<p>When editing a content node (e.g., <code>/node/1/edit</code>) using the CKEditor integration that includes AI modules (e.g., AI Image generation or insertion), and while the <strong>Autosave Form</strong> module is enabled, an AJAX modal fails to open correctly.<br><br>
An error occurs because the form handling attempts to <strong>serialize a <code>Symfony\Component\HttpFoundation\File\UploadedFile</code> object</strong>, which is not serializable by PHP.<br><br>
As a result, the user sees an AJAX error with an HTTP 500 status, and the form submission fails.</p>
<p>The critical error message is:</p>
<pre><pre>Exception: Serialization of 'Symfony\Component\HttpFoundation\File\UploadedFile' is not allowed in serialize() (line 14 of core/lib/Drupal/Component/Serialization/PhpSerialize.php)</pre></pre><p>This happens when the form tries to cache or autosave a form state that includes an UploadedFile object without first handling it properly.</p>
<p><img src="https://www.drupal.org/files/issues/2025-04-29/Screenshot%202025-04-29%20at%205.01.14%E2%80%AFPM.png" alt="Errors from edit page"></p>
<h4 id="summary-steps-reproduce">Steps to reproduce</h4>
<ol>
<li>Enable the <strong>AI Provider</strong> modules that integrate with CKEditor (<code>ai</code> and a LLM Provider like <code>ai_provider_google_vertex</code>).</li>
<li>Enable the <strong>Autosave Form</strong> module. This is using Drupal CMS with most defaults.</li>
<li>Edit an existing node: go to <code>/node/[nid]/edit</code>.</li>
<li>In a CKEditor field (e.g., a body or description field), open an <strong>AI plugin dialog</strong> that includes a file upload element (e.g., an "Insert Image" button with AI enhancement).</li>
<li>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.</li>
<li>Observe an AJAX error pop up:
<ul>
<li>HTTP Result Code: <strong>500</strong></li>
<li>The detailed error will indicate an exception during <code>serialize()</code> on <code>UploadedFile</code>.</li>
</ul>
</li>
</ol>
<h3 id="summary-proposed-resolution">Proposed resolution</h3>
<ul>
<li>ChatGPT suggests that we modify the affected form handlers (likely in the AI provider or CKEditor integration modules) to <strong>avoid storing the <code>UploadedFile</code> object directly into form state</strong>.</li>
<li>Instead:
<ul>
<li>Immediately <strong>move uploaded files</strong> into Drupal’s managed temporary or permanent file storage using <code>file_save_upload()</code>.</li>
<li>Store only the <strong>File entity ID (fid)</strong> or URI reference in the form state.</li>
</ul>
</li>
<li>Review use of Autosave Form hooks to ensure they do not attempt to serialize raw file objects.</li>
</ul>
<h3 id="summary-remaining-tasks">Remaining tasks</h3>
<ul>
<li>Confirm which form element(s) (image upload or AI field) introduce the <code>UploadedFile</code> object into the form state.</li>
<li>Refactor the form handling to store only serializable values (e.g., file IDs or URIs).</li>
<li>Add unit or kernel tests to verify that form state caching does not break with file uploads.</li>
<li>Retest editing a node with the AI CKEditor dialogs with Autosave enabled.</li>
<li>(Optional) Review Drupal’s guidance on <code>FormStateInterface::cleanValues()</code> for best practices.</li>
</ul>
<h3 id="summary-ui-changes">User interface changes</h3>
<ul>
<li>None directly.</li>
<li>Users will no longer encounter AJAX 500 errors when interacting with AI modals and uploading images in CKEditor.</li>
</ul>
<h3 id="summary-api-changes">API changes</h3>
<ul>
<li>None expected. A solution may involve using <code>file_save_upload()</code> and only storing File entity references instead of full file objects.</li>
</ul>
<h3 id="summary-data-model-changes">Data model changes</h3>
<ul>
<li>None expected.</li>
<li>Uploaded files should already be handled via Drupal’s <code>file</code> entities and the existing file system.</li>
</ul>
issue