@praxisui/files-upload 9.0.0-beta.0 → 9.0.0-beta.2

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.
Files changed (2) hide show
  1. package/README.md +87 -269
  2. package/package.json +6 -6
package/README.md CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  title: "Files Upload"
3
3
  slug: "files-upload-overview"
4
- description: "Visao geral do @praxisui/files-upload com upload direto ou presign, validacoes, i18n, persistencia de configuracao e integracao com backend Praxis."
4
+ description: "Public npm documentation for @praxisui/files-upload: direct and presigned uploads, validation, rate-limit feedback, form field integration and runtime authoring."
5
5
  doc_type: "reference"
6
6
  document_kind: "component-overview"
7
7
  component: "files-upload"
@@ -24,7 +24,7 @@ icon: "upload"
24
24
  toc: true
25
25
  sidebar: true
26
26
  search_boost: 0.95
27
- reading_time: 11
27
+ reading_time: 5
28
28
  estimated_setup_time: 20
29
29
  version: "1.0"
30
30
  related_docs:
@@ -36,325 +36,143 @@ keywords:
36
36
  - "presigned upload"
37
37
  - "upload config"
38
38
  - "bulk upload"
39
- last_updated: "2026-03-07"
39
+ last_updated: "2026-06-16"
40
40
  ---
41
41
 
42
- # Praxis Files Upload
42
+ # @praxisui/files-upload
43
43
 
44
- Components and services for integrating file uploads with the Praxis backend. Configuration is provided as JSON and can be edited at runtime through the Settings Panel.
44
+ `@praxisui/files-upload` provides Praxis UI components and services for enterprise upload flows. Install it when a host needs direct upload, presigned upload, bulk execution, client-side validation, quota/rate-limit feedback, dynamic-form integration and runtime-editable upload configuration.
45
45
 
46
- `enableCustomization` is opt-in. Hosts that want runtime settings/configuration must declare `[enableCustomization]="true"` explicitly.
47
-
48
- ## Documentation
49
-
50
- - Official documentation: https://praxisui.dev/components/files-upload
51
- - Quickstart reference app: https://github.com/codexrodrigues/praxis-ui-quickstart
52
- - File management backend: https://github.com/codexrodrigues/praxis-file-management
53
- - Live Praxis UI demo: https://praxis-ui-4e602.web.app
54
- - Recommended for: enterprise upload flows with direct upload, presigned URLs, quotas and operational feedback
55
-
56
- ## When to use
57
-
58
- - Implement file upload with operational feedback and quota-aware UX
59
- - Support direct and presigned upload strategies from the same component set
60
- - Keep upload configuration editable at runtime in Praxis-based hosts
46
+ The component owns the upload UI and Praxis upload client contract. The host owns the backend base URL, authentication, tenant/user headers, storage policy, authorization and final file lifecycle.
61
47
 
62
48
  ## Install
63
49
 
64
50
  ```bash
65
- npm i @praxisui/files-upload@beta
51
+ npm i @praxisui/files-upload@latest
66
52
  ```
67
53
 
68
54
  Peer dependencies:
