|
|
@@ -8,11 +8,10 @@
|
|
|
*/
|
|
|
|
|
|
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
|
|
|
-import { eventNameToConsumableType } from '@ckeditor/ckeditor5-engine/src/conversion/model-to-view-converters';
|
|
|
import FileRepository from './filerepository';
|
|
|
import ImageUploadCommand from './imageuploadcommand';
|
|
|
+import ImageUploadProgress from './imageuploadprogress';
|
|
|
import Notification from '@ckeditor/ckeditor5-ui/src/notification/notification';
|
|
|
-import uploadingPlaceholder from '../theme/icons/image_placeholder.svg';
|
|
|
import { isImageType } from './utils';
|
|
|
|
|
|
/**
|
|
|
@@ -21,23 +20,11 @@ import { isImageType } from './utils';
|
|
|
* @extends module:core/plugin~Plugin
|
|
|
*/
|
|
|
export default class ImageUploadEngine extends Plugin {
|
|
|
- constructor( editor ) {
|
|
|
- super( editor );
|
|
|
-
|
|
|
- /**
|
|
|
- * Image's placeholder that is displayed before real image data can be accessed.
|
|
|
- *
|
|
|
- * @protected
|
|
|
- * @member {String} #placeholder
|
|
|
- */
|
|
|
- this.placeholder = 'data:image/svg+xml;utf8,' + uploadingPlaceholder;
|
|
|
- }
|
|
|
-
|
|
|
/**
|
|
|
* @inheritDoc
|
|
|
*/
|
|
|
static get requires() {
|
|
|
- return [ FileRepository, Notification ];
|
|
|
+ return [ FileRepository, Notification, ImageUploadProgress ];
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
@@ -50,6 +37,7 @@ export default class ImageUploadEngine extends Plugin {
|
|
|
|
|
|
// Setup schema to allow uploadId for images.
|
|
|
schema.allow( { name: 'image', attributes: [ 'uploadId' ], inside: '$root' } );
|
|
|
+ schema.allow( { name: 'image', attributes: [ 'uploadId', 'uploadStatus' ], inside: '$root' } );
|
|
|
schema.requireAttributes( 'image', [ 'uploadId' ] );
|
|
|
|
|
|
// Register imageUpload command.
|
|
|
@@ -85,20 +73,6 @@ export default class ImageUploadEngine extends Plugin {
|
|
|
}
|
|
|
}
|
|
|
} );
|
|
|
-
|
|
|
- // Model to view converter for image's `uploadId` attribute.
|
|
|
- editor.editing.modelToView.on( 'addAttribute:uploadId:image', ( evt, data, consumable ) => {
|
|
|
- if ( !consumable.consume( data.item, eventNameToConsumableType( evt.name ) ) ) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- const modelImage = data.item;
|
|
|
- const viewFigure = editor.editing.mapper.toViewElement( modelImage );
|
|
|
- const viewImg = viewFigure.getChild( 0 );
|
|
|
-
|
|
|
- viewImg.setAttribute( 'src', this.placeholder );
|
|
|
- this.fire( 'upload:reading', modelImage );
|
|
|
- } );
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
@@ -116,6 +90,10 @@ export default class ImageUploadEngine extends Plugin {
|
|
|
const fileRepository = editor.plugins.get( FileRepository );
|
|
|
const notification = editor.plugins.get( Notification );
|
|
|
|
|
|
+ doc.enqueueChanges( () => {
|
|
|
+ batch.setAttribute( imageElement, 'uploadStatus', 'reading' );
|
|
|
+ } );
|
|
|
+
|
|
|
loader.read()
|
|
|
.then( data => {
|
|
|
const viewFigure = editor.editing.mapper.toViewElement( imageElement );
|
|
|
@@ -123,17 +101,18 @@ export default class ImageUploadEngine extends Plugin {
|
|
|
viewImg.setAttribute( 'src', data );
|
|
|
editor.editing.view.render();
|
|
|
|
|
|
- this.fire( 'upload:uploading', imageElement, loader );
|
|
|
+ doc.enqueueChanges( () => {
|
|
|
+ batch.setAttribute( imageElement, 'uploadStatus', 'uploading' );
|
|
|
+ } );
|
|
|
|
|
|
return loader.upload();
|
|
|
} )
|
|
|
.then( data => {
|
|
|
doc.enqueueChanges( () => {
|
|
|
+ batch.setAttribute( imageElement, 'uploadStatus', 'complete' );
|
|
|
batch.setAttribute( imageElement, 'src', data.original );
|
|
|
} );
|
|
|
|
|
|
- this.fire( 'upload:complete', imageElement, loader );
|
|
|
-
|
|
|
clean();
|
|
|
} )
|
|
|
.catch( msg => {
|
|
|
@@ -148,6 +127,7 @@ export default class ImageUploadEngine extends Plugin {
|
|
|
function clean() {
|
|
|
doc.enqueueChanges( () => {
|
|
|
batch.removeAttribute( imageElement, 'uploadId' );
|
|
|
+ batch.removeAttribute( imageElement, 'uploadStatus' );
|
|
|
} );
|
|
|
|
|
|
fileRepository.destroyLoader( loader );
|