@ruc-lib/multi-file-upload 2.0.4 → 2.0.6
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 +118 -2
- package/package.json +6 -7
package/README.md
CHANGED
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
RUC Multifile Upload Component basically allows you to select multiple files at a time. The selected file/files will be visible below with 2 features of submit and delete option.
|
|
4
4
|
|
|
5
5
|
# Features
|
|
6
|
-
|
|
6
|
+
When you submit the file you will get a progressbar view which represents the size of the file and the percentage of the file getting submitted so for this individually each file can be submitted to the api given via the input of the selectors.
|
|
7
7
|
|
|
8
8
|
Then second option is delete in which if :
|
|
9
|
-
|
|
9
|
+
If there is a delete api, then it will delete file from there and if there is no any delete api then it will delete the file from the list.
|
|
10
10
|
|
|
11
11
|
# Installation guide
|
|
12
12
|
|
|
@@ -68,3 +68,119 @@ Contributions are welcome! Feel free to open issues or pull requests for any enh
|
|
|
68
68
|
# Acknowledgements
|
|
69
69
|
Thank you for choosing the Multi file upload Component Library. If you have any feedback or suggestions, please let us know!
|
|
70
70
|
|
|
71
|
+
# ruclib-multi-file-upload
|
|
72
|
+
|
|
73
|
+
A powerful and intuitive multi-file upload component for Angular applications. It allows users to select multiple files, view thumbnails for images, and manage uploads with features like individual submission, deletion, and progress tracking.
|
|
74
|
+
|
|
75
|
+
## Installation Guide
|
|
76
|
+
|
|
77
|
+
To use the Multi-File Upload component, you can install the entire RUC library or just this specific component.
|
|
78
|
+
|
|
79
|
+
### Install the Entire Library
|
|
80
|
+
```bash
|
|
81
|
+
npm install @uxpractice/ruc-lib
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### Install Individual Component
|
|
85
|
+
If you only need the Multi-File Upload component:
|
|
86
|
+
```bash
|
|
87
|
+
npm install @ruc-lib/multi-file-upload
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Usage
|
|
91
|
+
|
|
92
|
+
### 1. Import the Module
|
|
93
|
+
In your Angular module file (e.g., `app.module.ts`), import the `RuclibMultiFileUploadModule`:
|
|
94
|
+
|
|
95
|
+
```typescript
|
|
96
|
+
import { RuclibMultiFileUploadModule } from '@ruc-lib/multi-file-upload';
|
|
97
|
+
import { AppComponent } from './app.component';
|
|
98
|
+
import { NgModule } from '@angular/core';
|
|
99
|
+
import { BrowserModule } from '@angular/platform-browser';
|
|
100
|
+
import { HttpClientModule } from '@angular/common/http';
|
|
101
|
+
|
|
102
|
+
@NgModule({
|
|
103
|
+
declarations: [AppComponent],
|
|
104
|
+
imports: [
|
|
105
|
+
BrowserModule,
|
|
106
|
+
HttpClientModule,
|
|
107
|
+
RuclibMultiFileUploadModule
|
|
108
|
+
],
|
|
109
|
+
providers: [],
|
|
110
|
+
bootstrap: [AppComponent]
|
|
111
|
+
})
|
|
112
|
+
export class AppModule {}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
### 2. Use the Component
|
|
116
|
+
In your component's template, use the `<uxp-ruclib-multi-file-upload>` selector and pass the configuration object to the `rucInputData` input.
|
|
117
|
+
|
|
118
|
+
```html
|
|
119
|
+
<uxp-ruclib-multi-file-upload
|
|
120
|
+
[rucInputData]="inputObjectDataMultiFileUpload"
|
|
121
|
+
[customTheme]="'custom-theme'"
|
|
122
|
+
(rucEvent)="handleEvent($event)">
|
|
123
|
+
</uxp-ruclib-multi-file-upload>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
## API Reference
|
|
127
|
+
|
|
128
|
+
### Component Inputs
|
|
129
|
+
|
|
130
|
+
| Input | Type | Description |
|
|
131
|
+
|----------------|--------------------------|--------------------------------------------------|
|
|
132
|
+
| `rucInputData` | `MultifiledefaultConfig` | The main configuration object for the component. |
|
|
133
|
+
| `customTheme` | `string` | An optional CSS class for custom theming. |
|
|
134
|
+
|
|
135
|
+
### Component Outputs
|
|
136
|
+
|
|
137
|
+
| Output | Type | Description |
|
|
138
|
+
|------------|--------------------|--------------------------------------------------------------------------------------------------|
|
|
139
|
+
| `rucEvent` | `EventEmitter<any>` | Emits an event when a file is selected, uploaded, or deleted. The event object contains `eventName` and `eventOutput`. |
|
|
140
|
+
|
|
141
|
+
### `MultifiledefaultConfig`
|
|
142
|
+
This is the main configuration object for the multi-file-upload component.
|
|
143
|
+
|
|
144
|
+
| Property | Type | Description |
|
|
145
|
+
|--------------------|-----------|---------------------------------------------------------------------------------------------------------|
|
|
146
|
+
| `multifileSelection` | `boolean` | If `true`, allows multiple files to be selected at once. |
|
|
147
|
+
| `displayThumbnail` | `boolean` | If `true`, displays a thumbnail preview for image files (PNG format). |
|
|
148
|
+
| `label` | `string` | The label for the file selection button. |
|
|
149
|
+
| `uploadUrl` | `string` | The URL endpoint for uploading files. |
|
|
150
|
+
| `deleteUrl` | `string` | An optional URL endpoint for deleting files. If not provided, files are only removed from the list. |
|
|
151
|
+
|
|
152
|
+
## Example Configuration
|
|
153
|
+
|
|
154
|
+
Here's an example of how to configure the Multi-File Upload component in your component's TypeScript file.
|
|
155
|
+
|
|
156
|
+
```typescript
|
|
157
|
+
import { Component } from '@angular/core';
|
|
158
|
+
import { MultifiledefaultConfig } from '@ruc-lib/multi-file-upload';
|
|
159
|
+
|
|
160
|
+
@Component({
|
|
161
|
+
selector: 'app-root',
|
|
162
|
+
templateUrl: './app.component.html',
|
|
163
|
+
})
|
|
164
|
+
export class AppComponent {
|
|
165
|
+
|
|
166
|
+
inputObjectDataMultiFileUpload: MultifiledefaultConfig = {
|
|
167
|
+
multifileSelection: true,
|
|
168
|
+
displayThumbnail: true,
|
|
169
|
+
label: 'Choose File',
|
|
170
|
+
uploadUrl: '/api/upload',
|
|
171
|
+
deleteUrl: '/api/delete',
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
handleEvent(event: any) {
|
|
175
|
+
console.log(event.eventName, event.eventOutput);
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
## Contribution
|
|
181
|
+
|
|
182
|
+
Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.
|
|
183
|
+
|
|
184
|
+
## Acknowledgements
|
|
185
|
+
|
|
186
|
+
Thank you for choosing the Multi-File Upload Component. If you have any feedback or suggestions, please let us know!
|
package/package.json
CHANGED
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ruc-lib/multi-file-upload",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"peerDependencies": {
|
|
6
|
-
"@angular/
|
|
7
|
-
"@angular/
|
|
8
|
-
"@angular/form": "^17.0.0 || ^16.0.0 || ^15.0.0",
|
|
6
|
+
"@angular/core": ">=15.0.0 <18.0.0",
|
|
7
|
+
"@angular/common": ">=15.0.0 <18.0.0",
|
|
9
8
|
"@angular/material": "^15.2.9 || ^14.0.0 || ^13.0.0",
|
|
10
|
-
"@angular/forms": "15.2.
|
|
11
|
-
"rxjs": "7.8.
|
|
12
|
-
"@angular/platform-browser": "15.2.
|
|
9
|
+
"@angular/forms": "^15.2.9",
|
|
10
|
+
"rxjs": "^7.8.0",
|
|
11
|
+
"@angular/platform-browser": "^15.2.9"
|
|
13
12
|
},
|
|
14
13
|
"dependencies": {
|
|
15
14
|
"tslib": "^2.3.0"
|