69
- - `@angular/core` `^21.0.0`
70
- - `@angular/common` `^21.0.0`
71
- - `@angular/forms` `^21.0.0`
72
- - `@angular/router` `^21.0.0`
73
- - `@angular/cdk` `^21.0.0`
74
- - `@angular/material` `^21.0.0`
75
- - `@praxisui/core` `^9.0.0-beta.0`
76
- - `@praxisui/dynamic-fields` `^9.0.0-beta.0`
77
- - `@praxisui/settings-panel` `^9.0.0-beta.0`
78
- - `@praxisui/ai` `^9.0.0-beta.0`
79
- - `rxjs` `~7.8.0`
80
-
81
- ## Component Overview
82
-
83
- Main component selector: `praxis-files-upload`
84
-
85
- Inputs
86
- - `config: FilesUploadConfig | null` UI/limits/options for the upload flow.
87
- - `baseUrl?: string` Required to enable uploads (backend base URL for files API).
88
- - `filesUploadId: string` Required identifier for config persistence.
89
- - `componentInstanceId?: string` Optional instance key when rendering multiple uploads in the same route.
90
- - `displayMode: 'full' | 'compact'` Controls UI density and overlays (default: `full`).
91
- - `enableCustomization: boolean` Enables runtime customization/settings affordances (default: `false`).
92
-
93
- Outputs
94
- - `uploadSuccess: FileMetadata` Emitted per successful single upload.
95
- - `bulkComplete: BulkUploadResponseData` Summary payload for batch uploads.
96
- - `error: ErrorResponse` Error information for failed requests.
97
- - `rateLimited: RateLimitInfo` Emits when 429 is detected (with reset hints).
98
- - `retry | download | copyLink | detailsOpened | detailsClosed: BulkUploadFileResult` Advanced list actions.
99
- - `pendingStateChange: PendingFilesState` Current manual-selection state (`files`, `count`, `hasPending`).
100
- - `proximityChange: boolean` Proximity overlay visibility toggles.
101
-
102
- ## Backend Contract
103
-
104
- `@praxisui/files-upload` consome o contrato final do backend Praxis sem camadas de compatibilidade.
105
-
106
- Success envelope:
107
-
108
- ```json
109
- {
110
- "status": "success",
111
- "message": "Upload realizado com sucesso",
112
- "timestamp": "2026-03-15T11:00:00Z",
113
- "data": {
114
- "originalFilename": "contract.pdf",
115
- "serverFilename": "stored-contract.pdf",
116
- "fileId": "f-123",
117
- "fileSize": 1024,
118
- "mimeType": "application/pdf",
119
- "uploadTimestamp": "2026-03-15T11:00:00Z"
120
- }
121
- }
122
- ```
123
55
 
124
- Bulk success and partial success:
125
-
126
- ```json
127
- {
128
- "status": "partial_success",
129
- "message": "Upload em lote processado com sucesso parcial",
130
- "timestamp": "2026-03-15T11:00:00Z",
131
- "data": {
132
- "totalProcessed": 2,
133
- "totalSuccess": 1,
134
- "totalFailed": 1,
135
- "overallSuccess": false,
136
- "results": [
137
- {
138
- "fileName": "ok.pdf",
139
- "status": "SUCCESS",
140
- "file": {
141
- "id": "f-123",
142
- "fileName": "ok.pdf",
143
- "contentType": "application/pdf",
144
- "fileSize": 1024,
145
- "uploadedAt": "2026-03-15T11:00:00Z",
146
- "tenantId": "tenant-a",
147
- "scanStatus": "PENDING"
148
- }
149
- },
150
- {
151
- "fileName": "bad.exe",
152
- "status": "FAILED",
153
- "error": {
154
- "status": "failure",
155
- "message": "Falha de validacao",
156
- "errors": [
157
- {
158
- "code": "TIPO_ARQUIVO_INVALIDO",
159
- "message": "Tipo de arquivo invalido."
160
- }
161
- ],
162
- "traceId": "trace-1"
163
- }
164
- }
165
- ]
166
- }
167
- }
168
- ```
169
-
170
- Error envelope:
171
-
172
- ```json
173
- {
174
- "status": "failure",
175
- "message": "Falha de validacao",
176
- "errors": [
177
- {
178
- "code": "QUOTA_EXCEEDED",
179
- "message": "Quota reached."
180
- }
181
- ],
182
- "timestamp": "2026-03-15T11:00:00Z",
183
- "traceId": "trace-1"
184
- }
185
- ```
186
-
187
- Leituras feitas pelo componente:
188
- - upload simples: `data`
189
- - upload em lote: `data.results`
190
- - erro: `errors[0]`
191
-
192
- ## Components
56
+ - `@angular/common`, `@angular/core`, `@angular/forms`, `@angular/router`, `@angular/cdk`, `@angular/material` `^21.0.0`
57
+ - `@praxisui/core`, `@praxisui/dynamic-fields`, `@praxisui/settings-panel`, `@praxisui/ai` `^9.0.0-beta.1`
58
+ - `rxjs` `~7.8.0`
193
59
 
