@osmandvc/react-upload-control 0.3.0 → 0.3.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (2) hide show
  1. package/README.md +52 -37
  2. package/package.json +5 -1
package/README.md CHANGED
@@ -101,8 +101,6 @@ The upload handler receives two parameters:
101
101
  1. `files`: An array of `UploadedFile` objects to be uploaded
102
102
  2. `onProgressChange`: A callback function to update the upload progress
103
103
 
104
- The upload handler should return an array of `UploadFileResult` objects, which specify the success, error, and metadata for each file upload. The library will handle the UI updates based on the progress updates and final results you provide.
105
-
106
104
  Here are two examples of implementing an upload handler:
107
105
 
108
106
  ### Example 1: Simple Batch Upload
@@ -299,6 +297,58 @@ function MyFileUpload() {
299
297
  }
300
298
  ```
301
299
 
300
+ ### Understanding UploadFileResult
301
+
302
+ The upload handler must return an array of `UploadFileResult` objects - one for each uploaded file. Here's the structure:
303
+
304
+ ```typescript
305
+ type UploadFileResult = {
306
+ // The ID of the file that was uploaded (must match the original file.id)
307
+ fileId: string;
308
+
309
+ // Whether the upload was successful
310
+ success: boolean;
311
+
312
+ // Optional error information if success is false
313
+ error?: {
314
+ text: string; // Human-readable error message
315
+ code: string; // Error code for programmatic handling
316
+ };
317
+
318
+ // Optional metadata to attach to the file
319
+ metadata?: {
320
+ [key: string]: any; // Any additional data you want to store with the file
321
+ };
322
+ };
323
+ ```
324
+
325
+ Example of a successful upload result:
326
+
327
+ ```typescript
328
+ {
329
+ fileId: "file123",
330
+ success: true,
331
+ metadata: {
332
+ url: "https://example.com/uploads/file123.jpg",
333
+ uploadedAt: "2025-01-02T12:00:00Z",
334
+ size: 1024000
335
+ }
336
+ }
337
+ ```
338
+
339
+ Example of a failed upload result:
340
+
341
+ ```typescript
342
+ {
343
+ fileId: "file456",
344
+ success: false,
345
+ error: {
346
+ text: "File size exceeds server limit",
347
+ code: "SIZE_LIMIT_EXCEEDED"
348
+ }
349
+ }
350
+ ```
351
+
302
352
  ## onDelete Handler
303
353
 
304
354
  The `onDelete` handler is designed to be non-blocking and does not include progress tracking. This is intentional for better UX - since it's primarily used for cleanup when resetting a control with already finished uploads. Users should be able to reset the control immediately without waiting for deletion to complete or being blocked by deletion errors.
@@ -369,41 +419,6 @@ The provider component that manages the upload state and configuration.
369
419
  | disableFileSystem | boolean | false | Disable file system uploads |
370
420
  | className | string | undefined | Additional CSS classes |
371
421
 
372
- ## Understanding the UploadedFile Type
373
-
374
- When implementing your upload handlers, you'll work with the `UploadedFile` type, which provides access to various file properties:
375
-
376
- ```typescript
377
- interface UploadedFile {
378
- id: string; // Unique identifier for the file
379
- file?: File; // The actual File object
380
- name: string; // File name
381
- size?: number; // File size in bytes
382
- type: string; // MIME type
383
- base64Uri?: string; // Base64 encoded file content
384
- previewImg?: {
385
- // Preview image data (for images)
386
- imgBase64Uri: string;
387
- width?: number;
388
- height?: number;
389
- };
390
- uploadStatus: {
391
- // Current upload status
392
- stage?: "IDLE" | "FINISHED" | "FAILED" | "UPLOADING" | "REMOVING";
393
- progress?: number; // Upload progress (0-100)
394
- error?: {
395
- text: string; // Error message
396
- code: string; // Error code
397
- };
398
- };
399
- order?: number; // File order in the list
400
- metadata?: {
401
- // Custom metadata
402
- [key: string]: any;
403
- };
404
- }
405
- ```
406
-
407
422
  ## File Processing
408
423
 
409
424
  React Upload Control supports file processing through the optional [@osmandvc/react-upload-control-processors](https://www.npmjs.com/package/@osmandvc/react-upload-control-processors) package. This enables you to process files before or after upload, with built-in support for PDF manipulation and extensible architecture for custom processors.
package/package.json CHANGED
@@ -1,9 +1,13 @@
1
1
  {
2
2
  "name": "@osmandvc/react-upload-control",
3
- "version": "0.3.0",
3
+ "version": "0.3.1",
4
4
  "description": "A completely free and open-source file uploader library designed for modern react applications. This package focuses on delivering a feature-rich experience while prioritizing an exceptional developer experience (DX). Whether you're handling simple uploads or complex multi-file scenarios, this library offers powerful customization, seamless integration, and a smooth workflow for developers. Perfect for those who need an efficient, flexible, and easy-to-use file uploader solution in their projects.",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "https://github.com/osmandvc/react-upload-control.git"
10
+ },
7
11
  "files": [
8
12
  "dist",
9
13
  "dist/**/*.d.ts",