Connect CKEditor image uploads to a Laravel endpoint

This applies to an integration that already includes the Simple Upload Adapter under its applicable license. Check the adapter documentation and availability for your CKEditor distribution. Add the configuration to that existing integration and implement the endpoint in your Laravel application.

Give the image request its own contract

Suppose an equipment-maintenance note needs a connector photograph. Saving the note's HTML and storing the uploaded photograph are separate operations. The adapter posts the image as multipart form data using an upload field. A successful endpoint response can be:

{
  "url": "https://example.com/storage/notes/connector.jpg"
}

The URL is illustrative. Return the address of the file your application actually stored. CKEditor uses the returned address in the editor and in saved content; returning a local disk path will not give the reader a browser-accessible image.

For a rejected file, the adapter documents this response shape:

{
  "error": {
    "message": "Upload a JPEG or PNG within the permitted size."
  }
}

Map validation failures to a useful response your installed adapter understands. A framework error page, login redirect, or unrelated JSON object is a different contract even when the server generated it correctly.

Keep Laravel's request protections in place

For a same-origin Blade page using Laravel's session-based web routes, expose the current CSRF token in the page and read it into the adapter's headers:

<meta name="csrf-token" content="{{ csrf_token() }}">

const csrfToken = document.querySelector(
  'meta[name="csrf-token"]'
).content;

// Include this in your existing CKEditor configuration.
const uploadOptions = {
  simpleUpload: {
    uploadUrl: '/editor/images',
    headers: { 'X-CSRF-TOKEN': csrfToken }
  }
};

Merge the option into the editor configuration that actually loads the adapter. The object alone does not initialize CKEditor. Laravel documents the X-CSRF-TOKEN header for its CSRF middleware; API-token or cross-origin integrations require their own appropriate authentication arrangement. Laravel CSRF handling

Require authentication and permission to attach files at the endpoint. Validate the uploaded file on the server, including supported image type and size. Restricting the editor's file picker does not validate a request sent directly to the route.

Return an address the intended reader can open

Laravel's local public disk normally uses storage/app/public, with a public link at public/storage. Its filesystem documentation describes generating that link and producing file URLs. Use the disk and serving arrangement your deployment actually provides. Public disk and URLs

Public storage is suitable only for files intended to be public. For restricted maintenance records, use an access-controlled serving route and an image address that works under the reader's permissions. Do not make private photographs public simply to resolve a broken image.

Separate upload success from saved-note success

In a development record, upload a permitted photo and inspect the returned URL. Save the note, reopen it, and check that its HTML still references that image. Open the reader view using the intended access level. A working editor preview does not prove the saved note or its future image request works.

Also reject an unsupported file and check that the author receives a meaningful message while retaining the note text. If the application uses Nova's Trix field instead, follow its attachment lifecycle; those managed attachments use a different integration. Keep file retention and abandoned-upload cleanup in the application that owns the stored images.