inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2596] Fixed inputs with incorrect names (#3166)

Browse Source 
* [ADF-2596] Updated prop script to handle names from input decorators

* [ADF-2596] Fixed inputs with accessors

* [ADF-2596] Fixed remaining inputs with wrong names

* [ADF-2596] Updated prop script to handle names from input decorators

* [ADF-2596] Fixed inputs with accessors

* [ADF-2596] Fixed remaining inputs with wrong names
This commit is contained in:
Andy Stark
2018-04-10 17:19:15 +01:00
committed by Eugenio Romano
parent a32b1b7359
commit 2a5fe7ad28
25 changed files with 386 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
docs/core/upload.directive.md
View File

@@ -1,15 +1,47 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-04-10
---
# Upload Directive
Allows your components or common HTML elements reacting on File drag and drop in order to upload content.
Uploads content in response to file drag and drop.
## Basic usage
The directive itself does not do any file management process,
but collects information on dropped files and raises corresponding events instead.
```html
<button [adf-upload]="true" [multiple]="true" [accept]="'image/*'">
Upload photos
</button>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| -- | -- | -- | -- |
| accept | `string` | | (Click mode only) MIME type filter for files to accept. |
| adf-upload-data | `any` | | Data to upload. |
| directory | `boolean` | | (Click mode only) Toggles uploading of directories. |
| adf-upload | `boolean` | true | Enables/disables uploading. |
| mode | `string[]` | ['drop'] | Upload mode. Can be "drop" (receives dropped files) or "click" (clicking opens a file dialog). Both modes can be active at once. |
| multiple | `boolean` | | Toggles multiple file uploads. |
## Details
Add the directive to a component or HTML element to enable it to upload files.
You can decorate any element including buttons:
```html
<button [adf-upload]="true" [multiple]="true" [accept]="'image/*'">
Upload photos
</button>
```
The directive itself does not do any file management, but it collects information about
dropped files and emits events in response.
```html
<div style="width:100px; height:100px"
@@ -19,7 +51,8 @@ but collects information on dropped files and raises corresponding events instea
</div>
```
It is possible controlling when upload behaviour is enabled/disabled by binding directive to a `boolean` value or expression:
You can enable or disable upload functionality by binding the directive to a boolean
value or expression:
```html
<div [adf-upload]="true">...</div>
@@ -27,37 +60,14 @@ It is possible controlling when upload behaviour is enabled/disabled by binding
<div [adf-upload]="isUploadEnabled()">...</div>
```
You can decorate any element including buttons, for example:
```html
<button [adf-upload]="true" [multiple]="true" [accept]="'image/*'">
Upload photos
</button>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| enabled | `boolean` | `true` | Enables/disables uploading. |
| data | `any` | | Data to upload. |
| mode | `string[]` | `['drop']` | Upload mode. Can be "drop" (receives dropped files) or "click" (clicking opens a file dialog). Both modes can be active at once. |
| multiple | `boolean` | | Toggles multiple file uploads. |
| accept | `string` | | (Click mode only) MIME type filter for files to accept. |
| directory | `boolean` | | (Click mode only) Toggles uploading of directories. |
## Details
Used by attaching to an element or component.
### Modes
Directive supports several modes:
The Upload directive supports two modes:
- **drop** mode, where decorated element acts like a drop zone for files (**default** mode)
- **click** mode, where decorated element invokes File Dialog to select files or folders.
- **drop** mode, where the decorated element acts like a drop zone for files (enabled by default)
- **click** mode, where the decorated element invokes a file dialog to select files or folders.
It is also possible combining modes together.
You can also use both modes together:
```html
<div [adf-upload]="true" mode="['click']">...</div>
@@ -67,7 +77,7 @@ It is also possible combining modes together.
#### Click mode
For the click mode you can provide additional attributes for the File Dialog:
In click mode you can provide extra attributes for the file dialog:
- **directory**, enables directory selection
- **multiple**, enables multiple file/folder selection
@@ -89,12 +99,14 @@ For the click mode you can provide additional attributes for the File Dialog:
#### Drop mode
For the moment upload directive supports only Files (single or multiple).
Support for Folders and `accept` filters is subject to implement.
Currently, the upload directive supports only file drops (single or multiple).
Support for folders and `accept` filters will probably be implemented in a
future version.
### Events
Once a single or multiple files are dropped on the decorated element the `upload-files` [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) is raised.
The `upload-files` [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent)
is emitted when single or multiple files are dropped on the decorated element.
The DOM event is configured to have `bubbling` enabled, so any component up the component tree can handle, process or prevent it:
```html
@@ -111,9 +123,12 @@ onUploadFiles(e: CustomEvent) {
}
```
Please note that event will be raised only if valid [Files](https://developer.mozilla.org/en-US/docs/Web/API/File) were dropped onto the decorated element.
Note that the event will be emitted only if valid
[files](https://developer.mozilla.org/en-US/docs/Web/API/File)
are dropped onto the decorated element.
The `upload-files` event is cancellable, so you can stop propagation of the drop event to upper levels in case it has been already handled by your code:
The `upload-files` event is cancellable, so you can stop propagation of the drop event upwards
when it has been handled by your code:
```ts
onUploadFiles(e: CustomEvent) {
@@ -124,10 +139,10 @@ onUploadFiles(e: CustomEvent) {
}
```
It is also possible attaching arbitrary data to each event in order to access it from within external event handlers.
A typical scenario is data tables where you may want to handle also the data row and/or underlying data to be accessible upon files drop.
You can also attach arbitrary data to each event which you can then access from external event handlers. A typical scenario is with data tables where you may want to make use of the data row
or make underlying data accessible when files are dropped.
You may be using `adf-upload-data` to bind custom values or objects for every event raised:
You can use `adf-upload-data` to bind custom values or objects for every event raised:
```html
<div [adf-upload]="true" [adf-upload-data]="dataRow"></div>
@@ -136,7 +151,8 @@ You may be using `adf-upload-data` to bind custom values or objects for every ev
<div [adf-upload]="true" [adf-upload-data]="getUploadData()"></div>
```
As part of the `details` property of the [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) you can get access to the following:
You can access the following items of the `details` property from the
[CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent):
```ts
detail: {
@@ -148,9 +164,10 @@ detail: {
### Styling
The decorated element gets `adf-upload__dragging` CSS class name in the class list every time files are dragged over it.
This allows changing look and feel of your components in case additional visual indication is required,
for example you may want drawing a dashed border around the table row on drag:
The decorated element is styled with the `adf-upload__dragging` CSS class whenever a file is dragged
over it. This lets you change the look and feel of your components when you need different visual
indication. For example, you could draw a dashed border around a table row when an item is dragged
onto it:
```html
<table>