8
0
Просмотр исходного кода

Merge branch 'master' into t/ckeditor5-upload/92

Piotrek Koszuliński 6 лет назад
Родитель
Сommit
042b607d7e

+ 4 - 0
packages/ckeditor5-image/docs/features/image.md

@@ -228,6 +228,10 @@ The {@link module:image/imageupload~ImageUpload} plugin registers:
 * The `'imageUpload'` button which opens the native file browser to let you upload a file directly from your disk.
 * The {@link module:image/imageupload/imageuploadcommand~ImageUploadCommand `'imageUpload'` command} which accepts the file to upload.
 
+<info-box>
+	We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector CKEditor 5 inspector} for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.
+</info-box>
+
 ## Contribute
 
 The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-image.

+ 44 - 49
packages/ckeditor5-image/docs/framework/guides/deep-dive/upload-adapter.md

@@ -127,7 +127,8 @@ class MyUploadAdapter {
 		} );
 
 		// Return a promise that will be resolved when the file is uploaded.
-		return server.upload( loader.file );
+		return loader.file
+			.then( file => server.upload( file ) );
 	}
 
 	// Aborts the upload process.
@@ -182,11 +183,12 @@ class MyUploadAdapter {
 
 	// Starts the upload process.
 	upload() {
-		return new Promise( ( resolve, reject ) => {
-			this._initRequest();
-			this._initListeners( resolve, reject );
-			this._sendRequest( reject );
-		} );
+		return this.loader.file
+			.then( file => new Promise( ( resolve, reject ) => {
+				this._initRequest();
+				this._initListeners( resolve, reject, file );
+				this._sendRequest( file );
+			} ) );
 	}
 
 	// Aborts the upload process.
@@ -237,10 +239,10 @@ class MyUploadAdapter {
 	// ...
 
 	// Initializes XMLHttpRequest listeners.
-	_initListeners( resolve, reject ) {
+	_initListeners( resolve, reject, file ) {
 		const xhr = this.xhr;
 		const loader = this.loader;
-		const genericErrorText = 'Couldn\'t upload file:' + ` ${ loader.file.name }.`;
+		const genericErrorText = `Couldn't upload file: ${ file.name }.`;
 
 		xhr.addEventListener( 'error', () => reject( genericErrorText ) );
 		xhr.addEventListener( 'abort', () => reject() );
@@ -292,23 +294,19 @@ class MyUploadAdapter {
 	// ...
 
 	// Prepares the data and sends the request.
-	_sendRequest( reject ) {
-		this.loader.file
-			.then( file => {
-				// Prepare the form data.
-				const data = new FormData();
-
-				data.append( 'upload', file );
-
-				// Important note: This is the right place to implement security mechanisms
-				// like authentication and CSRF protection. For instance, you can use
-				// XMLHttpRequest.setRequestHeader() to set the request headers containing
-				// the CSRF token generated earlier by your application.
-
-				// Send the request.
-				this.xhr.send( data );
-			} )
-			.catch( reject );
+	_sendRequest( file ) {
+		// Prepare the form data.
+		const data = new FormData();
+
+		data.append( 'upload', file );
+
+		// Important note: This is the right place to implement security mechanisms
+		// like authentication and CSRF protection. For instance, you can use
+		// XMLHttpRequest.setRequestHeader() to set the request headers containing
+		// the CSRF token generated earlier by your application.
+
+		// Send the request.
+		this.xhr.send( data );
 	}
 }
 ```
@@ -416,11 +414,12 @@ class MyUploadAdapter {
 
 	// Starts the upload process.
 	upload() {
-		return new Promise( ( resolve, reject ) => {
-			this._initRequest();
-			this._initListeners( resolve, reject );
-			this._sendRequest( reject );
-		} );
+		return this.loader.file
+			.then( file => new Promise( ( resolve, reject ) => {
+				this._initRequest();
+				this._initListeners( resolve, reject, file );
+				this._sendRequest( file );
+			} ) );
 	}
 
 	// Aborts the upload process.
@@ -443,10 +442,10 @@ class MyUploadAdapter {
 	}
 
 	// Initializes XMLHttpRequest listeners.
-	_initListeners( resolve, reject ) {
+	_initListeners( resolve, reject, file ) {
 		const xhr = this.xhr;
 		const loader = this.loader;
-		const genericErrorText = 'Couldn\'t upload file:' + ` ${ loader.file.name }.`;
+		const genericErrorText = `Couldn't upload file: ${ file.name }.`;
 
 		xhr.addEventListener( 'error', () => reject( genericErrorText ) );
 		xhr.addEventListener( 'abort', () => reject() );
@@ -486,23 +485,19 @@ class MyUploadAdapter {
 	}
 
 	// Prepares the data and sends the request.
-	_sendRequest( reject ) {
-		this.loader.file
-			.then( file => {
-				// Prepare the form data.
-				const data = new FormData();
-
-				data.append( 'upload', file );
-
-				// Important note: This is the right place to implement security mechanisms
-				// like authentication and CSRF protection. For instance, you can use
-				// XMLHttpRequest.setRequestHeader() to set the request headers containing
-				// the CSRF token generated earlier by your application.
-
-				// Send the request.
-				this.xhr.send( data );
-			} )
-			.catch( reject );
+	_sendRequest( file ) {
+		// Prepare the form data.
+		const data = new FormData();
+
+		data.append( 'upload', file );
+
+		// Important note: This is the right place to implement security mechanisms
+		// like authentication and CSRF protection. For instance, you can use
+		// XMLHttpRequest.setRequestHeader() to set the request headers containing
+		// the CSRF token generated earlier by your application.
+
+		// Send the request.
+		this.xhr.send( data );
 	}
 }
 

+ 6 - 4
packages/ckeditor5-image/tests/imageupload/imageuploadediting.js

@@ -342,13 +342,15 @@ describe( 'ImageUploadEditing', () => {
 		setModelData( model, '<paragraph>{}foo bar</paragraph>' );
 		editor.execute( 'imageUpload', { file } );
 
-		model.once( '_change', () => {
+		model.document.once( 'change', () => {
 			tryExpect( done, () => {
 				expect( getViewData( view ) ).to.equal(
 					'[<figure class="ck-widget image" contenteditable="false">' +
-					`<img src="${ base64Sample }"></img>` +
-					'</figure>]' +
-					'<p>foo bar</p>' );
+						`<img src="${ base64Sample }"></img>` +
+						'</figure>]' +
+					'<p>foo bar</p>'
+				);
+
 				expect( loader.status ).to.equal( 'uploading' );
 			} );
 		} );