Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@ckeditor/ckeditor5-upload

Package Overview
Dependencies
Maintainers
1
Versions
705
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ckeditor/ckeditor5-upload - npm Package Compare versions

Comparing version 36.0.1 to 37.0.0-alpha.0

src/adapters/base64uploadadapter.d.ts

11

package.json
{
"name": "@ckeditor/ckeditor5-upload",
"version": "36.0.1",
"version": "37.0.0-alpha.0",
"description": "Upload feature for CKEditor 5.",

@@ -14,5 +14,5 @@ "keywords": [

"dependencies": {
"@ckeditor/ckeditor5-core": "^36.0.1",
"@ckeditor/ckeditor5-utils": "^36.0.1",
"@ckeditor/ckeditor5-ui": "^36.0.1"
"@ckeditor/ckeditor5-core": "^37.0.0-alpha.0",
"@ckeditor/ckeditor5-utils": "^37.0.0-alpha.0",
"@ckeditor/ckeditor5-ui": "^37.0.0-alpha.0"
},

@@ -48,3 +48,4 @@ "devDependencies": {

"postversion": "npm run build"
}
},
"types": "src/index.d.ts"
}

@@ -20,4 +20,2 @@ /**

* other ways to upload images into CKEditor 5.
*
* @extends module:core/plugin~Plugin
*/

