Browse Source

Docs: Improved docs of the FileDialogButtonView.

Aleksander Nowodzinski 8 years ago
parent
commit
961f12f62c
1 changed files with 29 additions and 10 deletions
  1. 29 10
      packages/ckeditor5-upload/src/ui/filedialogbuttonview.js

+ 29 - 10
packages/ckeditor5-upload/src/ui/filedialogbuttonview.js

@@ -12,10 +12,29 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
 import Template from '@ckeditor/ckeditor5-ui/src/template';
 
 /**
- * File Dialog button view.
+ * The file dialog button view.
  *
- * This component implements wrapper element with {@link module:ui/button/buttonview~ButtonView ButtonView}
- * and and hidden `input[type="file"]` inside.
+ * 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 );
+ *
+ *		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 );
+ *			}
+ *		} );
  *
  * @extends module:ui/view~View
  */
@@ -27,14 +46,14 @@ export default class FileDialogButtonView extends View {
 		super( locale );
 
 		/**
-		 * Button View.
+		 * The button view of the component.
 		 *
 		 * @member {module:ui/button/buttonview~ButtonView}
 		 */
 		this.buttonView = new ButtonView( locale );
 
 		/**
-		 * Hidden input view used to execute file dialog.
+		 * A hidden `<input>` view used to execute file dialog.
 		 *
 		 * @protected
 		 * @member {module:upload/ui/filedialogbuttonview~FileInputView}
@@ -63,11 +82,11 @@ export default class FileDialogButtonView extends View {
 		/**
 		 * Fired when file dialog is closed with file selected.
 		 *
-		 *	fileDialogButtonView.on( 'done', ( evt, files ) => {
-		 *		for ( const file of files ) {
-		 *			processFile( file );
+		 *		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.
@@ -92,7 +111,7 @@ export default class FileDialogButtonView extends View {
 }
 
 /**
- * Hidden file input view class.
+ * The hidden file input view class.
  *
  * @private
  * @extends {module:ui/view~View}