How to set responsive images with CKEditor 5?

Question

Using the Simple Upload Adapter, according to the CKEditor 5 documentation upon a successful image upload, the server should return either:

This for a single image:

{
    default: 'http://example.com/images/image–default-size.png'
}

Or this for multiple (i.e. for the srcset attribute)

{
    default: 'http://example.com/images/image–default-size.png',
    '160': 'http://example.com/images/image–size-160.image.png',
    '500': 'http://example.com/images/image–size-500.image.png',
    '1000': 'http://example.com/images/image–size-1000.image.png',
    '1052': 'http://example.com/images/image–default-size.png'
}

For starters the documentation is incorrect as per this SO post, so I'm not surprised this doesn't work. But does anyone know what response format CKEditor 5 is expecting for it to correctly insert/build the srcset attribute? It does take the default key but seems to ignore the others!

Tatia

Don't you use an old version of simple upload adapter? We added support for handling responsive images there 7 months ago: github.com/ckeditor/ckeditor5-upload/blame/… – Chorale

Answer 1

Inside of the _initListeners function of the upload adapter you will find that the Promise only resolves with the following:

resolve( {
    default: response.url
} );

The solution - change the Promise to resolve the following:

resolve( response.urls );

Note, in this example the response object may have either keys url or urls.

I ended up using the following as I ignore null keys in my server responses.

if ( response.hasOwnProperty( 'url' ) ) {
    resolve( {
        default: response.url
    } );
} else if ( response.hasOwnProperty( 'urls' ) ) {
    resolve( response.urls );
}

---

As a sidenote, if you've read through the other SO post I referred to, I would also recommend removing this (see commented section):

if ( !response /** || !response.uploaded */ ) {
    return reject( response && response.error && response.error.message ? response.error.message : genericError );
}

I'm not a fan of using arbitrary flags in response, if the upload failed then I would rather see a HTTP status code indicating it, I can't see any reason why we need to return 200 and { "uploaded" : false }

Tatia