Document attachment controls

Electronic documents are used a lot in enterprise. Ability to attach documents to any item in application is a great feature that can enhance user experience. Pip.WebUI.Documents module contains two controls to add/remove and visualize document attachments.

Document list view

Control shows a list of attached documents. It allows users to download the document by clicking on it

Using

Template:

<pip-document-list [documents]="docs"></pip-document-list>

Initialized data:

docs = [
    {
        url: './assets/boy.png'
    },
    {
        url: './assets/girl.png'
    },
    {
        url: './assets/girl2.png'
    },
    {
        url: './assets/boy2.png'
    }
];

Example on the image (all states)

Document list edit

Control allows to attach files or remove them from the document list

Using

Template:

<pip-document-list-edit [documents]="docs" [disabled]="disabled" (onUpdateDocuments)="updateDocuments($event)"></pip-document-list-edit>

Initialized data:

docs = [
    {
        url: './assets/boy.png'
    },
    {
        url: './assets/girl.png'
    },
    {
        url: './assets/girl2.png'
    },
    {
        url: './assets/boy2.png'
    }
];

Example on the image

Installation

To install this module using npm:

npm install pip-webui2-documents --save

License

This module is released under MIT license and totally free for commercial and non-commercial use.