@@ -46,5 +44,2 @@ export default class Base64UploadAdapter extends Plugin {

* The upload adapter that converts images inserted into the editor into Base64 strings.
*
* @private
* @implements module:upload/filerepository~UploadAdapter
*/

@@ -54,11 +49,4 @@ class Adapter {

* Creates a new adapter instance.
*
* @param {module:upload/filerepository~FileLoader} loader
*/
constructor(loader) {
/**
* `FileLoader` instance to use during the upload.
*
* @member {module:upload/filerepository~FileLoader} #loader
*/
this.loader = loader;

@@ -70,3 +58,2 @@ }

* @see module:upload/filerepository~UploadAdapter#upload
* @returns {Promise}
*/

@@ -94,3 +81,2 @@ upload() {

* @see module:upload/filerepository~UploadAdapter#abort
* @returns {Promise}
*/

@@ -97,0 +83,0 @@ abort() {

@@ -15,15 +15,17 @@ /**

* the [`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) API with a
* minimal {@link module:upload/adapters/simpleuploadadapter~SimpleUploadConfig editor configuration}.
* minimal {@link module:upload/uploadconfig~SimpleUploadConfig editor configuration}.
*
* ClassicEditor
* .create( document.querySelector( '#editor' ), {
* simpleUpload: {
* uploadUrl: 'http://example.com',
* headers: {
* ...
* }
* }
* } )
* .then( ... )
* .catch( ... );
* ```ts
* ClassicEditor
* .create( document.querySelector( '#editor' ), {
* simpleUpload: {
* uploadUrl: 'http://example.com',
* headers: {
* ...
* }
* }
* } )
* .then( ... )
* .catch( ... );
* ```
*

@@ -35,4 +37,2 @@ * See the {@glink features/images/image-upload/simple-upload-adapter "Simple upload adapter"} guide to learn how to

* other ways to upload images into CKEditor 5.
*
* @extends module:core/plugin~Plugin
*/

@@ -62,3 +62,3 @@ export default class SimpleUploadAdapter extends Plugin {

/**
* The {@link module:upload/adapters/simpleuploadadapter~SimpleUploadConfig#uploadUrl `config.simpleUpload.uploadUrl`}
* The {@link module:upload/uploadconfig~SimpleUploadConfig#uploadUrl `config.simpleUpload.uploadUrl`}
* configuration required by the {@link module:upload/adapters/simpleuploadadapter~SimpleUploadAdapter `SimpleUploadAdapter`}

@@ -79,5 +79,2 @@ * is missing. Make sure the correct URL is specified for the image upload to work properly.

* Upload adapter.
*
* @private
* @implements module:upload/filerepository~UploadAdapter
*/

@@ -87,18 +84,5 @@ class Adapter {

* Creates a new adapter instance.
*
* @param {module:upload/filerepository~FileLoader} loader
* @param {module:upload/adapters/simpleuploadadapter~SimpleUploadConfig} options
*/
constructor(loader, options) {
/**
* FileLoader instance to use during the upload.
*
* @member {module:upload/filerepository~FileLoader} #loader
*/
this.loader = loader;
/**
* The configuration of the adapter.
*
* @member {module:upload/adapters/simpleuploadadapter~SimpleUploadConfig} #options
*/
this.options = options;

@@ -110,3 +94,2 @@ }

* @see module:upload/filerepository~UploadAdapter#upload
* @returns {Promise}
*/

@@ -125,3 +108,2 @@ upload() {

* @see module:upload/filerepository~UploadAdapter#abort
* @returns {Promise}
*/

@@ -135,6 +117,4 @@ abort() {

* Initializes the `XMLHttpRequest` object using the URL specified as
* {@link module:upload/adapters/simpleuploadadapter~SimpleUploadConfig#uploadUrl `simpleUpload.uploadUrl`} in the editor's
* {@link module:upload/uploadconfig~SimpleUploadConfig#uploadUrl `simpleUpload.uploadUrl`} in the editor's
* configuration.
*
* @private
*/

@@ -149,6 +129,5 @@ _initRequest() {

*
* @private
* @param {Function} resolve Callback function to be called when the request is successful.
* @param {Function} reject Callback function to be called when the request cannot be completed.
* @param {File} file Native File object.
* @param resolve Callback function to be called when the request is successful.
* @param reject Callback function to be called when the request cannot be completed.
* @param file Native File object.
*/

@@ -188,4 +167,3 @@ _initListeners(resolve, reject, file) {

*
* @private
* @param {File} file File instance to be uploaded.
* @param file File instance to be uploaded.
*/

@@ -192,0 +170,0 @@ _sendRequest(file) {

@@ -20,17 +20,4 @@ /**

const reader = new window.FileReader();
/**
* Instance of native FileReader.
*
* @private
* @member {FileReader} #_reader
*/
this._reader = reader;
this._data = undefined;
/**
* Number of bytes loaded.
*
* @readonly
* @observable
* @member {Number} #loaded
*/
this.set('loaded', 0);

@@ -43,4 +30,2 @@ reader.onprogress = evt => {

* Returns error that occurred during file reading.
*
* @returns {Error}
*/

@@ -53,4 +38,2 @@ get error() {

* by using {@link module:upload/filereader~FileReader#read `read()`}.
*
* @type {File|undefined}
*/

@@ -63,4 +46,4 @@ get data() {

*
* @param {File} file Native File object.
* @returns {Promise.<String>} Returns a promise that will be resolved with file's content.
* @param file Native File object.
* @returns Returns a promise that will be resolved with file's content.
* The promise will be rejected in case of an error or when the reading process is aborted.

@@ -67,0 +50,0 @@ */

@@ -18,10 +18,24 @@ /**

* {@link module:adapter-ckfinder/uploadadapter~CKFinderUploadAdapter}) or write your own one – see
* the {@glink framework/guides/deep-dive/upload-adapter Custom image upload adapter deep-dive guide}.
* the {@glink framework/deep-dive/upload-adapter Custom image upload adapter deep-dive} guide.
*
* Then, you can use {@link module:upload/filerepository~FileRepository#createLoader `createLoader()`} and the returned
* {@link module:upload/filerepository~FileLoader} instance to load and upload files.
*
* @extends module:core/plugin~Plugin
*/
export default class FileRepository extends Plugin {
constructor() {
super(...arguments);
/**
* Collection of loaders associated with this repository.
*/
this.loaders = new Collection();
/**
* Loaders mappings used to retrieve loaders references.
*/
this._loadersMap = new Map();
/**
* Reference to a pending action registered in a {@link module:core/pendingactions~PendingActions} plugin
* while upload is in progress. When there is no upload then value is `null`.
*/
this._pendingAction = null;
}
/**

@@ -43,63 +57,6 @@ * @inheritDoc

init() {
/**
* Collection of loaders associated with this repository.
*
* @member {module:utils/collection~Collection} #loaders
*/
this.loaders = new Collection();
// Keeps upload in a sync with pending actions.
this.loaders.on('change', () => this._updatePendingAction());
/**
* Loaders mappings used to retrieve loaders references.
*
* @private
* @member {Map<File|Promise, FileLoader>} #_loadersMap
*/
this._loadersMap = new Map();
/**
* Reference to a pending action registered in a {@link module:core/pendingactions~PendingActions} plugin
* while upload is in progress. When there is no upload then value is `null`.
*
* @private
* @member {Object} #_pendingAction
*/
this._pendingAction = null;
/**
* A factory function which should be defined before using `FileRepository`.
*
* It should return a new instance of {@link module:upload/filerepository~UploadAdapter} that will be used to upload files.
* {@link module:upload/filerepository~FileLoader} instance associated with the adapter
* will be passed to that function.
*
* For more information and example see {@link module:upload/filerepository~UploadAdapter}.
*
* @member {Function} #createUploadAdapter
*/
/**
* Number of bytes uploaded.
*
* @readonly
* @observable
* @member {Number} #uploaded
*/
this.set('uploaded', 0);
/**
* Number of total bytes to upload.
*
* It might be different than the file size because of headers and additional data.
* It contains `null` if value is not available yet, so it's better to use {@link #uploadedPercent} to monitor
* the progress.
*
* @readonly
* @observable
* @member {Number|null} #uploadTotal
*/
this.set('uploadTotal', null);
/**
* Upload progress in percents.
*
* @readonly
* @observable
* @member {Number} #uploadedPercent
*/
this.bind('uploadedPercent').to(this, 'uploaded', this, 'uploadTotal', (uploaded, total) => {

@@ -114,4 +71,3 @@ return total ? (uploaded / total * 100) : 0;

*
* @param {File|Promise.<File>} fileOrPromise Native file or promise handle.
* @returns {module:upload/filerepository~FileLoader|null}
* @param fileOrPromise Native file or promise handle.
*/

@@ -126,4 +82,3 @@ getLoader(fileOrPromise) {

*
* @param {File|Promise.<File>} fileOrPromise Native File object or native Promise object which resolves to a File.
* @returns {module:upload/filerepository~FileLoader|null}
* @param fileOrPromise Native File object or native Promise object which resolves to a File.
*/

@@ -151,3 +106,3 @@ createLoader(fileOrPromise) {

*
* You can also implement your {@glink framework/guides/deep-dive/upload-adapter own image upload adapter}.
* You can also implement your {@glink framework/deep-dive/upload-adapter own image upload adapter}.
*

@@ -194,4 +149,3 @@ * @error filerepository-no-upload-adapter

*
* @param {File|Promise|module:upload/filerepository~FileLoader} fileOrPromiseOrLoader File or Promise associated
* with that loader or loader itself.
* @param fileOrPromiseOrLoader File or Promise associated with that loader or loader itself.
*/

@@ -210,4 +164,2 @@ destroyLoader(fileOrPromiseOrLoader) {

* Registers or deregisters pending action bound with upload progress.
*
* @private
*/

@@ -239,94 +191,17 @@ _updatePendingAction() {

*
* @param {Promise.<File>} filePromise A promise which resolves to a file instance.
* @param {Function} uploadAdapterCreator The function which returns {@link module:upload/filerepository~UploadAdapter} instance.
* @param filePromise A promise which resolves to a file instance.
* @param uploadAdapterCreator The function which returns {@link module:upload/filerepository~UploadAdapter} instance.
*/
constructor(filePromise, uploadAdapterCreator) {
super();
/**
* Unique id of FileLoader instance.
*
* @readonly
* @member {Number}
*/
this.id = uid();
/**
* Additional wrapper over the initial file promise passed to this loader.
*
* @protected
* @member {module:upload/filerepository~FilePromiseWrapper}
*/
this._filePromiseWrapper = this._createFilePromiseWrapper(filePromise);
/**
* Adapter instance associated with this file loader.
*
* @private
* @member {module:upload/filerepository~UploadAdapter}
*/
this._adapter = uploadAdapterCreator(this);
/**
* FileReader used by FileLoader.
*
* @protected
* @member {module:upload/filereader~FileReader}
*/
this._reader = new FileReader();
/**
* Current status of FileLoader. It can be one of the following:
*
* * 'idle',
* * 'reading',
* * 'uploading',
* * 'aborted',
* * 'error'.
*
* When reading status can change in a following way:
*
* `idle` -> `reading` -> `idle`
* `idle` -> `reading -> `aborted`
* `idle` -> `reading -> `error`
*
* When uploading status can change in a following way:
*
* `idle` -> `uploading` -> `idle`
* `idle` -> `uploading` -> `aborted`
* `idle` -> `uploading` -> `error`
*
* @readonly
* @observable
* @member {String} #status
*/
this.set('status', 'idle');
/**
* Number of bytes uploaded.
*
* @readonly
* @observable
* @member {Number} #uploaded
*/
this.set('uploaded', 0);
/**
* Number of total bytes to upload.
*
* @readonly
* @observable
* @member {Number|null} #uploadTotal
*/
this.set('uploadTotal', null);
/**
* Upload progress in percents.
*
* @readonly
* @observable
* @member {Number} #uploadedPercent
*/
this.bind('uploadedPercent').to(this, 'uploaded', this, 'uploadTotal', (uploaded, total) => {
return total ? (uploaded / total * 100) : 0;
});
/**
* Response of the upload.
*
* @readonly
* @observable
* @member {Object|null} #uploadResponse
*/
this.set('uploadResponse', null);

@@ -336,4 +211,2 @@ }

* A `Promise` which resolves to a `File` instance associated with this file loader.
*
* @type {Promise.<File|null>}
*/

@@ -360,4 +233,2 @@ get file() {

* by using the {@link module:upload/filerepository~FileLoader#read `read()`} method.
*
* @type {File|undefined}
*/

@@ -375,13 +246,15 @@ get data() {

*
* fileLoader.read()
* .then( data => { ... } )
* .catch( err => {
* if ( err === 'aborted' ) {
* console.log( 'Reading aborted.' );
* } else {
* console.log( 'Reading error.', err );
* }
* } );
* ```ts
* fileLoader.read()
* .then( data => { ... } )
* .catch( err => {
* if ( err === 'aborted' ) {
* console.log( 'Reading aborted.' );
* } else {
* console.log( 'Reading error.', err );
* }
* } );
* ```
*
* @returns {Promise.<String>} Returns promise that will be resolved with read data. Promise will be rejected if error
* @returns Returns promise that will be resolved with read data. Promise will be rejected if error
* occurs or if read process is aborted.

@@ -426,13 +299,15 @@ */

*
* fileLoader.upload()
* .then( data => { ... } )
* .catch( e => {
* if ( e === 'aborted' ) {
* console.log( 'Uploading aborted.' );
* } else {
* console.log( 'Uploading error.', e );
* }
* } );
* ```ts
* fileLoader.upload()
* .then( data => { ... } )
* .catch( e => {
* if ( e === 'aborted' ) {
* console.log( 'Uploading aborted.' );
* } else {
* console.log( 'Uploading error.', e );
* }
* } );
* ```
*
* @returns {Promise.<Object>} Returns promise that will be resolved with response data. Promise will be rejected if error
* @returns Returns promise that will be resolved with response data. Promise will be rejected if error
* occurs or if read process is aborted.

@@ -501,5 +376,3 @@ */

*
* @private
* @param filePromise The initial file promise to be wrapped.
* @returns {module:upload/filerepository~FilePromiseWrapper}
*/

@@ -506,0 +379,0 @@ _createFilePromiseWrapper(filePromise) {

@@ -15,22 +15,22 @@ /**

*
* const view = new FileDialogButtonView( locale );
* ```ts
* const view = new FileDialogButtonView( locale );
*
* view.set( {
* acceptedType: 'image/*',
* allowMultipleFiles: true
* } );
* view.set( {
* acceptedType: 'image/*',
* allowMultipleFiles: true
* } );
*
* view.buttonView.set( {
* label: t( 'Insert image' ),
* icon: imageIcon,
* tooltip: true
* } );
* view.buttonView.set( {
* label: t( 'Insert image' ),
* icon: imageIcon,
* tooltip: true
* } );
*
* view.on( 'done', ( evt, files ) => {
* for ( const file of Array.from( files ) ) {
* console.log( 'Selected file', file );
* }
* } );
*
* @extends module:ui/view~View
* view.on( 'done', ( evt, files ) => {
* for ( const file of Array.from( files ) ) {
* console.log( 'Selected file', file );
* }
* } );
* ```
*/

@@ -43,44 +43,6 @@ export default class FileDialogButtonView extends View {

super(locale);
/**
* The button view of the component.
*
* @member {module:ui/button/buttonview~ButtonView}
*/
this.buttonView = new ButtonView(locale);
/**
* A hidden `<input>` view used to execute file dialog.
*
* @protected
* @member {module:upload/ui/filedialogbuttonview~FileInputView}
*/
this._fileInputView = new FileInputView(locale);
/**
* Accepted file types. Can be provided in form of file extensions, media type or one of:
* * `audio/*`,
* * `video/*`,
* * `image/*`.
*
* @observable
* @member {String} #acceptedType
*/
this._fileInputView.bind('acceptedType').to(this);
/**
* Indicates if multiple files can be selected. Defaults to `true`.
*
* @observable
* @member {Boolean} #allowMultipleFiles
*/
this._fileInputView.bind('allowMultipleFiles').to(this);
/**
* Fired when file dialog is closed with file selected.
*
* view.on( 'done', ( evt, files ) => {
* for ( const file of files ) {
* console.log( 'Selected file', file );
* }
* }
*
* @event done
* @param {Array.<File>} files Array of selected files.
*/
this._fileInputView.delegate('done').to(this);

@@ -110,5 +72,2 @@ this.setTemplate({

* The hidden file input view class.
*
* @private
* @extends module:ui/view~View
*/

@@ -121,18 +80,3 @@ class FileInputView extends View {

super(locale);
/**
* Accepted file types. Can be provided in form of file extensions, media type or one of:
* * `audio/*`,
* * `video/*`,
* * `image/*`.
*
* @observable
* @member {String} #acceptedType
*/
this.set('acceptedType', undefined);
/**
* Indicates if multiple files can be selected. Defaults to `false`.
*
* @observable
* @member {Boolean} #allowMultipleFiles
*/
this.set('allowMultipleFiles', false);

@@ -139,0 +83,0 @@ const bind = this.bindTemplate;

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc