Skip to content

Latest commit

 

History

History
280 lines (218 loc) · 9.08 KB

README.md

File metadata and controls

280 lines (218 loc) · 9.08 KB
Raw

Alfresco Upload Component for Angular 2

travis Status travis Status Coverage Status npm downloads license alfresco component angular 2 typescript node version

Prerequisites

Before you start using this development framework, make sure you have installed all required software and done all the necessary configuration, see this page.

Install

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>

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:

npm install --save material-design-icons material-design-lite

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">

Basic usage

<alfresco-upload-button [showUdoNotificationBar]="true"
                        [uploadFolders]="true"
                        [multipleFiles]="false"
                        [acceptedFilesType]=".jpg,.gif,.png,.svg"
                        [currentFolderPath]="/Sites/swsdp/documentLibrary"
                        [versioning]="false"
                        (onSuccess)="customMethod($event)">
</alfresco-upload-button>
<file-uploading-dialog></file-uploading-dialog>

Example of an App that declares upload button component :

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: `<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

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

<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, 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: `<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

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

<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

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