8
0

imageuploadui.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module image/imageupload/imageuploadui
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import FileDialogButtonView from '@ckeditor/ckeditor5-upload/src/ui/filedialogbuttonview';
  10. import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
  11. import { createImageTypeRegExp } from './utils';
  12. /**
  13. * The image upload button plugin.
  14. *
  15. * For a detailed overview, check the {@glink features/image-upload/image-upload Image upload feature} documentation.
  16. *
  17. * Adds the `'imageUpload'` button to the {@link module:ui/componentfactory~ComponentFactory UI component factory}.
  18. *
  19. * @extends module:core/plugin~Plugin
  20. */
  21. export default class ImageUploadUI extends Plugin {
  22. /**
  23. * @inheritDoc
  24. */
  25. init() {
  26. const editor = this.editor;
  27. const t = editor.t;
  28. // Setup `imageUpload` button.
  29. editor.ui.componentFactory.add( 'imageUpload', locale => {
  30. const view = new FileDialogButtonView( locale );
  31. const command = editor.commands.get( 'imageUpload' );
  32. const imageTypes = editor.config.get( 'image.upload.types' );
  33. const imageTypesRegExp = createImageTypeRegExp( imageTypes );
  34. view.set( {
  35. acceptedType: imageTypes.map( type => `image/${ type }` ).join( ',' ),
  36. allowMultipleFiles: true
  37. } );
  38. view.buttonView.set( {
  39. label: t( 'Insert image' ),
  40. icon: imageIcon,
  41. tooltip: true
  42. } );
  43. view.buttonView.bind( 'isEnabled' ).to( command );
  44. view.on( 'done', ( evt, files ) => {
  45. const imagesToUpload = Array.from( files ).filter( file => imageTypesRegExp.test( file.type ) );
  46. if ( imagesToUpload.length ) {
  47. editor.execute( 'imageUpload', { file: imagesToUpload } );
  48. }
  49. } );
  50. return view;
  51. } );
  52. }
  53. }