Merge pull request #98 from ckeditor/t/97

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

Author: jodator

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://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://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://example.com/images/image.jpeg',
+						'120': 'http://example.com/images/image-120.jpeg',
+						'240': 'http://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 );