@ckeditor/ckeditor5-upload 36.0.0 → 37.0.0-alpha.0

package/src/ui/filedialogbuttonview.d.ts

@@ -0,0 +1,86 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module upload/ui/filedialogbuttonview
+ */
+import { ButtonView, View } from '@ckeditor/ckeditor5-ui';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+/**
+ * The file dialog button view.
+ *
+ * This component provides a button that opens the native file selection dialog.
+ * It can be used to implement the UI of a file upload feature.
+ *
+ * ```ts
+ * const view = new FileDialogButtonView( locale );
+ *
+ * view.set( {
+ * 	acceptedType: 'image/*',
+ * 	allowMultipleFiles: 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 );
+ * 	}
+ * } );
+ * ```
+ */
+export default class FileDialogButtonView extends View {
+    /**
+     * The button view of the component.
+     */
+    buttonView: ButtonView;
+    /**
+     * A hidden `<input>` view used to execute file dialog.
+     */
+    private _fileInputView;
+    /**
+     * Accepted file types. Can be provided in form of file extensions, media type or one of:
+     * * `audio/*`,
+     * * `video/*`,
+     * * `image/*`.
+     *
+     * @observable
+     */
+    acceptedType: string;
+    /**
+     * Indicates if multiple files can be selected. Defaults to `true`.
+     *
+     * @observable
+     */
+    allowMultipleFiles: boolean;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale?: Locale);
+    /**
+     * Focuses the {@link #buttonView}.
+     */
+    focus(): void;
+}
+/**
+ * Fired when file dialog is closed with file selected.
+ *
+ * ```ts
+ * view.on( 'done', ( evt, files ) => {
+ * 	for ( const file of files ) {
+ * 		console.log( 'Selected file', file );
+ * 	}
+ * }
+ * ```
+ *
+ * @eventName done
+ */
+export type FileInputViewDoneEvent = {
+    name: 'done';
+    args: [files: FileList];
+};

package/src/ui/filedialogbuttonview.js

@@ -12,26 +12,26 @@ import { ButtonView, View } from '@ckeditor/ckeditor5-ui';
  * This component provides a button that opens the native file selection dialog.
  * It can be used to implement the UI of a file upload feature.
  *
- *		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 );
+ * 	}
+ * } );
+ * ```
  */
 export default class FileDialogButtonView extends View {
     /**
@@ -39,48 +39,10 @@ export default class FileDialogButtonView extends View {
      */
     constructor(locale) {
         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);
         this.setTemplate({
             tag: 'span',
@@ -105,9 +67,6 @@ export default class FileDialogButtonView extends View {
 }
 /**
  * The hidden file input view class.
- *
- * @private
- * @extends module:ui/view~View
  */
 class FileInputView extends View {
     /**
@@ -115,22 +74,7 @@ class FileInputView extends View {
      */
     constructor(locale) {
         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);
         const bind = this.bindTemplate;
         this.setTemplate({

package/src/uploadconfig.d.ts

@@ -0,0 +1,100 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module upload/uploadconfig
+ */
+/**
+ * The configuration of the {@link module:upload/adapters/simpleuploadadapter~SimpleUploadAdapter simple upload adapter}.
+ *
+ * ```ts
+ * ClassicEditor
+ * 	.create( editorElement, {
+ * 		simpleUpload: {
+ * 			// The URL the images are uploaded to.
+ * 			uploadUrl: 'http://example.com',
+ *
+ * 			// Headers sent along with the XMLHttpRequest to the upload server.
+ * 			headers: {
+ * 				...
+ * 			}
+ * 		}
+ * 	} );
+ * 	.then( ... )
+ * 	.catch( ... );
+ * ```
+ *
+ * See the {@glink features/images/image-upload/simple-upload-adapter "Simple upload adapter"} guide to learn more.
+ *
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor configuration options}.
+ */
+export interface SimpleUploadConfig {
+    /**
+     * The path (URL) to the server (application) which handles the file upload. When specified, enables the automatic
+     * upload of resources (images) inserted into the editor content.
+     *
+     * Learn more about the server application requirements in the
+     * {@glink features/images/image-upload/simple-upload-adapter#server-side-configuration "Server-side configuration"} section
+     * of the feature guide.
+     */
+    uploadUrl: string;
+    /**
+     * An object that defines additional [headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers) sent with
+     * the request to the server during the upload. This is the right place to implement security mechanisms like
+     * authentication and [CSRF](https://developer.mozilla.org/en-US/docs/Glossary/CSRF) protection.
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( editorElement, {
+     * 		simpleUpload: {
+     * 			headers: {
+     * 				'X-CSRF-TOKEN': 'CSRF-Token',
+     * 				Authorization: 'Bearer <JSON Web Token>'
+     * 			}
+     * 		}
+     * 	} );
+     * 	.then( ... )
+     * 	.catch( ... );
+     * ```
+     *
+     * Learn more about the server application requirements in the
+     * {@glink features/images/image-upload/simple-upload-adapter#server-side-configuration "Server-side configuration"} section
+     * of the feature guide.
+     */
+    headers?: Record<string, string>;
+    /**
+     * This flag enables the
+     * [`withCredentials`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials)
+     * property of the request sent to the server during the upload. It affects cross-site requests only and, for instance,
+     * allows credentials such as cookies to be sent along with the request.
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( editorElement, {
+     * 		simpleUpload: {
+     * 			withCredentials: true
+     * 		}
+     * 	} );
+     * 	.then( ... )
+     * 	.catch( ... );
+     * ```
+     *
+     * Learn more about the server application requirements in the
+     * {@glink features/images/image-upload/simple-upload-adapter#server-side-configuration "Server-side configuration"} section
+     * of the feature guide.
+     *
+     * @default false
+     */
+    withCredentials?: boolean;
+}
+declare module '@ckeditor/ckeditor5-core' {
+    interface EditorConfig {
+        /**
+         * The configuration of the {@link module:upload/adapters/simpleuploadadapter~SimpleUploadAdapter simple upload adapter}.
+         *
+         * Read more in {@link module:upload/uploadconfig~SimpleUploadConfig}.
+         */
+        simpleUpload?: SimpleUploadConfig;
+    }
+}

package/src/uploadconfig.js

@@ -0,0 +1,5 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+export {};