### Node
To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
## Install
```sh
npm install --save ng2-alfresco-upload
```
Components included:
- [Upload button](#upload-button)
- [Drag and Drop](#drag-and-drop)
### Upload button
This component, provide a buttons to upload files to alfresco.
#### Dependencies
Add the following dependency to your index.html:
```html
```
The following component needs to be added to your systemjs.config:
- ng2-translate
- ng2-alfresco-core
- ng2-alfresco-upload
Please refer to the following example to have an idea of how your systemjs.config should look like :
https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-upload/demo/systemjs.config.js
#### Style
The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
design dependency to your project:
```sh
npm install --save material-design-icons material-design-lite
```
Also make sure you include these dependencies in your .html page:
```html
```
#### Basic usage
```html
```
Example of an App that declares upload button component :
```ts
import { Component, OnInit } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import {
ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService
} from 'ng2-alfresco-core';
import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload';
@Component({
selector: 'my-app',
template: ``,
directives: [ALFRESCO_ULPOAD_COMPONENTS]
})
export class MyDemoApp {
constructor(alfrescoSettingsService: AlfrescoSettingsService) {
alfrescoSettingsService.host = 'http://myalfrescoip';
}
public customMethod(event: Object): void {
console.log('File uploaded');
}
}
bootstrap(MyDemoApp, [
HTTP_PROVIDERS,
ALFRESCO_CORE_PROVIDERS,
UploadService
]);
```
#### Events
Attribute | Description
--- | ---
`onSuccess` | The event is emitted when the file is uploaded
#### Options
Attribute | Options | Default | Description | Mandatory
--- | --- | --- | --- | ---
`showUdoNotificationBar` | *boolean* | true | Hide/show notification bar |
`uploadFolders` | *boolean* | false | Allow/disallow upload folders (only for chrome) |
`multipleFiles` | *boolean* | false | Allow/disallow multiple files |
`acceptedFilesType` | *string* | * | array of allowed file extensions , example: ".jpg,.gif,.png,.svg" |
`currentFolderPath` | *string* | '/Sites/swsdp/documentLibrary' | define the path where the files are uploaded |
`versioning` | *boolean* | false | Versioning false is the default uploader behaviour and it rename using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
### Drag and drop
This component, provide a drag and drop are to upload files to alfresco.
#### Basic usage
```html
```
Example of an App that declares upload drag and drop component :
```ts
import { Component, OnInit } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import {
ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService
} from 'ng2-alfresco-core';
import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload';
@Component({
selector: 'my-app',
template: `
DRAG HERE
`,
directives: [ALFRESCO_ULPOAD_COMPONENTS]
})
export class MyDemoApp {
constructor(alfrescoSettingsService: AlfrescoSettingsService) {
alfrescoSettingsService.host = 'http://myalfrescoip';
}
public customMethod(event: Object): void {
console.log('File uploaded');
}
}
bootstrap(MyDemoApp, [
HTTP_PROVIDERS,
ALFRESCO_CORE_PROVIDERS,
UploadService
]);
```
#### Events
Attribute | Description
--- | ---
`onSuccess` | The event is emitted when the file is uploaded
#### Options
Attribute | Options | Default | Description | Mandatory
--- | --- | --- | --- | ---
`showUdoNotificationBar` | *boolean* | true | Hide/show notification bar |
`currentFolderPath` | *string* | '/Sites/swsdp/documentLibrary' | define the path where the files are uploaded |
`versioning` | *boolean* | false | Versioning false is the default uploader behaviour and it rename using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
### Files Dialog
This component provides a dialog that shows all the files uploaded
with upload button or drag & drop area components. This component should
be used in combination with upload button or drag & drop area.
#### Basic usage
```html
```
## Build from sources
Alternatively you can build component from sources with the following commands:
```sh
npm install
npm run build
```
##Build the files and keep watching for changes
```sh
npm run build:w
```
## Running unit tests
```sh
npm test
```
## Running unit tests in browser
```sh
npm test-browser
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
## Code coverage
```sh
npm run coverage
```
## Demo
If you want have a demo of how the component works, please check the demo folder :
```sh
cd demo
npm install
npm start
```
