imageuploadcommand.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  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. import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
  6. import Command from '@ckeditor/ckeditor5-core/src/command';
  7. import { insertImage, isImageAllowed } from '../image/utils';
  8. /**
  9. * @module image/imageupload/imageuploadcommand
  10. */
  11. /**
  12. * The image upload command.
  13. *
  14. * The command is registered by the {@link module:image/imageupload/imageuploadediting~ImageUploadEditing} plugin as `'imageUpload'`.
  15. *
  16. * In order to upload an image at the current selection position
  17. * (according to the {@link module:widget/utils~findOptimalInsertionPosition} algorithm),
  18. * execute the command and pass the native image file instance:
  19. *
  20. * this.listenTo( editor.editing.view.document, 'clipboardInput', ( evt, data ) => {
  21. * // Assuming that only images were pasted:
  22. * const images = Array.from( data.dataTransfer.files );
  23. *
  24. * // Upload the first image:
  25. * editor.execute( 'imageUpload', { file: images[ 0 ] } );
  26. * } );
  27. *
  28. * It is also possible to insert multiple images at once:
  29. *
  30. * editor.execute( 'imageUpload', {
  31. * file: [
  32. * file1,
  33. * file2
  34. * ]
  35. * } );
  36. *
  37. * @extends module:core/command~Command
  38. */
  39. export default class ImageUploadCommand extends Command {
  40. /**
  41. * @inheritDoc
  42. */
  43. refresh() {
  44. const imageElement = this.editor.model.document.selection.getSelectedElement();
  45. const isImage = imageElement && imageElement.name === 'image' || false;
  46. this.isEnabled = isImageAllowed( this.editor.model ) || isImage;
  47. }
  48. /**
  49. * Executes the command.
  50. *
  51. * @fires execute
  52. * @param {Object} options Options for the executed command.
  53. * @param {File|Array.<File>} options.file The image file or an array of image files to upload.
  54. */
  55. execute( options ) {
  56. const editor = this.editor;
  57. const model = editor.model;
  58. const fileRepository = editor.plugins.get( FileRepository );
  59. const filesToUpload = Array.isArray( options.file ) ? options.file : [ options.file ];
  60. for ( const file of filesToUpload ) {
  61. uploadImage( model, fileRepository, file );
  62. }
  63. }
  64. }
  65. // Handles uploading single file.
  66. //
  67. // @param {module:engine/model/model~Model} model
  68. // @param {File} file
  69. function uploadImage( model, fileRepository, file ) {
  70. const loader = fileRepository.createLoader( file );
  71. // Do not throw when upload adapter is not set. FileRepository will log an error anyway.
  72. if ( !loader ) {
  73. return;
  74. }
  75. insertImage( model, { uploadId: loader.id } );
  76. }