@eqproject/eqp-attachments v3.0.0

Table of contents

• Getting started
• API
• Use cases
• Credits

Required

• Angular Material installed and imported
• Sweetalert2 (v9)

Getting started

This package allows the upload/download of one or multiple attachments (one at a time). The attachments can be files or links (except video files, this feature will be added later). Has the possibility to render a preview for image files inside the eqp-table (an inline preview). Can open a dialog containing a preview of the uploaded IAttachmentDTO (whatever it is - a document, an image or a link).

Notes

The directive does not comunicate with the backend of any application to save the attachments, all uploaded files are locally managed.

Step 1: Install eqp-attachments:

NPM

npm install --save @eqproject/eqp-attachments

Step 2:

Import the EqpAttachmentsModule:

import { EqpAttachmentsModule } from '@eqproject/eqp-attachments';

@NgModule({
  declarations: [AppComponent],
  imports: [EqpAttachmentsModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Include the following stylesheet from fontawesome in your global scss file:

@import "~@fortawesome/fontawesome-free/css/all.min.css";

API

Inputs

Outputs

Model, Interfaces and Enums used

IAttachmentDTO Interface

IOptions Interface

Enums description

Use cases

Use Example in class :

Notes

To make this examples work you need to replace the FileDataBase64 property value with a complete base64 string.

Breaking changes from the 2.0.3 version

File upload modal has been removed. So when using ViewChild, use addFile() function instead of openModalAddAttachment().

CASE 1: Single attachment

<eqp-attachments 
    [multipleAttachment]="false" [attachmentsList]="[singleAttachment]"
    [allowOnlyImages]="false"
    [isDisabled]="false" [allowedTypes]="[1,2,3]"
    (downloadAttachment)="viewAttachment($event)"
    (localEditedAttachments)="catchAttachmentList($event)"
    (onDeleteAttachment)="onDeleteAttachment($event)"
    [showPreview]="false" [cropOptions]="[1,2]">
</eqp-attachments>

    singleAttachment: IAttachmentDTO = {
        ID: 0,
        IsImage: true,
        AttachmentType: 1,
        FileContentType: "image/png",
        FileName: "logo_eqp.png",
        FileExtension: "png",
        FileDataBase64: "iVBORw0KGgoAAAANSUhEUgAAAK[...]XSNgP0pGR02YAAAAASUVORK5CYII="
    }
  
    catchAttachmentList(event) {
        // TODO
    }
  
    viewAttachment(event) {
        // TODO
    }

    onDeleteAttachment(event) {
        // TODO
    }

CASE 2: Multiple attachments

<eqp-attachments [multipleAttachment]="true" [attachmentsList]="attachmentsList"
    [allowOnlyImages]="false" [downloadTooltipPosition]="'below'" (downloadAttachment)="viewAttachment($event)"
    (localEditedAttachments)="catchAttachmentList($event)" [isTableSearcheable]="false"
    [tablePaginatorVisible]="false" [allowedTypes]="[1,2,3]" [cropOptions]="[1,2]">
</eqp-attachments>

    attachmentsList: Array<IAttachmentDTO> = [
    {
        ID: 0,
        IsImage: true,
        AttachmentType: 1,
        FileContentType: "image/png",
        FileName: "logo_eqp.png",
        FileExtension: "png",
        FileDataBase64: "iVBORw0KGgoAAAANSUhEUgAAAK[...]XSNgP0pGR02YAAAAASUVORK5CYII="
    },
    {
        ID: 0,
        IsImage: false,
        AttachmentType: 2,
        FileName: "EqProject",
        FilePath: "https://www.eqproject.it/",
    },
    ];
    
    catchAttachmentList(event) {
        // TODO
    }
  
    viewAttachment(event) {
        // TODO
    }

Credits

This library has been developed by EqProject SRL, for more info contact: info@eqproject.it