194
- ### `PraxisFilesUpload`
60
+ ## Standalone Upload
195
61
 
196
62
  ```ts
197
- import { Component } from "@angular/core";
198
- import { PraxisFilesUpload, FilesUploadConfig, FileMetadata } from "@praxisui/files-upload";
63
+ import { Component } from '@angular/core';
64
+ import {
65
+ PraxisFilesUpload,
66
+ type FileMetadata,
67
+ type FilesUploadConfig,
68
+ } from '@praxisui/files-upload';
199
69
 
200
70
  @Component({
71
+ selector: 'app-upload-host',
201
72
  standalone: true,
202
73
  imports: [PraxisFilesUpload],
203
- template: `<praxis-files-upload filesUploadId="docs-upload" [config]="config" (uploadSuccess)="onSuccess($event)"></praxis-files-upload>`,
74
+ template: `
75
+ <praxis-files-upload
76
+ filesUploadId="documents-upload"
77
+ baseUrl="https://api.example.com/files"
78
+ [config]="config"
79
+ [enableCustomization]="true"
80
+ (uploadSuccess)="onUploadSuccess($event)"
81
+ />
82
+ `,
204
83
  })
205
- export class DemoComponent {
206
- config: FilesUploadConfig = {
207
- strategy: "auto",
208
- ui: { showDropzone: true },
84
+ export class UploadHostComponent {
85
+ readonly config: FilesUploadConfig = {
86
+ strategy: 'auto',
87
+ ui: { accept: ['application/pdf', 'image/png'], showDropzone: true },
88
+ limits: { maxFileSizeBytes: 5 * 1024 * 1024, maxFilesPerBulk: 4 },
89
+ bulk: { parallelUploads: 2, retryCount: 2 },
209
90
  };
210
91
 
211
- onSuccess(file: FileMetadata) {
212
- console.log("uploaded", file);
92
+ onUploadSuccess(file: FileMetadata): void {
93
+ console.log('uploaded', file);
213
94
  }
214
95
  }
215
96
  ```
216
97
 
217
- ### `PdxFilesUploadFieldComponent`
98
+ `strategy: 'auto'` tries presigned upload first and falls back to direct upload when presign fails. The canonical paths remain owned by `FilesApiClient`: `baseUrl/upload`, `baseUrl/bulk` and `baseUrl/upload/presign?filename=...`.
218
99
 
219
- Wrapper for dynamic forms that implements `ControlValueAccessor` and resolves the field value according to the configured `valueMode`.
100
+ ## Dynamic Form Field
220
101
 
221
- ```ts
102
+ Use `pdx-material-files-upload` inside forms when the upload must behave as a `ControlValueAccessor`.
103
+
104
+ ```html
222
105
  <form [formGroup]="form">
223
106
  <pdx-material-files-upload
224
107
  formControlName="attachment"
225
108
  valueMode="metadata[]"
109
+ [baseUrl]="filesBaseUrl"
110
+ [config]="uploadConfig"
226
111
  />
227
112
  </form>
