mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
4cb3a876d9
* added a new input: file * unit test - having singleFile option and a file as input, the type of the input for uploading should be button instead of file * added a click event for the upload button and also handle if having a file as input, the type of the input should be 'button' instead of 'file' * handling allowed for upload also for 'update' permissions over a dropped file. also emitting a new event for updating file version if i'm dropping a single file over another file. * unit tests for handling dropping a file over another * added a new input (file type) * passing a file to adf-version-upload component * new input as file and toggle new version if having that as input + unit test * added new input as file for new version * added new input to allow dropping a file over another to update it's version * added a new variable for handling dropping a file over another one and also handle a new event when we update the file version * pass a new dropped file to the dialog * new message * new method to allow isDropTarget for a file instead only to folders. * new emitter for updating a file's version * allows updating a file's version by dropping another file over it. * refactor allowDropFiles * update docs for drag&drop file into another file * update for drag&drop a file over another file functionality * made the allowDropFiles checking optional for isDropTarget property, only checking if the value is passed to the share-data-row Co-authored-by: Eugenio Romano <eugenio.romano@alfresco.com>
90 lines
3.9 KiB
Markdown
90 lines
3.9 KiB
Markdown
---
|
|
Title: Upload Button Component
|
|
Added: v2.0.0
|
|
Status: Active
|
|
Last reviewed: 2019-01-16
|
|
---
|
|
|
|
# [Upload Button Component](../../../lib/content-services/src/lib/upload/components/upload-button.component.ts "Defined in upload-button.component.ts")
|
|
|
|
Activates a file upload.
|
|
|
|
## Basic usage
|
|
|
|
```html
|
|
<adf-upload-button
|
|
[rootFolderId]="-my-"
|
|
[uploadFolders]="true"
|
|
[multipleFiles]="false"
|
|
[acceptedFilesType]=".jpg,.gif,.png,.svg"
|
|
[versioning]="false"
|
|
(success)="customMethod($event)">
|
|
</adf-upload-button>
|
|
<adf-file-uploading-dialog></adf-file-uploading-dialog>
|
|
```
|
|
|
|
## Class members
|
|
|
|
### Properties
|
|
|
|
| Name | Type | Default value | Description |
|
|
| ---- | ---- | ------------- | ----------- |
|
|
| acceptedFilesType | `string` | "\*" | Filter for accepted file types. |
|
|
| comment | `string` | | When you overwrite existing content, you can use the comment field to add a version comment that appears in the version history |
|
|
| disabled | `boolean` | false | Toggles component disabled state (if there is no node permission checking). |
|
|
| file | `File` | | Custom added file. The upload button type will be 'button' instead of 'file' |
|
|
| majorVersion | `boolean` | false | majorVersion boolean field to true to indicate a major version should be created. |
|
|
| maxFilesSize | `number` | | Sets a limit on the maximum size (in bytes) of a file to be uploaded. Has no effect if undefined. |
|
|
| multipleFiles | `boolean` | false | Allows/disallows multiple files |
|
|
| nodeType | `string` | "cm:content" | Custom node type for uploaded file |
|
|
| rootFolderId | `string` | "-root-" | The ID of the root. Use the nodeId for Content Services or the taskId/processId for Process Services. |
|
|
| staticTitle | `string` | | Defines the text of the upload button. |
|
|
| tooltip | `string` | null | Custom tooltip text. |
|
|
| uploadFolders | `boolean` | false | Allows/disallows upload folders (only for Chrome). |
|
|
| versioning | `boolean` | false | Toggles versioning. |
|
|
|
|
### Events
|
|
|
|
| Name | Type | Description |
|
|
| ---- | ---- | ----------- |
|
|
| beginUpload | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`UploadFilesEvent`](../../../lib/content-services/src/lib/upload/components/upload-files.event.ts)`>` | Emitted when the upload begins. |
|
|
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<>` | Emitted when an error occurs. |
|
|
| permissionEvent | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PermissionModel`](../../../lib/content-services/src/lib/document-list/models/permissions.model.ts)`>` | Emitted when create permission is missing. |
|
|
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<>` | Emitted when the file is uploaded successfully. |
|
|
| updateFileVersion | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<CustomEvent<any>>` | Emitted when dropping a file over another file to update the version. |
|
|
|
|
## Details
|
|
|
|
### How to show a notification message for bad permission
|
|
|
|
You can show a notification error when the user doesn't have the right permission to perform
|
|
the action. The component emits a `permissionEvent` when the user does not have delete permission.
|
|
You can subscribe to this event from your component and use the
|
|
[Notification service](../../core/services/notification.service.md) to show a message.
|
|
|
|
```html
|
|
<adf-upload-button
|
|
[rootFolderId]="currentFolderId"
|
|
(permissionEvent)="onUploadPermissionFailed($event)">
|
|
</adf-upload-button>
|
|
```
|
|
|
|
```ts
|
|
export class MyComponent {
|
|
|
|
onUploadPermissionFailed(event: any) {
|
|
this.notificationService.openSnackMessage(
|
|
`you don't have the ${event.permission} permission to ${event.action} the ${event.type} `, 4000
|
|
);
|
|
}
|
|
|
|
}
|
|
```
|
|
|
|
|
|
|
|
## See also
|
|
|
|
- [Upload Version Button component](upload-version-button.component.md)
|
|
- [File upload error pipe](../pipes/file-upload-error.pipe.md)
|