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&rsquo;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&rsquo;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&rsquo;s <code>file</code> entities and the existing file system.</li> </ul>
issue