@ckeditor/ckeditor5-upload 36.0.1 → 37.0.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +7 -6
- package/src/adapters/base64uploadadapter.d.ts +32 -0
- package/src/adapters/base64uploadadapter.js +0 -14
- package/src/adapters/simpleuploadadapter.d.ts +47 -0
- package/src/adapters/simpleuploadadapter.js +20 -42
- package/src/augmentation.d.ts +20 -0
- package/src/augmentation.js +5 -0
- package/src/filereader.d.ts +56 -0
- package/src/filereader.js +2 -19
- package/src/filerepository.d.ts +342 -0
- package/src/filerepository.js +48 -175
- package/src/index.d.ts +13 -0
- package/src/index.js +1 -0
- package/src/ui/filedialogbuttonview.d.ts +84 -0
- package/src/ui/filedialogbuttonview.js +17 -73
- package/src/uploadconfig.d.ts +90 -0
- package/src/uploadconfig.js +5 -0
package/src/index.js
CHANGED
@@ -9,3 +9,4 @@ export { default as FileRepository } from './filerepository';
|
|
9
9
|
export { default as FileDialogButtonView } from './ui/filedialogbuttonview';
|
10
10
|
export { default as Base64UploadAdapter } from './adapters/base64uploadadapter';
|
11
11
|
export { default as SimpleUploadAdapter } from './adapters/simpleuploadadapter';
|
12
|
+
import './augmentation';
|
@@ -0,0 +1,84 @@
|
|
1
|
+
/**
|
2
|
+
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4
|
+
*/
|
5
|
+
/**
|
6
|
+
* @module upload/ui/filedialogbuttonview
|
7
|
+
*/
|
8
|
+
import { ButtonView, View } from '@ckeditor/ckeditor5-ui';
|
9
|
+
import type { Locale } from '@ckeditor/ckeditor5-utils';
|
10
|
+
/**
|
11
|
+
* The file dialog button view.
|
12
|
+
*
|
13
|
+
* This component provides a button that opens the native file selection dialog.
|
14
|
+
* It can be used to implement the UI of a file upload feature.
|
15
|
+
*
|
16
|
+
* ```ts
|
17
|
+
* const view = new FileDialogButtonView( locale );
|
18
|
+
*
|
19
|
+
* view.set( {
|
20
|
+
* acceptedType: 'image/*',
|
21
|
+
* allowMultipleFiles: true
|
22
|
+
* } );
|
23
|
+
*
|
24
|
+
* view.buttonView.set( {
|
25
|
+
* label: t( 'Insert image' ),
|
26
|
+
* icon: imageIcon,
|
27
|
+
* tooltip: true
|
28
|
+
* } );
|
29
|
+
*
|
30
|
+
* view.on( 'done', ( evt, files ) => {
|
31
|
+
* for ( const file of Array.from( files ) ) {
|
32
|
+
* console.log( 'Selected file', file );
|
33
|
+
* }
|
34
|
+
* } );
|
35
|
+
* ```
|
36
|
+
*/
|
37
|
+
export default class FileDialogButtonView extends View {
|
38
|
+
/**
|
39
|
+
* The button view of the component.
|
40
|
+
*/
|
41
|
+
buttonView: ButtonView;
|
42
|
+
/**
|
43
|
+
* A hidden `<input>` view used to execute file dialog.
|
44
|
+
*/
|
45
|
+
private _fileInputView;
|
46
|
+
/**
|
47
|
+
* Accepted file types. Can be provided in form of file extensions, media type or one of:
|
48
|
+
* * `audio/*`,
|
49
|
+
* * `video/*`,
|
50
|
+
* * `image/*`.
|
51
|
+
*
|
52
|
+
* @observable
|
53
|
+
*/
|
54
|
+
acceptedType: string;
|
55
|
+
/**
|
56
|
+
* Indicates if multiple files can be selected. Defaults to `true`.
|
57
|
+
*
|
58
|
+
* @observable
|
59
|
+
*/
|
60
|
+
allowMultipleFiles: boolean;
|
61
|
+
/**
|
62
|
+
* @inheritDoc
|
63
|
+
*/
|
64
|
+
constructor(locale?: Locale);
|
65
|
+
/**
|
66
|
+
* Focuses the {@link #buttonView}.
|
67
|
+
*/
|
68
|
+
focus(): void;
|
69
|
+
}
|
70
|
+
/**
|
71
|
+
* Fired when file dialog is closed with file selected.
|
72
|
+
*
|
73
|
+
* ```ts
|
74
|
+
* view.on( 'done', ( evt, files ) => {
|
75
|
+
* for ( const file of files ) {
|
76
|
+
* console.log( 'Selected file', file );
|
77
|
+
* }
|
78
|
+
* }
|
79
|
+
* ```
|
80
|
+
*/
|
81
|
+
export type FileInputViewDoneEvent = {
|
82
|
+
name: 'done';
|
83
|
+
args: [files: FileList];
|
84
|
+
};
|
@@ -12,26 +12,26 @@ import { ButtonView, View } from '@ckeditor/ckeditor5-ui';
|
|
12
12
|
* This component provides a button that opens the native file selection dialog.
|
13
13
|
* It can be used to implement the UI of a file upload feature.
|
14
14
|
*
|
15
|
-
*
|
15
|
+
* ```ts
|
16
|
+
* const view = new FileDialogButtonView( locale );
|
16
17
|
*
|
17
|
-
*
|
18
|
-
*
|
19
|
-
*
|
20
|
-
*
|
18
|
+
* view.set( {
|
19
|
+
* acceptedType: 'image/*',
|
20
|
+
* allowMultipleFiles: true
|
21
|
+
* } );
|
21
22
|
*
|
22
|
-
*
|
23
|
-
*
|
24
|
-
*
|
25
|
-
*
|
26
|
-
*
|
23
|
+
* view.buttonView.set( {
|
24
|
+
* label: t( 'Insert image' ),
|
25
|
+
* icon: imageIcon,
|
26
|
+
* tooltip: true
|
27
|
+
* } );
|
27
28
|
*
|
28
|
-
*
|
29
|
-
*
|
30
|
-
*
|
31
|
-
*
|
32
|
-
*
|
33
|
-
*
|
34
|
-
* @extends module:ui/view~View
|
29
|
+
* view.on( 'done', ( evt, files ) => {
|
30
|
+
* for ( const file of Array.from( files ) ) {
|
31
|
+
* console.log( 'Selected file', file );
|
32
|
+
* }
|
33
|
+
* } );
|
34
|
+
* ```
|
35
35
|
*/
|
36
36
|
export default class FileDialogButtonView extends View {
|
37
37
|
/**
|
@@ -39,48 +39,10 @@ export default class FileDialogButtonView extends View {
|
|
39
39
|
*/
|
40
40
|
constructor(locale) {
|
41
41
|
super(locale);
|
42
|
-
/**
|
43
|
-
* The button view of the component.
|
44
|
-
*
|
45
|
-
* @member {module:ui/button/buttonview~ButtonView}
|
46
|
-
*/
|
47
42
|
this.buttonView = new ButtonView(locale);
|
48
|
-
/**
|
49
|
-
* A hidden `<input>` view used to execute file dialog.
|
50
|
-
*
|
51
|
-
* @protected
|
52
|
-
* @member {module:upload/ui/filedialogbuttonview~FileInputView}
|
53
|
-
*/
|
54
43
|
this._fileInputView = new FileInputView(locale);
|
55
|
-
/**
|
56
|
-
* Accepted file types. Can be provided in form of file extensions, media type or one of:
|
57
|
-
* * `audio/*`,
|
58
|
-
* * `video/*`,
|
59
|
-
* * `image/*`.
|
60
|
-
*
|
61
|
-
* @observable
|
62
|
-
* @member {String} #acceptedType
|
63
|
-
*/
|
64
44
|
this._fileInputView.bind('acceptedType').to(this);
|
65
|
-
/**
|
66
|
-
* Indicates if multiple files can be selected. Defaults to `true`.
|
67
|
-
*
|
68
|
-
* @observable
|
69
|
-
* @member {Boolean} #allowMultipleFiles
|
70
|
-
*/
|
71
45
|
this._fileInputView.bind('allowMultipleFiles').to(this);
|
72
|
-
/**
|
73
|
-
* Fired when file dialog is closed with file selected.
|
74
|
-
*
|
75
|
-
* view.on( 'done', ( evt, files ) => {
|
76
|
-
* for ( const file of files ) {
|
77
|
-
* console.log( 'Selected file', file );
|
78
|
-
* }
|
79
|
-
* }
|
80
|
-
*
|
81
|
-
* @event done
|
82
|
-
* @param {Array.<File>} files Array of selected files.
|
83
|
-
*/
|
84
46
|
this._fileInputView.delegate('done').to(this);
|
85
47
|
this.setTemplate({
|
86
48
|
tag: 'span',
|
@@ -105,9 +67,6 @@ export default class FileDialogButtonView extends View {
|
|
105
67
|
}
|
106
68
|
/**
|
107
69
|
* The hidden file input view class.
|
108
|
-
*
|
109
|
-
* @private
|
110
|
-
* @extends module:ui/view~View
|
111
70
|
*/
|
112
71
|
class FileInputView extends View {
|
113
72
|
/**
|
@@ -115,22 +74,7 @@ class FileInputView extends View {
|
|
115
74
|
*/
|
116
75
|
constructor(locale) {
|
117
76
|
super(locale);
|
118
|
-
/**
|
119
|
-
* Accepted file types. Can be provided in form of file extensions, media type or one of:
|
120
|
-
* * `audio/*`,
|
121
|
-
* * `video/*`,
|
122
|
-
* * `image/*`.
|
123
|
-
*
|
124
|
-
* @observable
|
125
|
-
* @member {String} #acceptedType
|
126
|
-
*/
|
127
77
|
this.set('acceptedType', undefined);
|
128
|
-
/**
|
129
|
-
* Indicates if multiple files can be selected. Defaults to `false`.
|
130
|
-
*
|
131
|
-
* @observable
|
132
|
-
* @member {Boolean} #allowMultipleFiles
|
133
|
-
*/
|
134
78
|
this.set('allowMultipleFiles', false);
|
135
79
|
const bind = this.bindTemplate;
|
136
80
|
this.setTemplate({
|
@@ -0,0 +1,90 @@
|
|
1
|
+
/**
|
2
|
+
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4
|
+
*/
|
5
|
+
/**
|
6
|
+
* @module upload/uploadconfig
|
7
|
+
*/
|
8
|
+
/**
|
9
|
+
* The configuration of the {@link module:upload/adapters/simpleuploadadapter~SimpleUploadAdapter simple upload adapter}.
|
10
|
+
*
|
11
|
+
* ```ts
|
12
|
+
* ClassicEditor
|
13
|
+
* .create( editorElement, {
|
14
|
+
* simpleUpload: {
|
15
|
+
* // The URL the images are uploaded to.
|
16
|
+
* uploadUrl: 'http://example.com',
|
17
|
+
*
|
18
|
+
* // Headers sent along with the XMLHttpRequest to the upload server.
|
19
|
+
* headers: {
|
20
|
+
* ...
|
21
|
+
* }
|
22
|
+
* }
|
23
|
+
* } );
|
24
|
+
* .then( ... )
|
25
|
+
* .catch( ... );
|
26
|
+
* ```
|
27
|
+
*
|
28
|
+
* See the {@glink features/images/image-upload/simple-upload-adapter "Simple upload adapter"} guide to learn more.
|
29
|
+
*
|
30
|
+
* See {@link module:core/editor/editorconfig~EditorConfig all editor configuration options}.
|
31
|
+
*/
|
32
|
+
export interface SimpleUploadConfig {
|
33
|
+
/**
|
34
|
+
* The path (URL) to the server (application) which handles the file upload. When specified, enables the automatic
|
35
|
+
* upload of resources (images) inserted into the editor content.
|
36
|
+
*
|
37
|
+
* Learn more about the server application requirements in the
|
38
|
+
* {@glink features/images/image-upload/simple-upload-adapter#server-side-configuration "Server-side configuration"} section
|
39
|
+
* of the feature guide.
|
40
|
+
*/
|
41
|
+
uploadUrl: string;
|
42
|
+
/**
|
43
|
+
* An object that defines additional [headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers) sent with
|
44
|
+
* the request to the server during the upload. This is the right place to implement security mechanisms like
|
45
|
+
* authentication and [CSRF](https://developer.mozilla.org/en-US/docs/Glossary/CSRF) protection.
|
46
|
+
*
|
47
|
+
* ```ts
|
48
|
+
* ClassicEditor
|
49
|
+
* .create( editorElement, {
|
50
|
+
* simpleUpload: {
|
51
|
+
* headers: {
|
52
|
+
* 'X-CSRF-TOKEN': 'CSRF-Token',
|
53
|
+
* Authorization: 'Bearer <JSON Web Token>'
|
54
|
+
* }
|
55
|
+
* }
|
56
|
+
* } );
|
57
|
+
* .then( ... )
|
58
|
+
* .catch( ... );
|
59
|
+
* ```
|
60
|
+
*
|
61
|
+
* Learn more about the server application requirements in the
|
62
|
+
* {@glink features/images/image-upload/simple-upload-adapter#server-side-configuration "Server-side configuration"} section
|
63
|
+
* of the feature guide.
|
64
|
+
*/
|
65
|
+
headers?: Record<string, string>;
|
66
|
+
/**
|
67
|
+
* This flag enables the
|
68
|
+
* [`withCredentials`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials)
|
69
|
+
* property of the request sent to the server during the upload. It affects cross-site requests only and, for instance,
|
70
|
+
* allows credentials such as cookies to be sent along with the request.
|
71
|
+
*
|
72
|
+
* ```ts
|
73
|
+
* ClassicEditor
|
74
|
+
* .create( editorElement, {
|
75
|
+
* simpleUpload: {
|
76
|
+
* withCredentials: true
|
77
|
+
* }
|
78
|
+
* } );
|
79
|
+
* .then( ... )
|
80
|
+
* .catch( ... );
|
81
|
+
* ```
|
82
|
+
*
|
83
|
+
* Learn more about the server application requirements in the
|
84
|
+
* {@glink features/images/image-upload/simple-upload-adapter#server-side-configuration "Server-side configuration"} section
|
85
|
+
* of the feature guide.
|
86
|
+
*
|
87
|
+
* @default false
|
88
|
+
*/
|
89
|
+
withCredentials?: boolean;
|
90
|
+
}
|