npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ng2-alfresco-upload

v1.9.0

Published

Alfresco Angular2 Upload Component

Downloads

367

Readme

Alfresco Upload Component for Angular

Prerequisites

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

Install

Follow the 3 steps below:

  1. Npm

    npm install ng2-alfresco-upload --save
  2. Html

    Include these dependencies in your index.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">
    
      <!-- Load the Angular Material 2 stylesheet -->
      <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
       
      <!-- Polyfill(s) for Safari (pre-10.x) -->
      <script src="node_modules/intl/dist/Intl.min.js"></script>
      <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
    
      <!-- Polyfill(s) for older browsers -->
      <script src="node_modules/core-js/client/shim.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
      <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
    
      <!-- Polyfill(s) for dialogs -->
      <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
      <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
      <style>._dialog_overlay { position: static !important; } </style>
    
      <!-- Modules  -->
      <script src="node_modules/zone.js/dist/zone.js"></script>
      <script src="node_modules/reflect-metadata/Reflect.js"></script>
      <script src="node_modules/systemjs/dist/system.src.js"></script>
    
  3. SystemJs

    Add the following components to your systemjs.config.js file:

    • ng2-translate
    • alfresco-js-api
    • ng2-alfresco-core
    • ng2-alfresco-upload

    Please refer to the following example file: systemjs.config.js .

Basic usage

<alfresco-upload-button [showNotificationBar]="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 { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { UploadModule } from 'ng2-alfresco-upload';

@Component({
    selector: 'alfresco-app-demo',
    template: `<alfresco-upload-button [showNotificationBar]="true"
                                       [uploadFolders]="false"
                                       [multipleFiles]="false"
                                       [acceptedFilesType]="'.jpg,.gif,.png,.svg'"
                                       (onSuccess)="onSuccess($event)">
               </alfresco-upload-button>
               <file-uploading-dialog></file-uploading-dialog>`
})
export class MyDemoApp {

    constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
        settingsService.ecmHost = 'http://localhost:8080';

        this.authService.login('admin', 'admin').subscribe(
            ticket => {
                console.log(ticket);
            },
            error => {
                console.log(error);
            });
    }

    public onSuccess(event: Object): void {
        console.log('File uploaded');
    }
}

@NgModule({
    imports: [
        BrowserModule,
        CoreModule.forRoot(),
        UploadModule.forRoot()
    ],
    declarations: [ MyDemoApp ],
    bootstrap:    [ MyDemoApp ]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

Events

| Name | Description | | --- | --- | | onSuccess | The event is emitted when the file is uploaded |

Properties

| Name | Type | Default | Description | | --- | --- | --- | --- | | disabled | boolean | false | Toggle component disabled state | | showNotificationBar | 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 | | staticTitle | string | 'FILE_UPLOAD.BUTTON.UPLOAD_FILE' or 'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' string in the JSON text file | define the text of the upload button | | disableWithNoPermission | boolean | false | If the value is true and the user doesn't have the permission to delete the node the button will be disabled |

How to show notification message with no permission

You can show a notification error when the user doesn't have the right permission to perform the action. The UploadButtonComponent provides the event permissionEvent that is raised when the delete permission is missing You can subscribe to this event from your component and use the NotificationService to show a message.

<alfresco-upload-button
    [rootFolderId]="currentFolderId"
    (permissionEvent)="onUploadPermissionFailed($event)">
</alfresco-upload-button>

export class MyComponent {

onUploadPermissionFailed(event: any) {
    this.notificationService.openSnackMessage(`you don't have the ${event.permission} permission to ${event.action} the ${event.type} `, 4000);
}

}

Upload notification message

How to disable the button when the delete permission is missing

You can easily disable the button when the user doesn't own the permission to perform the action. The UploadButtonComponent provides the property disableWithNoPermission that can be true. In this way the button should be disabled if the delete permission is missing for the node.

<alfresco-upload-button
    [rootFolderId]="currentFolderId"
    [disableWithNoPermission]="true">
</alfresco-upload-button>

Upload disable button

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 { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { UploadModule } from 'ng2-alfresco-upload';

@Component({
    selector: 'alfresco-app-demo',
    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>`
})
export class MyDemoApp {

    constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
        settingsService.ecmHost = 'http://localhost:8080';

        this.authService.login('admin', 'admin').subscribe(
            ticket => {
                console.log(ticket);
            },
            error => {
                console.log(error);
            });
    }

    public onSuccess(event: Object): void {
        console.log('File uploaded');
    }
}

@NgModule({
    imports: [
        BrowserModule,
        CoreModule.forRoot(),
        UploadModule.forRoot()
    ],
    declarations: [ MyDemoApp ],
    bootstrap:    [ MyDemoApp ]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

Events

| Name | Description | | --- | --- | | onSuccess | The event is emitted when the file is uploaded |

Propertoes

| Name | Type | Default | Description | | --- | --- | --- | --- | | showNotificationBar | 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

NPM scripts

| Command | Description | | --- | --- | | npm run build | Build component | | npm run test | Run unit tests in the console | | npm run test-browser | Run unit tests in the browser | npm run coverage | Run unit tests and display code coverage report |

License

Apache Version 2.0