Browse Source

Refactoring, renamed manual test.

Szymon Kupś 8 years ago
parent
commit
a5b9e9cd05

+ 0 - 147
packages/ckeditor5-adapter-ckfinder/src/ckfinderadapter.js

@@ -1,147 +0,0 @@
-/**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* globals window, document, XMLHttpRequest, FormData */
-
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
-
-// TODO: load it from config.
-const TEMPORARY_UPLOAD_URL =
-	'https://cksource.com/weuy2g4ryt278ywiue/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json';
-export default class CKFinderAdapter extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get requires() {
-		return [ FileRepository ];
-	}
-
-	init() {
-		// Register CKFinderAdapter
-		this.editor.plugins.get( FileRepository ).createAdapter = loader => new Adapter( loader, this.editor.t );
-	}
-}
-
-class Adapter {
-	constructor( loader, t ) {
-		// Save Loader instance to update upload progress.
-		this.loader = loader;
-
-		this.t = t;
-	}
-
-	upload() {
-		const loader = this.loader;
-		const t = this.t;
-
-		return new Promise( ( resolve, reject ) => {
-			const xhr = this.xhr = new XMLHttpRequest();
-
-			// Prepare request.
-			xhr.open( 'POST', TEMPORARY_UPLOAD_URL, true );
-			xhr.responseType = 'json';
-
-			// Prepare listeners.
-			// TODO: Move strings to language files.
-			const genericError = t( 'Cannot upload file:' ) + loader.file.name + '.';
-			xhr.addEventListener( 'error', () => reject( genericError ) );
-			xhr.addEventListener( 'abort', () => reject() );
-			xhr.addEventListener( 'load', () => {
-				const response = xhr.response;
-
-				if ( !response.uploaded ) {
-					return reject( response.error && response.error.message ? response.error.message : genericError );
-				}
-
-				// Resolve promise with data from server.
-				resolve( {
-					original: response.url
-				} );
-			} );
-
-			// Upload progress when it's supported.
-			if ( xhr.upload ) {
-				xhr.upload.addEventListener( 'progress', ( evt ) => {
-					if ( evt.lengthComputable ) {
-						loader.uploadTotal = evt.total;
-						loader.uploaded = evt.loaded;
-					}
-				} );
-			}
-
-			// Prepare form data.
-			const data = new FormData();
-			data.append( 'upload', loader.file );
-			data.append( 'ckCsrfToken', getCsrfToken() );
-
-			// Send request.
-			xhr.send( data );
-		} );
-	}
-
-	abort() {
-		if ( this.xhr ) {
-			this.xhr.abort();
-		}
-	}
-}
-
-const TOKEN_COOKIE_NAME = 'ckCsrfToken';
-const TOKEN_LENGTH = 40;
-const tokenCharset = 'abcdefghijklmnopqrstuvwxyz0123456789';
-
-function getCsrfToken() {
-	let token = getCookie( TOKEN_COOKIE_NAME );
-
-	if ( !token || token.length != TOKEN_LENGTH ) {
-		token = generateToken( TOKEN_LENGTH );
-		setCookie( TOKEN_COOKIE_NAME, token );
-	}
-
-	return token;
-}
-
-function getCookie( name ) {
-	name = name.toLowerCase();
-	const parts = document.cookie.split( ';' );
-	let pair, key;
-
-	for ( let i = 0; i < parts.length; i++ ) {
-		pair = parts[ i ].split( '=' );
-		key = decodeURIComponent( pair[ 0 ].trim().toLowerCase() );
-
-		if ( key === name ) {
-			return decodeURIComponent( pair.length > 1 ? pair[ 1 ] : '' );
-		}
-	}
-
-	return null;
-}
-
-function setCookie( name, value ) {
-	document.cookie = encodeURIComponent( name ) + '=' + encodeURIComponent( value ) + ';path=/';
-}
-
-function generateToken( length ) {
-	let randValues = [];
-	let result = '';
-
-	if ( window.crypto && window.crypto.getRandomValues ) {
-		randValues = new Uint8Array( length );
-		window.crypto.getRandomValues( randValues );
-	} else {
-		for ( let i = 0; i < length; i++ ) {
-			randValues.push( Math.floor( Math.random() * 256 ) );
-		}
-	}
-
-	for ( let j = 0; j < randValues.length; j++ ) {
-		let character = tokenCharset.charAt( randValues[ j ] % tokenCharset.length );
-		result += Math.random() > 0.5 ? character.toUpperCase() : character;
-	}
-
-	return result;
-}

+ 101 - 0
packages/ckeditor5-adapter-ckfinder/src/uploadadapter.js