228
113
  ```
229
114
 
230
- Array modes keep a stable shape in both single and bulk uploads:
231
- - `metadata[]` always resolves to `FileMetadata[]`
232
- - `id[]` always resolves to `string[]`
233
-
234
- ## Configuration options
235
-
236
- The editor allows adjusting the config in separated responsibility groups:
237
-
238
- - `ui`: visual presentation and interaction only
239
- - `limits`: client-side validation and local flow guards
240
- - `options`: backend-facing upload options serialized into the request
241
- - `bulk`: execution policy such as retries and parallelism
242
- - `quotas`, `rateLimit`, `messages`: feedback and UX behavior
243
- - `headers`: host-specific contextual header naming
244
-
245
- - `strategy`: `direct` | `presign` | `auto` — `auto` tenta upload pré-assinado e recorre ao modo direto se a etapa de presign falhar.
246
-
247
- ```json
248
- {
249
- "ui": { "accept": ["image/png", "application/pdf"], "showMetadataForm": true },
250
- "limits": { "maxFileSizeBytes": 1048576 },
251
- "bulk": { "parallelUploads": 2, "retryCount": 3 },
252
- "quotas": { "showQuotaWarnings": true },
253
- "rateLimit": { "autoRetryOn429": true, "maxAutoRetry": 2 },
254
- "headers": { "tenantHeader": "X-Tenant-Id" },
255
- "messages": {
256
- "successSingle": "Uploaded",
257
- "errors": { "QUOTA_EXCEEDED": "Quota reached" }
258
- }
259
- }
260
- ```
115
+ `valueMode` can be `metadata`, `id`, `metadata[]` or `id[]`. Array modes keep the same shape for single and bulk uploads.
261
116
 
262
- ## Constraints
117
+ ## Main Inputs And Outputs
263
118
 
264
- Client-side constraints can be enforced via `config` and validated by built-in validators:
119
+ - `config: FilesUploadConfig | null`: upload UI, limits, backend options, bulk policy and messages.
120
+ - `filesUploadId: string`: stable id for persisted upload configuration.
121
+ - `componentInstanceId?: string`: disambiguates repeated instances on the same route.
122
+ - `baseUrl?: string`: backend files API base URL; required to perform uploads.
123
+ - `displayMode: 'full' | 'compact'`: visual density.
124
+ - `context?: Record<string, unknown>`: host context used by metadata-driven surfaces.
125
+ - `enableCustomization: boolean`: opens runtime settings/authoring affordances.
126
+ - `uploadStart`, `uploadProgress`, `uploadSuccess`, `bulkComplete`: upload lifecycle events.
127
+ - `error`, `rateLimited`, `readinessChange`: operational feedback events.
128
+ - `retry`, `download`, `copyLink`, `detailsOpened`, `detailsClosed`: result-list action events.
129
+ - `pendingStateChange`, `proximityChange`: manual selection and drag-proximity state.
265
130
 
266
- - Types: `ui.accept: string[]` (e.g., `['image/png','application/pdf']`)
267
- - Extensions/MIME: `options.allowedExtensions`, `options.acceptMimeTypes`
268
- - Size per file: `limits.maxFileSizeBytes` (bytes) or `options.maxUploadSizeMb`
269
- - Count per batch: `limits.maxFilesPerBulk`
270
- - Total size per batch: `limits.maxBulkSizeBytes`
131
+ ## Configuration
271
132
 
272
- Example (2 files max, 5 MB each, PNG/JPEG only):
133
+ `FilesUploadConfig` separates UI concerns from backend-facing and execution policy:
273
134
 
274
135
  ```ts
