Alfresco Upload Component for Angular 2
Install
npm set registry http://devproducts.alfresco.me:4873
npm install --save ng2-alfresco-upload
Components included:
Upload button
This component, provide a buttons to upload files to alfresco.
Dependencies
Add the following dependency to your index.html:
<script src="node_modules/alfresco-js-api/bundle.js"></script>
Also make sure you include these dependencies in your .html page:
<!-- Google Material Design Lite -->
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
<script src="node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
Make sure your systemjs.config has the following configuration:
System.config({
defaultJSExtensions: true,
map: {
'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload',
'rxjs': 'node_modules/rxjs',
'angular2' : 'node_modules/angular2',
'ng2-translate': 'node_modules/ng2-translate',
'app': 'dist/src'
},
packages: {
'app': {
defaultExtension: 'js'
},
'ng2-alfresco-core': {
defaultExtension: 'js'
},
'ng2-alfresco-upload': {
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
},
'angular2': {
defaultExtension: '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:
npm install --save material-design-icons material-design-lite
Basic usage
<alfresco-upload-button [showUdoNotificationBar]="true"
[uploadFolders]="true"
[multipleFiles]="false"
[acceptedFilesType]=".jpg,.gif,.png,.svg"
(onSuccess)="customMethod($event)">
</alfresco-upload-button>
<file-uploading-dialog></file-uploading-dialog>
Example of an App that declares upload button component :
import { Component } from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';
import { HTTP_PROVIDERS } from 'angular2/http';
import { AlfrescoSettingsService , ALFRESCO_CORE_PROVIDERS } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload/dist/ng2-alfresco-upload';
@Component({
selector: 'my-app',
template: `<alfresco-upload-button [showUdoNotificationBar]="true"
[uploadFolders]="false"
[multipleFiles]="false"
[acceptedFilesType]="'.jpg,.gif,.png,.svg'"
(onSuccess)="customMethod($event)">
</alfresco-upload-button>
<file-uploading-dialog></file-uploading-dialog>`,
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
onSuccess: The event is emitted when the file is uploaded
Options
showUdoNotificationBar: {boolean} (optional) default true. Hide/show notification bar.
uploadFolders: {boolean} (optional) default false. Allow/disallow upload folders (only for chrome).
multipleFiles: {boolean} (optional) default false. Allow/disallow multiple files.
acceptedFilesType: {string} (optional) default "*". array of allowed file extensions , example: ".jpg,.gif,.png,.svg" .
Drag and drop
This component, provide a drag and drop are to upload files to alfresco.
Basic usage
<alfresco-upload-drag-area (onSuccess)="customMethod($event)"></alfresco-upload-drag-area>
<file-uploading-dialog></file-uploading-dialog>
Example of an App that declares upload drag and drop component :
import { Component } from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';
import { HTTP_PROVIDERS } from 'angular2/http';
import { AlfrescoSettingsService, ALFRESCO_CORE_PROVIDERS } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload/dist/ng2-alfresco-upload';
@Component({
selector: 'my-app',
template: `<alfresco-upload-drag-area (onSuccess)="customMethod($event)" >
<div style="width: 200px; height: 100px; border: 1px solid #888888">
DRAG HERE
</div>
</alfresco-upload-drag-area>
<file-uploading-dialog></file-uploading-dialog>`,
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
onSuccess: The event is emitted when the file is uploaded
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
<file-uploading-dialog></file-uploading-dialog>
Build from sources
Alternatively you can build component from sources with the following commands:
npm install
npm run build
##Build the files and keep watching for changes
```sh
$ npm run build:w
```
Running unit tests
npm test
Running unit tests in browser
npm test-browser
This task rebuilds all the code, runs tslint, license checks and other quality check tools before performing unit testing.
Code coverage
npm run coverage
Demo
If you want have a demo of how the component works, please check the demo folder :
cd demo
npm install
npm start