@lax-wp/design-system 0.4.8 → 0.4.9
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.
|
@@ -11,6 +11,16 @@ export interface FileUploadResult {
|
|
|
11
11
|
* Union type for file change callback parameter
|
|
12
12
|
*/
|
|
13
13
|
export type FileChangeValue = File | File[] | FileUploadResult | FileUploadResult[] | string | string[] | null;
|
|
14
|
+
/**
|
|
15
|
+
* File upload service interface
|
|
16
|
+
*/
|
|
17
|
+
export interface FileUploadService {
|
|
18
|
+
uploadFileToFileServer: (formData: FormData, queryParams: string) => Promise<{
|
|
19
|
+
fileUrl: string;
|
|
20
|
+
fileName: string;
|
|
21
|
+
}>;
|
|
22
|
+
deleteFileFromFileServer: (fileName: string, queryParams: string) => Promise<void>;
|
|
23
|
+
}
|
|
14
24
|
/**
|
|
15
25
|
* Props for the MultiFileUpload component
|
|
16
26
|
*/
|
|
@@ -47,9 +57,11 @@ export interface MultiFileUploadProps {
|
|
|
47
57
|
getRealFileName?: boolean;
|
|
48
58
|
/** Maximum file size in bytes (default: 50MB) */
|
|
49
59
|
maxSize?: number;
|
|
50
|
-
/**
|
|
60
|
+
/** File upload service for server uploads */
|
|
61
|
+
fileUploadService?: FileUploadService;
|
|
62
|
+
/** Custom upload handler function (alternative to fileUploadService) */
|
|
51
63
|
onUpload?: (files: File[]) => Promise<FileUploadResult[]>;
|
|
52
|
-
/** Custom delete handler function */
|
|
64
|
+
/** Custom delete handler function (called after file deletion) */
|
|
53
65
|
onDelete?: (fileData?: FileUploadResult) => Promise<void>;
|
|
54
66
|
/** Additional CSS classes for the wrapper */
|
|
55
67
|
wrapperClassName?: string;
|
|
@@ -59,20 +71,43 @@ export interface MultiFileUploadProps {
|
|
|
59
71
|
showFileSize?: boolean;
|
|
60
72
|
/** Custom file size formatter */
|
|
61
73
|
formatFileSize?: (size: number) => string;
|
|
74
|
+
/** Custom click to upload text */
|
|
75
|
+
clickToUploadText?: string;
|
|
76
|
+
/** Custom drag and drop text */
|
|
77
|
+
dragAndDropText?: string;
|
|
78
|
+
/** Callback when file size exceeds limit */
|
|
79
|
+
onFileSizeError?: (maxSizeMB: number) => void;
|
|
62
80
|
}
|
|
63
81
|
/**
|
|
64
82
|
* A highly customizable multi-file upload component with drag-and-drop support.
|
|
65
83
|
* Features file validation, base64 conversion, server upload, and comprehensive styling options.
|
|
66
84
|
*
|
|
67
85
|
* @example
|
|
86
|
+
* // Using with fileUploadService (recommended for server uploads)
|
|
68
87
|
* ```tsx
|
|
69
88
|
* <MultiFileUpload
|
|
70
89
|
* id="file-upload"
|
|
71
90
|
* description="Upload your documents"
|
|
72
91
|
* onFileChange={(files) => console.log(files)}
|
|
92
|
+
* toFileServer
|
|
93
|
+
* fileUploadService={attachmentServices}
|
|
73
94
|
* multiple
|
|
74
95
|
* maxSize={10 * 1024 * 1024} // 10MB
|
|
75
96
|
* />
|
|
76
97
|
* ```
|
|
98
|
+
*
|
|
99
|
+
* @example
|
|
100
|
+
* // Using with custom onUpload handler
|
|
101
|
+
* ```tsx
|
|
102
|
+
* <MultiFileUpload
|
|
103
|
+
* id="file-upload"
|
|
104
|
+
* onFileChange={(files) => console.log(files)}
|
|
105
|
+
* toFileServer
|
|
106
|
+
* onUpload={async (files) => {
|
|
107
|
+
* // Custom upload logic
|
|
108
|
+
* return files.map(f => ({ filename: f.name, fileUrl: 'url' }));
|
|
109
|
+
* }}
|
|
110
|
+
* />
|
|
111
|
+
* ```
|
|
77
112
|
*/
|
|
78
113
|
export declare const MultiFileUpload: import("react").ForwardRefExoticComponent<MultiFileUploadProps & import("react").RefAttributes<HTMLDivElement>>;
|