275
- const cfg: FilesUploadConfig = {
276
- ui: { accept: ['image/png', 'image/jpeg'], showDropzone: true },
277
- limits: { maxFileSizeBytes: 5 * 1024 * 1024, maxFilesPerBulk: 2 },
136
+ const config: FilesUploadConfig = {
137
+ strategy: 'direct',
138
+ ui: { accept: ['image/png', 'application/pdf'], showMetadataForm: true },
139
+ limits: { maxFileSizeBytes: 1_048_576, maxFilesPerBulk: 3 },
140
+ options: { allowedExtensions: ['png', 'pdf'], acceptMimeTypes: ['image/png', 'application/pdf'] },
141
+ bulk: { parallelUploads: 2, retryCount: 3 },
142
+ quotas: { showQuotaWarnings: true },
143
+ rateLimit: { autoRetryOn429: true, maxAutoRetry: 2 },
144
+ headers: { tenantHeader: 'X-Tenant-Id' },
145
+ messages: { errors: { QUOTA_EXCEEDED: 'Quota reached' } },
278
146
  };
279
147
  ```
280
148
 
281
- ## Services
282
-
283
- - `FilesApiClient` – performs direct or bulk uploads and requests presigned URLs.
284
- - `PresignedUploaderService` – posts files to presigned targets with headers and form fields.
285
- - `ConfigService` – retrieves effective backend configuration with ETag caching scoped by base URL and tenant/user headers.
286
- - `useEffectiveUploadConfig` – Angular composable exposing loading/data/error/context signals and a refetch method.
287
-
288
- ## Validators
289
-
290
- - `acceptValidator`
291
- - `maxFileSizeValidator`
292
- - `maxFilesPerBulkValidator`
293
- - `maxBulkSizeValidator`
294
-
295
- ## Agentic Authoring Contract
296
-
297
- `@praxisui/files-upload` publishes an executable `ComponentAuthoringManifest` through
298
- `PRAXIS_FILES_UPLOAD_AUTHORING_MANIFEST`.
299
-
300
- The contract exposes typed operation families for:
149
+ Built-in validators include `acceptValidator`, `maxFileSizeValidator`, `maxFilesPerBulkValidator` and `maxBulkSizeValidator`.
301
150
 
302
- - accepted types: `accept.types.set`
303
- - single-file and batch limits: `limit.fileSize.set`, `limit.fileCount.set`
304
- - backend upload surfaces: `endpoint.presign.set`, `endpoint.upload.set`
305
- - upload policy: `security.policy.set`
306
- - error message overrides: `message.error.set`
307
- - display mode and UI flags: `display.mode.set`
151
+ ## Services And Host Integration
308
152
 
309
- Endpoint authoring intentionally changes only the canonical `baseUrl` runtime input
310
- and the upload `strategy`. The direct, bulk and presign paths remain fixed as
311
- `baseUrl/upload`, `baseUrl/bulk` and `baseUrl/upload/presign?filename=...` so hosts
312
- do not create parallel endpoint semantics outside `FilesApiClient`.
153
+ - `FilesApiClient`: direct upload, bulk upload and presign requests.
154
+ - `PresignedUploaderService`: posts to presigned targets.
155
+ - `ConfigService`: loads effective backend upload configuration with ETag-aware caching by base URL and contextual headers.
156
+ - `useEffectiveUploadConfig`: signal-based helper for loading, data, error, context and refetch state.
157
+ - `ErrorMapperService`: maps backend error codes into user-facing messages and rate-limit details.
158
+ - `providePraxisFilesUploadI18n(...)`: registers upload texts through the official `@praxisui/core` i18n infrastructure.
313
159
 
314
- Every manifest operation declares its own editable target resolver, ambiguity policy,
315
- preconditions, validators, affected paths, effects and typed submission impact. Upload
316
- limits and accepted types are marked as submission-affecting; endpoint and security
317
- policy edits are marked as remote-binding changes and require confirmation; error
318
- messages are config-only; display changes are visual-only. These categories are the
319
- same metadata projected into `praxis-component-registry-ingestion.json`.
160
+ Provide `FILES_UPLOAD_ERROR_MESSAGES` only when a host needs global error-message overrides.
320
161
 
321
- ## Error handling
162
+ ## Persistence And Authoring
322
163
 
323
- `ErrorMapperService` translates backend error codes from `errors[0]` into user-facing messages and exposes rate limit information.
164
+ The settings editor stores configuration through `ASYNC_CONFIG_STORAGE` with a key derived from the upload component identity. Use a local adapter for local persistence or `ApiConfigStorage` for remote persistence.
324
165
 
325
- Default messages are provided in Portuguese but can be overridden globally by
326
- providing the `FILES_UPLOAD_ERROR_MESSAGES` injection token:
166
+ `PRAXIS_FILES_UPLOAD_AUTHORING_MANIFEST` describes governed AI/tooling operations for accepted types, file and batch limits, upload strategy, endpoint base URL, security policy, display mode and error messages. Endpoint authoring changes the canonical `baseUrl` input and upload `strategy`; it does not create parallel endpoint semantics.
327
167
 
328
- ```ts
329
- { provide: FILES_UPLOAD_ERROR_MESSAGES, useValue: { QUOTA_EXCEEDED: 'Limite atingido' } }
330
- ```
331
-
332
- ## Configuration persistence
333
-
334
- The configuration editor stores settings in `ASYNC_CONFIG_STORAGE`, using the key `files-upload-config:<component_id>`. Provide an async storage implementation (for example, `LocalStorageAsyncAdapter` for local persistence or `ApiConfigStorage` for remote persistence).
335
-
336
- ## Internationalização
168
+ ## Public API Snapshot
337
169
 
338
- `@praxisui/files-upload` usa a infraestrutura oficial de i18n do `@praxisui/core`.
170
+ Main exports include `PraxisFilesUpload`, `PdxFilesUploadFieldComponent`, `FilesUploadConfig`, upload metadata/result types, upload services, validators, i18n helpers, component metadata and `PRAXIS_FILES_UPLOAD_AUTHORING_MANIFEST`.
339
171
 
340
- As chaves internas da lib vivem no namespace `praxis.filesUpload.*` e podem ser registradas com `providePraxisFilesUploadI18n(...)`:
172
+ ## Official Links
341
173
 
342
- ```ts
343
- import { providePraxisFilesUploadI18n } from '@praxisui/files-upload';
344
-
345
- providers: [
346
- providePraxisFilesUploadI18n({
347
- locale: 'en-US',
348
- fallbackLocale: 'pt-BR',
349
- dictionaries: {
350
- 'en-US': {
351
- 'praxis.filesUpload.dropzoneLabel': 'Drag files or',
352
- },
353
- },
354
- }),
355
- ];
356
- ```
357
-
358
- O caminho recomendado para hosts e libs consumidoras e usar esse provider ou a infraestrutura compartilhada do `PraxisI18nService`.
359
-
360
- `FILES_UPLOAD_TEXTS` e `TRANSLATE_LIKE` permanecem exportados apenas como camada transitoria de compatibilidade. Quando usados, eles funcionam como fallback para chaves planas da lib, inclusive chaves novas como `fieldPendingSummary` e overrides legados baseados em `instant(...)` ou `t(...)`. Novo codigo nao deve depender desses tokens, e eles devem ser tratados como legado/deprecado.
174
+ - Documentation: https://praxisui.dev/components/files-upload
175
+ - Live demo: https://praxis-ui-4e602.web.app
176
+ - Quickstart repository: https://github.com/codexrodrigues/praxis-ui-quickstart
177
+ - File management backend: https://github.com/codexrodrigues/praxis-file-management
178
+ - Source and issues: https://github.com/codexrodrigues/praxis-ui-angular
package/package.json CHANGED
@@ -1,18 +1,18 @@
1
1
  {
2
2
  "name": "@praxisui/files-upload",
3
- "version": "9.0.0-beta.0",
3
+ "version": "9.0.0-beta.2",
4
4
  "description": "File upload components and services for Praxis UI with presigned and direct strategies, quotas and rate-limit handling.",
5
5
  "peerDependencies": {
6
6
  "@angular/common": "^21.0.0",
7
7
  "@angular/cdk": "^21.0.0",
8
8
  "@angular/core": "^21.0.0",
9
9
  "@angular/material": "^21.0.0",
10
- "@praxisui/core": "^9.0.0-beta.0",
11
- "@praxisui/dynamic-fields": "^9.0.0-beta.0",
12
- "@praxisui/settings-panel": "^9.0.0-beta.0",
10
+ "@praxisui/core": "^9.0.0-beta.2",
11
+ "@praxisui/dynamic-fields": "^9.0.0-beta.2",
12
+ "@praxisui/settings-panel": "^9.0.0-beta.2",
13
13
  "@angular/forms": "^21.0.0",
14
14
  "@angular/router": "^21.0.0",
15
- "@praxisui/ai": "^9.0.0-beta.0",
15
+ "@praxisui/ai": "^9.0.0-beta.2",
16
16
  "rxjs": "~7.8.0"
17
17
  },
18
18
  "dependencies": {
@@ -24,7 +24,7 @@
24
24
  },
25
25
  "repository": {
26
26
  "type": "git",
27
- "url": "https://github.com/codexrodrigues/praxis-ui-angular"
27
+ "url": "git+https://github.com/codexrodrigues/praxis-ui-angular.git"
28
28
  },
29
29
  "homepage": "https://praxisui.dev",
30
30
  "bugs": {