@eqproject/eqp-attachments 3.0.3 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +247 -185
- package/esm2022/lib/eqp-attachments.component.mjs +294 -143
- package/esm2022/lib/eqp-attachments.module.mjs +5 -13
- package/esm2022/lib/interfaces/IAttachment.mjs +1 -1
- package/fesm2022/eqproject-eqp-attachments.mjs +299 -156
- package/fesm2022/eqproject-eqp-attachments.mjs.map +1 -1
- package/lib/eqp-attachments.component.d.ts +55 -18
- package/lib/eqp-attachments.module.d.ts +1 -3
- package/lib/interfaces/IAttachment.d.ts +2 -0
- package/package.json +3 -6
package/README.md
CHANGED
|
@@ -1,232 +1,294 @@
|
|
|
1
|
-
Table of
|
|
1
|
+
## Table of Contents
|
|
2
|
+
|
|
2
3
|
=================
|
|
3
|
-
* [Getting started](#getting-started)
|
|
4
|
-
* [API](#api)
|
|
5
|
-
* [Use cases](#use-cases)
|
|
6
|
-
* [Credits](#credits)
|
|
7
4
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
5
|
+
* [Overview](#overview)
|
|
6
|
+
* [Requirements](#requirements)
|
|
7
|
+
* [Getting Started](#getting-started)
|
|
8
|
+
* [API Reference](#api-reference)
|
|
9
|
+
* [Inputs](#inputs)
|
|
10
|
+
* [Outputs](#outputs)
|
|
11
|
+
* [Data Models](#data-models)
|
|
12
|
+
* [Use Cases](#use-cases)
|
|
13
|
+
* [Credits](#credits)
|
|
14
|
+
|
|
15
|
+
## Overview
|
|
16
|
+
|
|
17
|
+
`@eqproject/eqp-attachments` provides a complete, client-side solution for attachment management, now fully modernized with the latest Angular features.
|
|
18
|
+
|
|
19
|
+
✨ **Key Features:**
|
|
20
|
+
|
|
21
|
+
* **Single or Multiple Attachments:** Easily configure the component to handle one or many attachments.
|
|
22
|
+
* **Multiple Sources:** Supports local file uploads, direct links from the web, and Dropbox integration.
|
|
23
|
+
* **Modern UI:** A clean, animated drag-and-drop interface.
|
|
24
|
+
* **Dual View Mode:** Allows users to switch between a responsive **Card Grid** and a detailed **Table View** .
|
|
25
|
+
* **Image Cropper:** A built-in tool for cropping and rotating uploaded images.
|
|
26
|
+
* **Client-Side Validation:** Set limits on file size, file types, and more.
|
|
27
|
+
* **Highly Configurable:** Almost every label, button, and feature can be customized via inputs.
|
|
28
|
+
* **Purely Client-Side:** The component manages attachments locally without requiring a backend connection, emitting the final data for you to handle.
|
|
11
29
|
|
|
30
|
+
## Requirements
|
|
12
31
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
Has the possibility to render a preview for image files inside the eqp-table (an inline preview).
|
|
17
|
-
Can open a dialog containing a preview of the uploaded IAttachmentDTO (whatever it is - a document, an image or a link).
|
|
32
|
+
* **Angular 17+**
|
|
33
|
+
* **Angular Material** installed and configured in your project.
|
|
34
|
+
* **Font Awesome** for a complete icon set (optional, but recommended for the best visual experience).
|
|
18
35
|
|
|
19
|
-
|
|
20
|
-
The directive does not comunicate with the backend of any application to save the attachments, all uploaded files are locally managed.
|
|
36
|
+
## Getting Started
|
|
21
37
|
|
|
22
|
-
### Step 1: Install
|
|
38
|
+
### Step 1: Install the Package
|
|
23
39
|
|
|
24
|
-
|
|
25
|
-
|
|
40
|
+
**Shell**
|
|
41
|
+
|
|
42
|
+
```
|
|
26
43
|
npm install --save @eqproject/eqp-attachments
|
|
27
44
|
```
|
|
28
45
|
|
|
29
|
-
### Step 2:
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
46
|
+
### Step 2: Import the Component
|
|
47
|
+
|
|
48
|
+
The component is **standalone** , so you can import it directly into your component or module.
|
|
49
|
+
|
|
50
|
+
**TypeScript**
|
|
51
|
+
|
|
52
|
+
```
|
|
53
|
+
// in your-component.ts
|
|
54
|
+
import { EqpAttachmentsComponent } from '@eqproject/eqp-attachments';
|
|
33
55
|
|
|
34
|
-
@
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
56
|
+
@Component({
|
|
57
|
+
selector: 'my-feature-component',
|
|
58
|
+
standalone: true,
|
|
59
|
+
imports: [ EqpAttachmentsComponent ],
|
|
60
|
+
template: `
|
|
61
|
+
<eqp-attachments
|
|
62
|
+
[attachmentsList]="myAttachments"
|
|
63
|
+
(localEditedAttachments)="onAttachmentsChange($event)">
|
|
64
|
+
</eqp-attachments>
|
|
65
|
+
`
|
|
38
66
|
})
|
|
39
|
-
export class
|
|
67
|
+
export class MyFeatureComponent {
|
|
68
|
+
myAttachments: IAttachmentDTO[] = [];
|
|
69
|
+
|
|
70
|
+
onAttachmentsChange(updatedList: IAttachmentDTO[]) {
|
|
71
|
+
this.myAttachments = updatedList;
|
|
72
|
+
console.log('Attachments list updated!', this.myAttachments);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### Step 3: Add Styles (Optional)
|
|
78
|
+
|
|
79
|
+
For the best icon display, include Font Awesome in your project's styles, for example, in `angular.json`:
|
|
80
|
+
|
|
81
|
+
**JSON**
|
|
82
|
+
|
|
40
83
|
```
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
84
|
+
"styles": [
|
|
85
|
+
"src/styles.scss",
|
|
86
|
+
"node_modules/@fortawesome/fontawesome-free/css/all.min.css"
|
|
87
|
+
],
|
|
44
88
|
```
|
|
45
89
|
|
|
90
|
+
## API Reference
|
|
46
91
|
|
|
47
|
-
|
|
48
|
-
## API
|
|
49
92
|
### Inputs
|
|
50
|
-
| Input | Type | Default | Required | Description |
|
|
51
|
-
| - | - | - | - | - |
|
|
52
|
-
| [disableAction] | `boolean` | `false` | no | Has effect only if `[multipleAttachment]="true"`. If TRUE then the eqp-table containing the list of attachments does not show the action column.
|
|
53
|
-
| [showHeader] | `boolean` | `true` | no | Has effect only if `[multipleAttachment]="true"`. If TRUE then shows the header of the mat-card. |
|
|
54
|
-
| [headerTitle] | `string` | `"Elenco allegati"` | no | Has effect only if `[multipleAttachment]="true"` and `[showHeader]="true"`. It defines the title of the mat-card . |
|
|
55
|
-
| [attachmentsList] | `Array<IAttachmentDTO>` | `null` | no | Defines the initial array of attachments. If not passed it is instantiated as an empty array. Even in case `multipleAttachment` is set to FALSE you need to pass the eventual attachment as an Array. |
|
|
56
|
-
| [showMatCard] | `boolean` | `true` | no | If TRUE applies the `box-shadow` style of the mat-card |
|
|
57
|
-
| [multipleAttachment] | `boolean` | `true` | no | Defines how many attachments the directive needs to handle. If TRUE shows an eqp-table containing the values of `attachmentsList` with the possibility to download/open or delete any row. With any other value it shows only a button to upload one IAttachmentDTO (link or file). |
|
|
58
|
-
| [loadMultipleFiles] | `boolean` | `false` | no | If it assumes the value TRUE then it will be possible to load multiple files at the same time. This feature is active ONLY if you manage multiple attachments, so if the `multipleAttachment` input takes on the value TRUE, otherwise it is always disabled. |
|
|
59
|
-
| [attachmentsColumns] | `Array<ConfigColumn>` | `null` | no | Has effect only if `[multipleAttachment]="true"`. Columns configuration for the eqp-table showing the list of IAttachmentDTO.
|
|
60
|
-
| [emptyTableMessage] | `string` | `"Nessun dato trovato"` | no | Has effect only if `[multipleAttachment]="true"`. Sets the message to show if the eqp-table contains no elements. |
|
|
61
|
-
| [allowOnlyImages] | `boolean` | `false` | no | If TRUE allows the user to upload only image files of the following types: `["image/bmp", "image/gif", "image/jpeg", "image/tiff", "image/png"]`. If FALSE the user can upload a file of any type. |
|
|
62
|
-
| [acceptedFileTypes] | `string` | `*` | no | Sets the `accept` input attribute describing which file type to allow. |
|
|
63
|
-
| [isDisabled] | `boolean` | `false` | no | If TRUE it disables the buttons to add a new IAttachmentDTO. |
|
|
64
|
-
| [showInlinePreview] | `boolean` | `true`| no | Has effect only if `[multipleAttachment]="true"` and `attachmentsColumns` are not defined. Adds a column to the eqp-table to show a small preview of the IAttachmentDTO (if it is an image, otherwise an icon based on the content type of the file). With a click on it opens a dialog to view the selected attachment. |
|
|
65
|
-
| [getAttachmentEndpoint] | `string` | null | no | Sets the endpoint to call to get the complete IAttachmentDTO to be displayed inside the preview dialog. Used only for images with the `FileDataBase64` property missing (in any other case the `FilePath` property is used to render the preview). The directive makes a POST request without any token and with the selected IAttachmentDTO in the body. |
|
|
66
|
-
| [productionBaseUrl] | `string` | `null` | no | Hostname of the production environment. Needed to display in the preview dialog any document using the google viewer (example: `"https://eqproject.it"` - without any "/" at the end). Combined with the `FilePath` property sets the access path to the selected file. Make sure the forlder is accessible. |
|
|
67
|
-
| [compressionOptions] | `IOptions` | `{ maxSizeMB: 0.5, maxWidthOrHeight: 1920, useWebWorker: true }` | no | Sets the compression options for the uploaded images. |
|
|
68
|
-
| [downloadTooltipPosition] | `string` | `"below"` | no | Defines the position of the tooltip used by the eqp-table in the download column. The possible values are the following: `"below", "above", "left", "right"`.
|
|
69
|
-
| [openLinkLabel] | `string` | `"Apri link` | no | Sets the open a link button label. |
|
|
70
|
-
| [addButtonLabel] | `string` | `"Aggiungi"` | no | Sets the add button label. |
|
|
71
|
-
| [downloadLabel] | `string` | `"Download"` | no | Sets the download button label. |
|
|
72
|
-
| [deleteLabel] | `string` | `"Elimina"` | no | Sets the delete button label. |
|
|
73
|
-
| [fileNameLabel] | `string` | `"Nome file"` | no | Sets the file name feld label. |
|
|
74
|
-
| [previewLabel] | `string` | `"Anteprima"` | no | Sets the preview label. |
|
|
75
|
-
| [uploadFileLabel] | `string` | `"Carica file"` | no | Sets the upload file button label. |
|
|
76
|
-
| [confirmLabel] | `string` | `"Conferma"` | no | Sets the confirm button label. |
|
|
77
|
-
| [abortLabel] | `string` | `"Annulla"` | no | Sets the abort button label. |
|
|
78
|
-
| [saveLabel] | `string` | `"Salva"` | no | Sets the save button label. |
|
|
79
|
-
| [exitLabel] | `string` | `"Esci"` | no | Sets the exit button label. |
|
|
80
|
-
| [uploadWithDropboxLabel] | `string` | `"Carica con Dropbox"` | no | Sets the dropbox button label.";
|
|
81
|
-
| [cropLabel] | `string` | `"Scegli le dimensioni dell'immagine"` | no | Sets the crop label.";
|
|
82
|
-
| [flipHorinzontalLabel] | `string` | `"Capovolgi orizzontalmente"` | no | Sets the horizontal flip button label.";
|
|
83
|
-
| [flipVerticalLabel] | `string` | `"Capovolgi verticalmente"` | no | Sets the vertical flip button label.";
|
|
84
|
-
| [rotateRightLabel] | `string` | `"Ruota a destra"` | no | Sets the rotation left button label.";
|
|
85
|
-
| [rotateLeftLabel] | `string` | `"Ruota a sinistra"` | no | Sets the rotation right button label.";
|
|
86
|
-
| [eqpTableSearchText] | `string` | `"Cerca"` | no | Sets the eqp-table search input placeholder. |
|
|
87
|
-
| [isTableSearcheable] | `boolean` | `true` | no | It allows you to establish, in the case of multiple attachments management, whether the table is searchable or not (default: true) |
|
|
88
|
-
| [deleteDialogTitle] | `string` | `"Sei sicuro di voler procedere?"` | no | Sets the confirm dialog title when deleting an IAttachmentDTO. |
|
|
89
|
-
| [deleteDialogMessage] | `string` | `"Sei sicuro di voler cancellare quest'allegato?"` | no | Sets the confirm dialog message when deleting an IAttachmentDTO. |
|
|
90
|
-
| [noImageSelectedErrorMessage] | `string` | `"Non è possibile selezionare un file che non sia un'immagine"` | no | Has effect only if `[allowOnlyImages]="true"`. Sets the error dialog message when the user tries to upload a file which is not an image. |
|
|
91
|
-
| [wrongTypeSelectedErrorMessage] | `string` | `"Non è possibile caricare il file selezionato."` | no | Sets the error dialog message when user tries to upload a not allowed file . |
|
|
92
|
-
| [videoPreviewErrorMessage] | `string` | `Impossibile aprire l'anteprima di un file video.` | no | Sets the warning dialog merrage when the user tries to open the preview of a video file. |
|
|
93
|
-
| [audioPreviewErrorMessage] | `string` | `Impossibile aprire l'anteprima di un file audio.` | no | Sets the warning dialog merrage when the user tries to open the preview of an audio file. |
|
|
94
|
-
| [isEqpTableMultiLanguage] | `boolean` | `false` | no | It allows you to establish whether the eqp-table containing the list of attachments uses multilanguage or not |
|
|
95
|
-
| [tablePaginatorVisible] | `boolean` | `true` | no | It allows you to establish, in the case of multiple attachments management, whether the table containing the list of attachments must be paged or not (default: true) |
|
|
96
|
-
| [tablePaginatorSize] | `number` | `null` | no | In case of managing multiple attachments, it allows you to establish the default page size for the table containing the list of attachments (default: null) |
|
|
97
|
-
| [showPreview] | `boolean` | `true` | no | It allows you to establish if there is the possibility to view the preview (default: true) |
|
|
98
|
-
| [separatedUploadButtons] | `boolean` | `false` | no | It allows you to establish, if the uploading buttons are separated or included in a menu (default: false) |
|
|
99
|
-
| [singleAttachmentDragAndDrop] | `boolean` | `false` | no | In the case of single attachment management, it allows you to establish if the drag and drop is included for the upload of the file (default: false) |
|
|
100
|
-
| [cropOptions] | `Array<CropOptionEnum>` | `[]` | no | Array of options to include during the crop of a file |
|
|
101
|
-
| [allowedTypes] | `Array<AttachmentType>` | `[ AttachmentType.FILE, AttachmentType.LINK ]` | no | Array to establish what type of attachments can be loaded |
|
|
102
|
-
| [cropDialogClass] | `string` | no | It allows you to establish the css class of the image cropper (It needs the ::ng-deep pseudo-class) |
|
|
103
|
-
|
|
104
|
-
|
|
105
93
|
|
|
106
|
-
|
|
107
|
-
| Output | Event Arguments | Required | Description |
|
|
108
|
-
| ------------- | ------------- | ------------- | ------------- |
|
|
109
|
-
| (localEditedAttachments) | `EventEmitter<Array<IAttachmentDTO>>` | no | Invoked when an IAttachmentDTO is created and added to `attachmentsList` or is deleted. It always return an Array of IAttachmentDTO, even if `[multipleAttachment]="true"`. |
|
|
110
|
-
| (abortAddAttachment) | `EventEmitter<any>` | no | Event triggered by pressing the EXIT button of the file upload modal. |
|
|
111
|
-
| (downloadAttachment) | EventEmitter<IAttachmentDTO> | no | Invoked when the user tries to download an IAttachmentDTO with at least one of the following properties not defined: `"FileDataBase64", "FileContentType", "FileName"`. It returns the user selected object. |
|
|
112
|
-
| (onDeleteAttachment) | `EventEmitter<IAttachmentDTO>` | no | Invoked when an IAttachmentDTO is deleted from `attachmentsList`. It returns the deleted element. |
|
|
94
|
+
#### **Core Configuration**
|
|
113
95
|
|
|
96
|
+
| Input | Type | Default | Description |
|
|
97
|
+
| ---------------------- | -------------------- | ---------------- | ------------------------------------------------------------------------------------------------- |
|
|
98
|
+
| `attachmentsList` | `IAttachmentDTO[]` | `null` | The array of attachments to display and manage. |
|
|
99
|
+
| `singleAttachment` | `IAttachmentDTO` | `null` | An alternative to `attachmentsList`for passing a single attachment object in non-multiple mode. |
|
|
100
|
+
| `multipleAttachment` | `boolean` | `true` | If `true`, manages a list of attachments. If `false`, handles only a single attachment. |
|
|
101
|
+
| `allowedTypes` | `AttachmentType[]` | `[FILE, LINK]` | An array of allowed attachment sources (e.g.,`[1, 2, 3]`for File, Link, and Dropbox). |
|
|
114
102
|
|
|
115
|
-
|
|
103
|
+
---
|
|
116
104
|
|
|
117
|
-
####
|
|
105
|
+
#### **UI & View Configuration**
|
|
118
106
|
|
|
119
|
-
|
|
|
120
|
-
|
|
|
121
|
-
|
|
|
122
|
-
|
|
|
123
|
-
|
|
|
124
|
-
|
|
|
125
|
-
|
|
|
126
|
-
|
|
|
127
|
-
|
|
|
128
|
-
|
|
|
129
|
-
| FileThumbnailBase64 | Contains the base64 string of a thumbnail of the uploaded image. When uploading an attachment it is always null. Usefull to display the inline preview of a previously uploaded image if the full image base64 is too havy (specially loading a long list of IAttachmentDTO). | `string` | - |
|
|
107
|
+
| Input | Type | Default | Description |
|
|
108
|
+
| ---------------------- | ----------- | ------------- | -------------------------------------------------------------------------------- |
|
|
109
|
+
| `viewMode` | `'card'` | `'table'` | `'card'` |
|
|
110
|
+
| `chooseView` | `boolean` | `true` | If `true`, displays the Card/Table view switcher in the header. |
|
|
111
|
+
| `showSummary` | `boolean` | `true` | If `true`, displays the summary block with file count and total size. |
|
|
112
|
+
| `cardSize` | `'small'` | `'medium'` | `'large'` |
|
|
113
|
+
| `customCardWidthPx` | `number` | `200` | Sets the custom card width in pixels when `cardSize`is `'custom'`. |
|
|
114
|
+
| `customCardHeightPx` | `number` | `180` | Sets the custom card height in pixels when `cardSize`is `'custom'`. |
|
|
115
|
+
| `showMatCard` | `boolean` | `true` | If `true`(and in table mode), the component is rendered inside a `mat-card`. |
|
|
116
|
+
| `cropDialogClass` | `string` | `undefined` | Assigns a custom CSS class to the image cropper dialog panel. |
|
|
130
117
|
|
|
131
|
-
|
|
132
|
-
| Property | Description | Type | Examples |
|
|
133
|
-
| ------------- | ------------- | ------------- | ------------- |
|
|
134
|
-
| maxSizeMB | Max size of compressed file expressed in MB. | `number` | - |
|
|
135
|
-
| maxWidthOrHeight | CompressedFile will scale down by ratio to a point that width or height is smaller than maxWidthOrHeight but, automatically reduce the size to smaller than the maximum Canvas size supported by each browser. | `number` | - |
|
|
136
|
-
| useWebWorker | Use multi-thread web worker, fallback to run in main-thread. | `boolean` | - |
|
|
118
|
+
---
|
|
137
119
|
|
|
138
|
-
####
|
|
120
|
+
#### **Functional Configuration**
|
|
139
121
|
|
|
140
|
-
|
|
|
141
|
-
|
|
|
142
|
-
|
|
|
122
|
+
| Input | Type | Default | Description |
|
|
123
|
+
| ------------------------------- | -------------------- | ------------- | --------------------------------------------------------------------------------------------------------- |
|
|
124
|
+
| `maxFileSizeMB` | `number` | `100` | Sets the maximum file size in megabytes for each uploaded file. |
|
|
125
|
+
| `loadMultipleFiles` | `boolean` | `false` | If `true`, allows selecting multiple files at once from the file browser. |
|
|
126
|
+
| `singleAttachmentDragAndDrop` | `boolean` | `false` | If `true`, enables the drag-and-drop UI even in single-attachment mode. |
|
|
127
|
+
| `isDisabled` | `boolean` | `false` | Disables all "add attachment" controls. |
|
|
128
|
+
| `disableAction` | `boolean` | `false` | If `true`, hides the actions column in the table view. |
|
|
129
|
+
| `allowOnlyImages` | `boolean` | `false` | If `true`, restricts file uploads to image types only. |
|
|
130
|
+
| `acceptedFileTypes` | `string` | `undefined` | A string for the `<input>` `accept`attribute (e.g.,`'.pdf,image/*'`). |
|
|
131
|
+
| `showPreview` | `boolean` | `true` | Enables the preview functionality for attachments. |
|
|
132
|
+
| `compressionOptions` | `IOptions` | `{...}` | Options for client-side image compression (`maxSizeMB`,`maxWidthOrHeight`, etc.). |
|
|
133
|
+
| `cropOptions` | `CropOptionEnum[]` | `[]` | Enables specific tools in the image cropper (1: Rotate, 2: Flip). |
|
|
134
|
+
| `separatedUploadButtons` | `boolean` | `false` | If `true`and multiple `allowedTypes`are available, shows separate buttons instead of a dropdown menu. |
|
|
135
|
+
| `getAttachmentEndpoint` | `string` | `null` | API endpoint to fetch full attachment data for previews. |
|
|
136
|
+
| `productionBaseUrl` | `string` | `null` | Base URL for the document viewer (e.g., Google Viewer). |
|
|
143
137
|
|
|
138
|
+
---
|
|
144
139
|
|
|
140
|
+
#### **Labels & Text**
|
|
145
141
|
|
|
146
|
-
|
|
147
|
-
|
|
142
|
+
| Input | Default |
|
|
143
|
+
| --------------------------------- | --------------------------------------------- |
|
|
144
|
+
| `uploadTitle` | `'Upload file'` |
|
|
145
|
+
| `uploadSubtitle` | `'Drag & drop files or click'` |
|
|
146
|
+
| `dropHereLabel` | `'Drop files here'` |
|
|
147
|
+
| `supportedFormatsLabel` | `'Supported formats: JPEG, PNG, PDF...'` |
|
|
148
|
+
| `browseFilesLabel` | `'Browse files'` |
|
|
149
|
+
| `uploadSummaryLabel` | `'Attachments List'` |
|
|
150
|
+
| `filesLabel` | `'Files'` |
|
|
151
|
+
| `totalSizeLabel` | `'Total Size'` |
|
|
152
|
+
| `emptyTableMessage` | `'No data found'` |
|
|
153
|
+
| `emptyStateLabel` | `'No files have been uploaded'` |
|
|
154
|
+
| `openLinkLabel` | `"Open link"` |
|
|
155
|
+
| `addButtonLabel` | `"Add"` |
|
|
156
|
+
| `downloadLabel` | `"Download"` |
|
|
157
|
+
| `deleteLabel` | `"Delete"` |
|
|
158
|
+
| `previewLabel` | `"Preview"` |
|
|
159
|
+
| `confirmLabel` | `"Confirm"` |
|
|
160
|
+
| `abortLabel` | `"Cancel"` |
|
|
161
|
+
| `saveLabel` | `"Save"` |
|
|
162
|
+
| `exitLabel` | `"Exit"` |
|
|
163
|
+
| `fileNameLabel` | `"File name"` |
|
|
164
|
+
| `uploadFileLabel` | `"Upload file"` |
|
|
165
|
+
| `uploadWithDropboxLabel` | `"Upload with Dropbox"` |
|
|
166
|
+
| `cropLabel` | `"Choose the image dimensions"` |
|
|
167
|
+
| `removedLabel` | `'File removed'` |
|
|
168
|
+
| `addedSuccessfullyLabel` | `'file(s) uploaded successfully.'` |
|
|
169
|
+
| `deleteDialogTitle` | `null` |
|
|
170
|
+
| `deleteDialogMessage` | `'Are you sure you want to delete...'` |
|
|
171
|
+
| `noImageSelectedErrorMessage` | `'You cannot select a file that is not...'` |
|
|
172
|
+
| `wrongTypeSelectedErrorMessage` | `'The selected file cannot be uploaded.'` |
|
|
173
|
+
| `videoPreviewErrorMessage` | `'Cannot open a preview of a video file.'` |
|
|
174
|
+
| `audioPreviewErrorMessage` | `'Cannot open a preview of an audio file.'` |
|
|
175
|
+
| `flipHorinzontalLabel` | `'Flip horizontally'` |
|
|
176
|
+
| `flipVerticalLabel` | `'Flip vertically'` |
|
|
177
|
+
| `rotateRightLabel` | `'Rotate right'` |
|
|
178
|
+
| `rotateLeftLabel` | `'Rotate left'` |
|
|
179
|
+
| `eqpTableSearchText` | `'Search'` |
|
|
180
|
+
| `downloadTooltipPosition` | `'below'` |
|
|
181
|
+
|
|
182
|
+
### Outputs
|
|
148
183
|
|
|
149
|
-
|
|
150
|
-
|
|
184
|
+
| Output | Event Arguments | Description |
|
|
185
|
+
| -------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
|
|
186
|
+
| **`(localEditedAttachments)`** | `IAttachmentDTO[]` | Emits the complete, updated list of attachments whenever a file/link is added or removed. This is the primary output to listen to. |
|
|
187
|
+
| `(downloadAttachment)` | `IAttachmentDTO` | Triggered on a download attempt for an attachment missing its `FileDataBase64`, allowing the parent component to fetch the data. |
|
|
188
|
+
| `(onDeleteAttachment)` | `IAttachmentDTO` | Emits the attachment object just before it is removed from the list. |
|
|
189
|
+
| `(abortAddAttachment)` | `any` | Fired when the user cancels an action from a modal dialog (e.g., the crop dialog). |
|
|
151
190
|
|
|
152
|
-
|
|
153
|
-
File upload modal has been removed. So when using ViewChild, use addFile() function instead of openModalAddAttachment().
|
|
191
|
+
### Data Models
|
|
154
192
|
|
|
193
|
+
#### `IAttachmentDTO` Interface
|
|
155
194
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
195
|
+
| Property | Type | Description |
|
|
196
|
+
| ----------------------- | ------------------- | ------------------------------------------------------ |
|
|
197
|
+
| `ID` | `number \| string` | Unique ID of the attachment. |
|
|
198
|
+
| `FileName` | `string` | Name of the file or link. |
|
|
199
|
+
| `FilePath` | `string` | Path of the link or the file on the server. |
|
|
200
|
+
| `AttachmentType` | `AttachmentType` | The type of attachment (1: FILE, 2: LINK, 3: DROPBOX). |
|
|
201
|
+
| `FileDataBase64` | `string` | The base64 content of the file. |
|
|
202
|
+
| `FileSize` | `number` | The size of the file in bytes. |
|
|
203
|
+
| `FileContentType` | `string` | The mime type of the file (e.g.,`image/png`). |
|
|
204
|
+
| `IsImage` | `boolean` | `true`if the attachment is an image. |
|
|
205
|
+
| `FileThumbnailBase64` | `string` | The base64 content of a low-resolution thumbnail. |
|
|
206
|
+
| `isUploading` | `boolean` | (Internal State)`true`during the upload process. |
|
|
207
|
+
| `uploadError` | `boolean` | (Internal State)`true`if the upload failed. |
|
|
208
|
+
|
|
209
|
+
## Use Cases
|
|
210
|
+
|
|
211
|
+
### Case 1: Single Image Upload
|
|
212
|
+
|
|
213
|
+
A configuration for uploading a single image, with drag-and-drop and the image cropper enabled.
|
|
214
|
+
|
|
215
|
+
**HTML**
|
|
216
|
+
|
|
217
|
+
```
|
|
218
|
+
<eqp-attachments
|
|
219
|
+
[multipleAttachment]="false"
|
|
220
|
+
[attachmentsList]="singleImage"
|
|
221
|
+
[singleAttachmentDragAndDrop]="true"
|
|
222
|
+
[allowOnlyImages]="true"
|
|
223
|
+
[cropOptions]="[1, 2]"
|
|
224
|
+
[maxFileSizeMB]="10"
|
|
225
|
+
(localEditedAttachments)="onAttachmentsChange($event)">
|
|
166
226
|
</eqp-attachments>
|
|
167
227
|
```
|
|
168
228
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
viewAttachment(event) {
|
|
185
|
-
// TODO
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
onDeleteAttachment(event) {
|
|
189
|
-
// TODO
|
|
190
|
-
}
|
|
229
|
+
**TypeScript**
|
|
230
|
+
|
|
231
|
+
```
|
|
232
|
+
import { IAttachmentDTO } from '@eqproject/eqp-attachments';
|
|
233
|
+
|
|
234
|
+
export class MyComponent {
|
|
235
|
+
singleImage: IAttachmentDTO[] = [];
|
|
236
|
+
|
|
237
|
+
onAttachmentsChange(updatedList: IAttachmentDTO[]) {
|
|
238
|
+
// In single mode, the list will contain 0 or 1 item
|
|
239
|
+
this.singleImage = updatedList;
|
|
240
|
+
}
|
|
241
|
+
}
|
|
191
242
|
```
|
|
192
243
|
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
244
|
+
### Case 2: Multiple Attachments Management
|
|
245
|
+
|
|
246
|
+
A full-featured configuration for managing multiple types of attachments, starting in `card` view and allowing the user to switch to `table` view.
|
|
247
|
+
|
|
248
|
+
**HTML**
|
|
249
|
+
|
|
250
|
+
```
|
|
251
|
+
<eqp-attachments
|
|
252
|
+
[multipleAttachment]="true"
|
|
253
|
+
[attachmentsList]="documentList"
|
|
254
|
+
[allowedTypes]="[1, 2]"
|
|
255
|
+
[viewMode]="'card'"
|
|
256
|
+
[headerTitle]="'Project Documents'"
|
|
257
|
+
[showSummary]="true"
|
|
258
|
+
(localEditedAttachments)="onAttachmentsChange($event)">
|
|
199
259
|
</eqp-attachments>
|
|
200
260
|
```
|
|
201
261
|
|
|
202
|
-
|
|
203
|
-
|
|
262
|
+
**TypeScript**
|
|
263
|
+
|
|
264
|
+
```
|
|
265
|
+
import { IAttachmentDTO, AttachmentType } from '@eqproject/eqp-attachments';
|
|
266
|
+
|
|
267
|
+
export class MyComponent {
|
|
268
|
+
documentList: IAttachmentDTO[] = [
|
|
204
269
|
{
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
FileDataBase64: "iVBORw0KGgoAAAANSUhEUgAAAK[...]XSNgP0pGR02YAAAAASUVORK5CYII="
|
|
270
|
+
ID: 101,
|
|
271
|
+
IsImage: false,
|
|
272
|
+
AttachmentType: AttachmentType.FILE,
|
|
273
|
+
FileName: "Final Report.pdf",
|
|
274
|
+
FileExtension: "pdf",
|
|
275
|
+
FileSize: 1200000 // 1.2 MB
|
|
212
276
|
},
|
|
213
277
|
{
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
278
|
+
ID: 102,
|
|
279
|
+
IsImage: false,
|
|
280
|
+
AttachmentType: AttachmentType.LINK,
|
|
281
|
+
FileName: "GitHub Repository",
|
|
282
|
+
FilePath: "https://github.com/...",
|
|
219
283
|
},
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
viewAttachment(event) {
|
|
227
|
-
// TODO
|
|
228
|
-
}
|
|
284
|
+
];
|
|
285
|
+
|
|
286
|
+
onAttachmentsChange(updatedList: IAttachmentDTO[]) {
|
|
287
|
+
this.documentList = updatedList;
|
|
288
|
+
}
|
|
289
|
+
}
|
|
229
290
|
```
|
|
230
291
|
|
|
231
292
|
## Credits
|
|
232
|
-
|
|
293
|
+
|
|
294
|
+
This library has been developed by EqProject SRL. For more info, contact: info@eqproject.it
|