base64uploadadapter.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module upload/base64uploadadapter
  7. */
  8. /* globals window */
  9. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  10. import FileRepository from './filerepository';
  11. /**
  12. * A plugin that converts images inserted into the editor into [Base64 strings](https://en.wikipedia.org/wiki/Base64)
  13. * in the {@glink builds/guides/integration/saving-data editor output}.
  14. *
  15. * This kind of image upload does not require server processing – images are stored with the rest of the text and
  16. * displayed by the web browser without additional requests.
  17. *
  18. * Check out the {@glink features/image-upload/image-upload comprehensive "Image upload overview"} to learn about
  19. * other ways to upload images into CKEditor 5.
  20. *
  21. * @extends module:core/plugin~Plugin
  22. */
  23. export default class Base64UploadAdapter extends Plugin {
  24. /**
  25. * @inheritDoc
  26. */
  27. static get requires() {
  28. return [ FileRepository ];
  29. }
  30. /**
  31. * @inheritDoc
  32. */
  33. static get pluginName() {
  34. return 'Base64UploadAdapter';
  35. }
  36. /**
  37. * @inheritDoc
  38. */
  39. init() {
  40. this.editor.plugins.get( FileRepository ).createUploadAdapter = loader => new Adapter( loader );
  41. }
  42. }
  43. /**
  44. * The upload adapter that converts images inserted into the editor into Base64 strings.
  45. *
  46. * @private
  47. * @implements module:upload/filerepository~UploadAdapter
  48. */
  49. class Adapter {
  50. /**
  51. * Creates a new adapter instance.
  52. *
  53. * @param {module:upload/filerepository~FileLoader} loader
  54. */
  55. constructor( loader ) {
  56. /**
  57. * `FileLoader` instance to use during the upload.
  58. *
  59. * @member {module:upload/filerepository~FileLoader} #loader
  60. */
  61. this.loader = loader;
  62. }
  63. /**
  64. * Starts the upload process.
  65. *
  66. * @see module:upload/filerepository~UploadAdapter#upload
  67. * @returns {Promise}
  68. */
  69. upload() {
  70. return new Promise( ( resolve, reject ) => {
  71. const reader = this.reader = new window.FileReader();
  72. reader.addEventListener( 'load', () => {
  73. resolve( { default: reader.result } );
  74. } );
  75. reader.addEventListener( 'error', err => {
  76. reject( err );
  77. } );
  78. reader.addEventListener( 'abort', () => {
  79. reject();
  80. } );
  81. this.loader.file.then( file => {
  82. reader.readAsDataURL( file );
  83. } );
  84. } );
  85. }
  86. /**
  87. * Aborts the upload process.
  88. *
  89. * @see module:upload/filerepository~UploadAdapter#abort
  90. * @returns {Promise}
  91. */
  92. abort() {
  93. this.reader.abort();
  94. }
  95. }