Merge pull request #98 from ckeditor/t/97

Feature: Implemented the responsive image support in the `SimpleUploadAdapter`. Closes #97.

docs/features/simple-upload-adapter.md

@@ -87,15 +87,32 @@ The [`responseType`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpReq
 
 ### Successful upload
 
-If the upload is successful, the server should return an object containing the `url` property which points out to the uploaded image on the server:
+If the upload is successful, the server should either return:
 
-```json
-{
- "url": "https://example.com/images/foo.jpg"
-}
-```
+* an object containing the `url` property which points out to the uploaded image on the server:
+
+ ```json
+ {
+  "url": "https://example.com/images/foo.jpg"
+ }
+ ```
+
+* an object with the `urls` property, if you want to use [responsive images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) and the server supports it:
+
+ ```json
+ {
+  "urls": {
+  "default": "https://example.com/images/foo.jpg",
+  "800": "https://example.com/images/foo-800.jpg",
+  "1024": "https://example.com/images/foo-1024.jpg",
+  "1920": "https://example.com/images/foo-1920.jpg"
+  }
+ }
+ ```
+
+ The `"default"` URL will be used in the `src` attribute of the image in the editor content. Other URLs will be used in the `srcset` attribute allowing the web browser to select the best one for the geometry of the viewport.
 
-That image URL is essential because it will be used:
+URL(s) in the server response are used:
 
 * to display the image during the editing (as seen by the user in the editor),
 * in the editor content {@link builds/guides/integration/saving-data saved to the databse}.

src/adapters/simpleuploadadapter.js

@@ -176,9 +176,7 @@ class Adapter {
  return reject( response && response.error && response.error.message ? response.error.message : genericErrorText );
  }
 
- resolve( {
- default: response.url
- } );
+ resolve( response.url ? { default: response.url } : response.urls );
  } );
 
  // Upload progress when it is supported.

tests/adapters/simpleuploadadapter.js

@@ -136,8 +136,7 @@ describe( 'SimpleUploadAdapter', () => {
  } );
  } );
 
- it( 'should call url from config', () => {
- let request;
+ it( 'should send a request to config#uploadUrl', () => {
  const validResponse = {
  url: 'http:https://example.com/images/image.jpeg'
  };
@@ -146,7 +145,7 @@ describe( 'SimpleUploadAdapter', () => {
 
  return loader.file
  .then( () => {
- request = sinonXHR.requests[ 0 ];
+ const request = sinonXHR.requests[ 0 ];
  request.respond( 200, { 'Content-Type': 'application/json' }, JSON.stringify( validResponse ) );
 
  expect( request.url ).to.equal( 'http:https://example.com' );
@@ -159,7 +158,31 @@ describe( 'SimpleUploadAdapter', () => {
  } );
  } );
 
- it( 'should modify headers of uploading request if specified', () => {
+ it( 'should support responsive image URLs returned in the server response', () => {
+ const validResponse = {
+ urls: {
+ default: 'http:https://example.com/images/image.jpeg',
+ '120': 'http:https://example.com/images/image-120.jpeg',
+ '240': 'http:https://example.com/images/image-240.jpeg'
+ }
+ };
+
+ const uploadPromise = adapter.upload();
+
+ return loader.file
+ .then( () => {
+ sinonXHR.requests[ 0 ].respond( 200, {
+ 'Content-Type': 'application/json'
+ }, JSON.stringify( validResponse ) );
+
+ return uploadPromise;
+ } )
+ .then( uploadResponse => {
+ expect( uploadResponse ).to.deep.equal( validResponse.urls );
+ } );
+ } );
+
+ it( 'should use config#headers in the request (when specified)', () => {
  const editorElement = document.createElement( 'div' );
  document.body.appendChild( editorElement );