Sfoglia il codice sorgente

Added image upload manual test.

Szymon Kupś 8 anni fa
parent
commit
6ab4345478

+ 3 - 1
packages/ckeditor5-upload/src/filerepository.js

@@ -266,7 +266,9 @@ class FileLoader {
 		 * @observable
 		 * @member {Number} #uploadedPercent
 		 */
-		this.set( 'uploadedPercent', 0 );
+		this.bind( 'uploadedPercent' ).to( this, 'uploaded', this, 'uploadTotal', ( uploaded, total ) => {
+			return total ? ( uploaded / total * 100 ) : 0;
+		} );
 
 		/**
 		 * Response of the upload.

+ 4 - 0
packages/ckeditor5-upload/tests/manual/imageupload.html

@@ -2,3 +2,7 @@
 	<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 style="margin-top: 10px;">
+	<button id="progress" disabled>Upload progress</button>
+</div>

+ 24 - 1
packages/ckeditor5-upload/tests/manual/imageupload.js

@@ -30,14 +30,37 @@ ClassicEditor.create( document.querySelector( '#editor' ), {
 	toolbar: [ 'headings', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList' ]
 } )
 .then( editor => {
+	let adapterMock, progress;
+	const total = 500;
+
 	window.editor = editor;
 
+	const progressButton = document.getElementById( 'progress' );
+
 	// Register fake adapter.
 	editor.plugins.get( 'fileRepository' ).createAdapter = loader => {
-		const adapterMock = new AdapterMock( loader );
+		adapterMock = new AdapterMock( loader );
+		progress = 0;
+		loader.on( 'change:uploadedPercent', () => {
+			console.log( `Loader upload progress: ${ loader.uploadedPercent }%` );
+		}  );
+
+		progressButton.removeAttribute( 'disabled' );
 
 		return adapterMock;
 	};
+
+	progressButton.addEventListener( 'click', () => {
+		if ( adapterMock ) {
+			progress += 100;
+			adapterMock.mockProgress( progress, total );
+
+			if ( progress == total ) {
+				progressButton.setAttribute( 'disabled', 'true' );
+				adapterMock.mockSuccess( { original: './sample.jpg' } );
+			}
+		}
+	} );
 } )
 .catch( err => {
 	console.error( err.stack );

+ 6 - 0
packages/ckeditor5-upload/tests/manual/imageupload.md

@@ -1 +1,7 @@
 ## Image upload
+
+1. Drop an image into editor.
+1. Image should be read and displayed.
+1. Open console.
+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.

BIN
packages/ckeditor5-upload/tests/manual/sample.jpg