Alfresco Upload Component for Angular 2
Install
npm set registry http://devproducts.alfresco.me:4873
npm install --save ng2-alfresco-upload
Build from sources
Alternatively you can build component from sources with the following commands:
npm install
npm run build
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-core-rest-api/bundle.js"></script>
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'
}
}
});
Basic usage
<alfresco-upload-button [showDialogUpload]="true"
[showUdoNotificationBar]="true"
[uploadFolders]="true"
[multipleFiles]="false"
[acceptedFilesType]=".jpg,.gif,.png,.svg"
(onSuccess)="customMethod($event)">
</alfresco-upload-button>
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, AlfrescoTranslationService, AlfrescoTranslationLoader } 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 [showDialogUpload]="true"
[showUdoNotificationBar]="true"
[uploadFolders]="true"
[multipleFiles]="false"
[acceptedFilesType]=".jpg,.gif,.png,.svg"
(onSuccess)="customMethod($event)">
</alfresco-upload-button>`,
directives: [ALFRESCO_ULPOAD_COMPONENT]
})
export class MyDemoApp {
constructor(alfrescoSettingsService: AlfrescoSettingsService) {
alfrescoSettingsService.host = 'http://myalfrescoip';
}
public customMethod(event: Object): void {
console.log('File uploaded');
}
}
bootstrap(MyDemoApp, [
HTTP_PROVIDERS,
AlfrescoTranslationService,
AlfrescoTranslationLoader,
AlfrescoSettingsService,
UploadService
]);
Events
onSuccess: The event is emitted when the file is uploaded
Options
showDialogUpload: {boolean} optional) default true. Hide/show upload dialog.
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 [showDialogUpload]="true" (onSuccess)="customMethod($event)"></alfresco-upload-drag-area>
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, AlfrescoTranslationService, AlfrescoTranslationLoader } 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 [showDialogUpload]="true" (onSuccess)="customMethod($event)" >
<div style="width: 200px; height: 100px; border: 1px solid #888888">
DRAG HERE
</div>
</alfresco-upload-drag-area>`,
directives: [ALFRESCO_ULPOAD_COMPONENT]
})
export class MyDemoApp {
constructor(alfrescoSettingsService: AlfrescoSettingsService) {
alfrescoSettingsService.host = 'http://myalfrescoip';
}
public customMethod(event: Object): void {
console.log('File uploaded');
}
}
bootstrap(MyDemoApp, [
HTTP_PROVIDERS,
AlfrescoTranslationService,
AlfrescoTranslationLoader,
AlfrescoSettingsService,
UploadService
]);
Events
onSuccess: The event is emitted when the file is uploaded
Options
showDialogUpload: {boolean} optional) default true. Hide/show upload dialog.
Running unit tests
npm test
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