@@ -0,0 +1,101 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals XMLHttpRequest, FormData */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
+import { getCSRFToken } from './utils';
+
+export default class CKFinderUploadAdapter extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ FileRepository ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const url = this.editor.config.get( 'ckfinder.uploadUrl' ) || '';
+
+		// Register CKFinderAdapter
+		this.editor.plugins.get( FileRepository ).createAdapter = loader => new Adapter( loader, url, this.editor.t );
+	}
+}
+
+class Adapter {
+	constructor( loader, uploadURL, t ) {
+		// Save Loader instance to update upload progress.
+		this.loader = loader;
+		this.uploadURL = uploadURL;
+
+		this.t = t;
+	}
+
+	upload() {
+		return new Promise( ( resolve, reject ) => {
+			this._initRequest();
+			this._initListeners( resolve, reject );
+			this._sendRequest();
+		} );
+	}
+
+	abort() {
+		if ( this.xhr ) {
+			this.xhr.abort();
+		}
+	}
+
+	_initRequest() {
+		const xhr = this.xhr = new XMLHttpRequest();
+
+		xhr.open( 'POST', this.uploadURL, true );
+		xhr.responseType = 'json';
+	}
+
+	_initListeners( resolve, reject ) {
+		const xhr = this.xhr;
+		const loader = this.loader;
+		const t = this.t;
+		const genericError = t( 'Cannot upload file:' ) + ` ${ loader.file.name }.`;
+
+		xhr.addEventListener( 'error', () => reject( genericError ) );
+		xhr.addEventListener( 'abort', () => reject() );
+		xhr.addEventListener( 'load', () => {
+			const response = xhr.response;
+
+			if ( !response || !response.uploaded ) {
+				return reject( response && response.error && response.error.message ? response.error.message : genericError );
+			}
+
+			resolve( {
+				original: response.url
+			} );
+		} );
+
+		// Upload progress when it's supported.
+		if ( xhr.upload ) {
+			xhr.upload.addEventListener( 'progress', ( evt ) => {
+				if ( evt.lengthComputable ) {
+					loader.uploadTotal = evt.total;
+					loader.uploaded = evt.loaded;
+				}
+			} );
+		}
+	}
+
+	_sendRequest() {
+		// Prepare form data.
+		const data = new FormData();
+		data.append( 'upload', this.loader.file );
+		data.append( 'ckCsrfToken', getCSRFToken() );
+
+		// Send request.
+		this.xhr.send( data );
+	}
+}

+ 63 - 0
packages/ckeditor5-adapter-ckfinder/src/utils.js

@@ -0,0 +1,63 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals window, document */
+
+const TOKEN_COOKIE_NAME = 'ckCsrfToken';
+const TOKEN_LENGTH = 40;
+const tokenCharset = 'abcdefghijklmnopqrstuvwxyz0123456789';
+
+export function getCSRFToken() {
+	let token = getCookie( TOKEN_COOKIE_NAME );
+
+	if ( !token || token.length != TOKEN_LENGTH ) {
+		token = generateToken( TOKEN_LENGTH );
+		setCookie( TOKEN_COOKIE_NAME, token );
+	}
+
+	return token;
+}
+
+export function getCookie( name ) {
+	name = name.toLowerCase();
+	const parts = document.cookie.split( ';' );
+	let pair, key;
+
+	for ( let i = 0; i < parts.length; i++ ) {
+		pair = parts[ i ].split( '=' );
+		key = decodeURIComponent( pair[ 0 ].trim().toLowerCase() );
+
+		if ( key === name ) {
+			return decodeURIComponent( pair.length > 1 ? pair[ 1 ] : '' );
+		}
+	}
+
+	return null;
+}
+
+export function setCookie( name, value ) {
+	document.cookie = encodeURIComponent( name ) + '=' + encodeURIComponent( value ) + ';path=/';
+}
+
+export function generateToken( length ) {
+	let randValues = [];
+	let result = '';
+
+	if ( window.crypto && window.crypto.getRandomValues ) {
+		randValues = new Uint8Array( length );
+		window.crypto.getRandomValues( randValues );
+	} else {
+		for ( let i = 0; i < length; i++ ) {
+			randValues.push( Math.floor( Math.random() * 256 ) );
+		}
+	}
+
+	for ( let j = 0; j < randValues.length; j++ ) {
+		let character = tokenCharset.charAt( randValues[ j ] % tokenCharset.length );
+		result += Math.random() > 0.5 ? character.toUpperCase() : character;
+	}
+
+	return result;
+}

BIN
packages/ckeditor5-adapter-ckfinder/tests/manual/sample.jpg


+ 0 - 13
packages/ckeditor5-adapter-ckfinder/tests/manual/imageupload.html

@@ -2,16 +2,3 @@
 	<h2>Image upload</h2>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
 </div>
-
-<div id="button-container"></div>
-
-<style>
-	#button-container div {
-		margin-top: 10px;
-	}
-
-	#button-container button {
-		margin-right: 10px;
-	}
-</style>
-

+ 6 - 3
packages/ckeditor5-adapter-ckfinder/tests/manual/imageupload.js

@@ -21,14 +21,17 @@ import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
 import List from '@ckeditor/ckeditor5-list/src/list';
 import ImageUpload from '@ckeditor/ckeditor5-upload/src/imageupload';
 import ImageUploadProgress from '@ckeditor/ckeditor5-upload/src/imageuploadprogress';
-import CKFinderAdapter from '../../src/ckfinderadapter';
+import CKFinderUploadAdapter from '../../src/uploadadapter';
 
 ClassicEditor.create( document.querySelector( '#editor' ), {
 	plugins: [
 		Enter, Typing, Paragraph, Heading, Undo, Bold, Italic, Heading, List, Image, ImageToolbar, Clipboard,
-		ImageCaption, ImageStyle, ImageUpload, CKFinderAdapter, ImageUploadProgress
+		ImageCaption, ImageStyle, ImageUpload, CKFinderUploadAdapter, ImageUploadProgress
 	],
-	toolbar: [ 'headings', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList', 'insertImage' ]
+	toolbar: [ 'headings', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList', 'insertImage' ],
+	ckfinder: {
+		uploadUrl: 'https://cksource.com/weuy2g4ryt278ywiue/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
+	}
 } )
 .catch( err => {
 	console.error( err.stack );

+ 3 - 3
packages/ckeditor5-adapter-ckfinder/tests/manual/imageupload.md

@@ -1,9 +1,9 @@
-## Image upload
+## CKFinder upload adapter
 
 1. Drop an image into editor.
 1. Image should be read and displayed.
-1. Press "Upload progress" button couple times to simulate upload process.
-1. After uploading is complete your image should be replaced with sample image from server.
+1. Upload progress bar should be visible above the image.
+1. After uploading is complete your image should be replaced with sample image from server (use dev tools to check image src attribute).
 
 Repeat all the steps with:
 * dropping multiple images,