mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
#46 upload Readme and css/html improvement
This commit is contained in:
@@ -1,28 +1,68 @@
|
|||||||
# Alfresco Upload Component for Angular 2
|
# Alfresco Upload Component for Angular 2
|
||||||
|
<p>
|
||||||
|
<a href='https://raw.githubusercontent.com/Alfresco/dev-platform-webcomponents/master/ng2-components/ng2-alfresco-upload/LICENSE'>
|
||||||
|
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
|
||||||
|
</a>
|
||||||
|
<a href='https://www.alfresco.com/'>
|
||||||
|
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='my blog' />
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
## Install
|
||||||
|
Alternatively you can build component from sources with the following commands:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install --save ng2-alfresco-upload
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Build from sources
|
||||||
|
Alternatively you can build component from sources with the following commands:
|
||||||
|
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
Components included:
|
Components included:
|
||||||
|
|
||||||
* Upload Component
|
- [Upload button](#upload-button)
|
||||||
|
- [Drag and Drop](#drag-and-drop)
|
||||||
|
|
||||||
### Custom Upload Component
|
### Upload button
|
||||||
|
This component, provide a buttons to upload files to alfresco.
|
||||||
|
|
||||||
```ts
|
#### Basic usage
|
||||||
import {Component} from 'angular2/core';
|
|
||||||
import {Login} from 'ng2-alfresco-login/ng2-alfresco-login';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'my-login',
|
```html
|
||||||
template: ' <alfresco-login method="{{methodName}}"></alfresco-login>',
|
<alfresco-upload-button [showDialogUpload]="true"
|
||||||
directives: [Login]
|
[showUdoNotificationBar]="true"
|
||||||
})
|
[uploadFolders]="true"
|
||||||
export class MyLoginComponent {
|
[multipleFiles]="false"
|
||||||
methodName: string = 'POST';
|
[acceptedFilesType]="*">
|
||||||
}
|
</alfresco-upload-button>
|
||||||
|
```
|
||||||
|
#### Options
|
||||||
|
|
||||||
|
**showDialogUpload**: {boolean} optional) default true. Hide/show upload dialog.<br />
|
||||||
|
**showUdoNotificationBar**: {boolean} (optional) default true. Hide/show notification bar.<br />
|
||||||
|
**uploadFolders**: {boolean} (optional) default false. Allow/disallow upload folders (only for chrome).<br />
|
||||||
|
**multipleFiles**: {boolean} (optional) default false. Allow/disallow multiple files.<br />
|
||||||
|
**acceptedFilesType**: {string} (optional) default "*". array of allowed file extensions , example: ".jpg,.gif,.png,.svg" .<br />
|
||||||
|
|
||||||
|
### Drag and drop
|
||||||
|
This component, provide a drag and drop are to upload files to alfresco.
|
||||||
|
|
||||||
|
#### Basic usage
|
||||||
|
```html
|
||||||
|
<alfresco-upload-drag-area [showDialogUpload]="boolean" ></alfresco-upload-drag-area>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Build
|
#### Options
|
||||||
|
|
||||||
```
|
**showDialogUpload**: {boolean} optional) default true. Hide/show upload dialog.<br />
|
||||||
$ npm install
|
|
||||||
$ npm run build
|
|
||||||
```
|
|
||||||
|
@@ -21,7 +21,7 @@ import { UploadButtonComponent } from './src/components/upload-button.component'
|
|||||||
* ng2-alfresco-upload, provide components to upload files to alfresco repository.
|
* ng2-alfresco-upload, provide components to upload files to alfresco repository.
|
||||||
*
|
*
|
||||||
* Components provided:
|
* Components provided:
|
||||||
* - A set of buttons to upload files:
|
* - A button to upload files
|
||||||
* <alfresco-upload-button [showDialogUpload]="boolean"
|
* <alfresco-upload-button [showDialogUpload]="boolean"
|
||||||
* [showUdoNotificationBar]="boolean"
|
* [showUdoNotificationBar]="boolean"
|
||||||
* [uploadFolders]="boolean"
|
* [uploadFolders]="boolean"
|
||||||
|
@@ -23,7 +23,7 @@ import {UploadButtonComponent} from './src/components/upload-button.component';
|
|||||||
* ng2-alfresco-upload, provide components to upload files to alfresco repository.
|
* ng2-alfresco-upload, provide components to upload files to alfresco repository.
|
||||||
*
|
*
|
||||||
* Components provided:
|
* Components provided:
|
||||||
* - A set of buttons to upload files:
|
* - A button to upload files
|
||||||
* <alfresco-upload-button [showDialogUpload]="boolean"
|
* <alfresco-upload-button [showDialogUpload]="boolean"
|
||||||
* [showUdoNotificationBar]="boolean"
|
* [showUdoNotificationBar]="boolean"
|
||||||
* [uploadFolders]="boolean"
|
* [uploadFolders]="boolean"
|
||||||
|
@@ -2,9 +2,9 @@
|
|||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
color: #555;
|
color: #555;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
overflow-y: auto;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
overflow-y: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-focus {
|
.input-focus {
|
||||||
|
@@ -1,5 +1,5 @@
|
|||||||
<div file-draggable id='UploadBorder' class="upload-border" (onFilesDropped)="onFilesDropped($event)"
|
<div file-draggable id='UploadBorder' class="upload-border" (onFilesDropped)="onFilesDropped($event)"
|
||||||
dropzone="" webkitdropzone="copy file:image/png file:image/gif file:image/jpeg" #droparea>
|
dropzone="" webkitdropzone="*" #droparea>
|
||||||
<ng-content></ng-content>
|
<ng-content></ng-content>
|
||||||
</div>
|
</div>
|
||||||
<file-uploading-dialog [hidden]="showDialogUpload" [filesUploadingList]="filesUploadingList"
|
<file-uploading-dialog [hidden]="showDialogUpload" [filesUploadingList]="filesUploadingList"
|
||||||
|
Reference in New Issue
Block a user