From 4e2f287997d8a2d810a8a39acf3095bc71b229ae Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 1 Aug 2019 14:35:18 +0200
Subject: [PATCH] Feature: Implemented responsive image support in the
 SimpleUploadAdapter.

---
 docs/features/simple-upload-adapter.md | 31 ++++++++++++++++++++------
 src/adapters/simpleuploadadapter.js    |  4 +---
 tests/adapters/simpleuploadadapter.js  | 31 ++++++++++++++++++++++----
 3 files changed, 52 insertions(+), 14 deletions(-)

diff --git a/docs/features/simple-upload-adapter.md b/docs/features/simple-upload-adapter.md
index c3ac475..a314e9b 100644
--- a/docs/features/simple-upload-adapter.md
+++ b/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}.
diff --git a/src/adapters/simpleuploadadapter.js b/src/adapters/simpleuploadadapter.js
index f7fc5bc..b94ada3 100644
--- a/src/adapters/simpleuploadadapter.js
+++ b/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.
diff --git a/tests/adapters/simpleuploadadapter.js b/tests/adapters/simpleuploadadapter.js
index e3516cf..7522526 100644
--- a/tests/adapters/simpleuploadadapter.js
+++ b/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 );