img-upload-kit 0.0.0-stage → 2.0.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/CHANGELOG.md +89 -0
- package/LICENSE +21 -0
- package/MIGRATION.md +192 -0
- package/README.md +242 -2
- package/dist/bin.js +1186 -0
- package/dist/bin.js.map +1 -0
- package/dist/blur.cjs +41 -0
- package/dist/blur.cjs.map +1 -0
- package/dist/blur.d.cts +17 -0
- package/dist/blur.d.ts +17 -0
- package/dist/blur.js +41 -0
- package/dist/blur.js.map +1 -0
- package/dist/blurDataUtils-DveBRtqE.d.cts +43 -0
- package/dist/blurDataUtils-yx9Q6HlU.d.ts +43 -0
- package/dist/blurService-D5TpMNji.d.ts +83 -0
- package/dist/blurService-DacwylJx.d.cts +83 -0
- package/dist/chunk-2OVNXHTN.cjs +514 -0
- package/dist/chunk-2OVNXHTN.cjs.map +1 -0
- package/dist/chunk-3ICG2SLL.cjs +135 -0
- package/dist/chunk-3ICG2SLL.cjs.map +1 -0
- package/dist/chunk-4ASFG3KB.js +514 -0
- package/dist/chunk-4ASFG3KB.js.map +1 -0
- package/dist/chunk-AI3JJLSA.js +2370 -0
- package/dist/chunk-AI3JJLSA.js.map +1 -0
- package/dist/chunk-CV23O4YU.js +145 -0
- package/dist/chunk-CV23O4YU.js.map +1 -0
- package/dist/chunk-G7LLSKBV.js +158 -0
- package/dist/chunk-G7LLSKBV.js.map +1 -0
- package/dist/chunk-IB3TEDLR.js +294 -0
- package/dist/chunk-IB3TEDLR.js.map +1 -0
- package/dist/chunk-KJVYWKIG.cjs +158 -0
- package/dist/chunk-KJVYWKIG.cjs.map +1 -0
- package/dist/chunk-NEDBIIE3.cjs +226 -0
- package/dist/chunk-NEDBIIE3.cjs.map +1 -0
- package/dist/chunk-QHU7FUO4.cjs +37 -0
- package/dist/chunk-QHU7FUO4.cjs.map +1 -0
- package/dist/chunk-QQHZJKNA.js +135 -0
- package/dist/chunk-QQHZJKNA.js.map +1 -0
- package/dist/chunk-S2IFAWJK.js +37 -0
- package/dist/chunk-S2IFAWJK.js.map +1 -0
- package/dist/chunk-TT5C7K3Q.js +226 -0
- package/dist/chunk-TT5C7K3Q.js.map +1 -0
- package/dist/chunk-U2TWTEBY.cjs +2370 -0
- package/dist/chunk-U2TWTEBY.cjs.map +1 -0
- package/dist/chunk-WISG74VL.cjs +294 -0
- package/dist/chunk-WISG74VL.cjs.map +1 -0
- package/dist/chunk-YRXXQUDE.cjs +145 -0
- package/dist/chunk-YRXXQUDE.cjs.map +1 -0
- package/dist/cli.cjs +1241 -0
- package/dist/cli.cjs.map +1 -0
- package/dist/cli.d.cts +99 -0
- package/dist/cli.d.ts +99 -0
- package/dist/cli.js +1194 -0
- package/dist/cli.js.map +1 -0
- package/dist/headless.cjs +27 -0
- package/dist/headless.cjs.map +1 -0
- package/dist/headless.d.cts +4 -0
- package/dist/headless.d.ts +4 -0
- package/dist/headless.js +27 -0
- package/dist/headless.js.map +1 -0
- package/dist/index-BIdnqtW8.d.ts +234 -0
- package/dist/index-Brk_uHs6.d.cts +234 -0
- package/dist/index-CPMlaQsC.d.ts +635 -0
- package/dist/index-DHINe-rA.d.cts +635 -0
- package/dist/index.cjs +65 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +43 -0
- package/dist/index.d.ts +43 -0
- package/dist/index.js +65 -0
- package/dist/index.js.map +1 -0
- package/dist/memoryAdapter-Ck0ccZbF.d.cts +25 -0
- package/dist/memoryAdapter-DxEKaG0b.d.ts +25 -0
- package/dist/placeholders-C4ftwaII.d.ts +5 -0
- package/dist/placeholders-x_3rt65M.d.cts +5 -0
- package/dist/react.cjs +3779 -0
- package/dist/react.cjs.map +1 -0
- package/dist/react.d.cts +476 -0
- package/dist/react.d.ts +476 -0
- package/dist/react.js +3779 -0
- package/dist/react.js.map +1 -0
- package/dist/server-handler.cjs +14 -0
- package/dist/server-handler.cjs.map +1 -0
- package/dist/server-handler.d.cts +3 -0
- package/dist/server-handler.d.ts +3 -0
- package/dist/server-handler.js +14 -0
- package/dist/server-handler.js.map +1 -0
- package/dist/server.cjs +1801 -0
- package/dist/server.cjs.map +1 -0
- package/dist/server.d.cts +142 -0
- package/dist/server.d.ts +142 -0
- package/dist/server.js +1801 -0
- package/dist/server.js.map +1 -0
- package/dist/storage.cjs +447 -0
- package/dist/storage.cjs.map +1 -0
- package/dist/storage.d.cts +163 -0
- package/dist/storage.d.ts +163 -0
- package/dist/storage.js +447 -0
- package/dist/storage.js.map +1 -0
- package/dist/styles/animated-image.css +112 -0
- package/dist/styles/dropzone-and-tiles.css +247 -0
- package/dist/styles/modals-and-dock.css +248 -0
- package/dist/styles/primitives.css +197 -0
- package/dist/styles/quality-and-inputs.css +184 -0
- package/dist/styles/tokens.css +123 -0
- package/dist/styles.css +1122 -0
- package/dist/types-BrP-o9nd.d.cts +85 -0
- package/dist/types-sZ3KoFQY.d.ts +85 -0
- package/dist/types-yShGNQnW.d.cts +61 -0
- package/dist/types-yShGNQnW.d.ts +61 -0
- package/dist/upload-C5Trd6Dh.d.cts +154 -0
- package/dist/upload-C5Trd6Dh.d.ts +154 -0
- package/package.json +198 -4
|
@@ -0,0 +1,635 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode, HTMLAttributes, CSSProperties, DragEvent, InputHTMLAttributes, Ref, ReactElement } from 'react';
|
|
3
|
+
import { U as UploadLocale, Q as QualityLevel, m as UploadedImageData, l as UploadPresetName, E as ExplicitOutputFormat, b as ImageDimensions } from './upload-C5Trd6Dh.cjs';
|
|
4
|
+
import { f as BlurPlaceholderType } from './types-yShGNQnW.cjs';
|
|
5
|
+
|
|
6
|
+
interface BlurModalTranslations {
|
|
7
|
+
title: string;
|
|
8
|
+
closeModal: string;
|
|
9
|
+
adjustColor: string;
|
|
10
|
+
clickToSample: string;
|
|
11
|
+
pickColorNote: string;
|
|
12
|
+
enterHexColor: string;
|
|
13
|
+
hexPlaceholder: string;
|
|
14
|
+
enablePenMode: string;
|
|
15
|
+
disablePenMode: string;
|
|
16
|
+
penModeActive: string;
|
|
17
|
+
resetToDetected: string;
|
|
18
|
+
sampled: string;
|
|
19
|
+
livePreview: string;
|
|
20
|
+
showingOriginal: string;
|
|
21
|
+
saved: string;
|
|
22
|
+
accessibility: string;
|
|
23
|
+
altText: string;
|
|
24
|
+
altTextPlaceholder: string;
|
|
25
|
+
saveAndClose: string;
|
|
26
|
+
}
|
|
27
|
+
interface UploadTranslations {
|
|
28
|
+
uploadWindow: string;
|
|
29
|
+
tapToResume: string;
|
|
30
|
+
restoreUploadWindow: string;
|
|
31
|
+
minimize: string;
|
|
32
|
+
minimizeUploader: string;
|
|
33
|
+
close: string;
|
|
34
|
+
editPrefix: string;
|
|
35
|
+
uploadImage: string;
|
|
36
|
+
uploadImages: string;
|
|
37
|
+
noValidImageFiles: string;
|
|
38
|
+
selectedImagesSkipped: string;
|
|
39
|
+
queued: string;
|
|
40
|
+
retrying: string;
|
|
41
|
+
preparingUpload: string;
|
|
42
|
+
uploadFailed: string;
|
|
43
|
+
failedCreatePreview: string;
|
|
44
|
+
failedCreatePreviewFor: string;
|
|
45
|
+
selectAll: string;
|
|
46
|
+
deselectAll: string;
|
|
47
|
+
removeSelected: string;
|
|
48
|
+
uploading: string;
|
|
49
|
+
uploadingCount: string;
|
|
50
|
+
someUploadsFailed: string;
|
|
51
|
+
retryFailedUploads: string;
|
|
52
|
+
needsAltBeforeSave: string;
|
|
53
|
+
networkError: string;
|
|
54
|
+
invalidUploadResponse: string;
|
|
55
|
+
uploadAborted: string;
|
|
56
|
+
uploadStartedLive: string;
|
|
57
|
+
uploadProgressLive: string;
|
|
58
|
+
uploadCompleteLive: string;
|
|
59
|
+
qualityTitle: string;
|
|
60
|
+
qualityLevelAria: string;
|
|
61
|
+
qualitySaved: string;
|
|
62
|
+
qualityRecommended: string;
|
|
63
|
+
selectFilesAria: string;
|
|
64
|
+
selectMoreFilesAria: string;
|
|
65
|
+
selectFolderAria: string;
|
|
66
|
+
dropImagesHere: string;
|
|
67
|
+
releaseToUpload: string;
|
|
68
|
+
dragDropOrChoose: string;
|
|
69
|
+
selectFiles: string;
|
|
70
|
+
selectFolder: string;
|
|
71
|
+
supportsFormats: string;
|
|
72
|
+
maxPerFile: string;
|
|
73
|
+
upToSizeMB: string;
|
|
74
|
+
dropHere: string;
|
|
75
|
+
addMore: string;
|
|
76
|
+
files: string;
|
|
77
|
+
folder: string;
|
|
78
|
+
withoutAltText: string;
|
|
79
|
+
saveImages: string;
|
|
80
|
+
addAltBeforeSaving: string;
|
|
81
|
+
missingDescription: string;
|
|
82
|
+
saveImage: string;
|
|
83
|
+
downloadImage: string;
|
|
84
|
+
dragDropOrClickToUpload: string;
|
|
85
|
+
browseFiles: string;
|
|
86
|
+
image: string;
|
|
87
|
+
processing: string;
|
|
88
|
+
uploadImageAria: string;
|
|
89
|
+
fileInputAria: string;
|
|
90
|
+
uploadingAlt: string;
|
|
91
|
+
previewAlt: string;
|
|
92
|
+
addImageDescription: string;
|
|
93
|
+
describeImagePlaceholder: string;
|
|
94
|
+
characters: string;
|
|
95
|
+
usedForA11ySeo: string;
|
|
96
|
+
cancel: string;
|
|
97
|
+
saveDescription: string;
|
|
98
|
+
selectImageAria: string;
|
|
99
|
+
editAltTextAria: string;
|
|
100
|
+
addAltTextAria: string;
|
|
101
|
+
addDescriptionForA11y: string;
|
|
102
|
+
adjustBlurColorAria: string;
|
|
103
|
+
adjustBlurColorTitle: string;
|
|
104
|
+
removeImageAria: string;
|
|
105
|
+
pasteHint: string;
|
|
106
|
+
cancelUpload: string;
|
|
107
|
+
retryUpload: string;
|
|
108
|
+
minImagesError: string;
|
|
109
|
+
requiredFieldError: string;
|
|
110
|
+
blurModal: BlurModalTranslations;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
type UploadVisualState = 'idle' | 'dragging' | 'uploading' | 'ready' | 'error' | 'disabled';
|
|
114
|
+
type SingleUploadSlot = 'root' | 'label' | 'qualitySelector' | 'dropzone' | 'dropzoneDragging' | 'dropzoneHasImage' | 'dropzoneDisabled' | 'dropzoneError' | 'dropzonePrompt' | 'dropzoneIcon' | 'dropzoneText' | 'dropzoneHint' | 'dropzoneProgress' | 'browseButton' | 'previewWrap' | 'tile' | 'downloadButton' | 'alert' | 'helperText' | 'errorText' | 'commitBar' | 'saveButton';
|
|
115
|
+
type MultiUploadSlot = 'root' | 'header' | 'label' | 'count' | 'bulkActions' | 'bulkButton' | 'bulkDangerButton' | 'qualitySelector' | 'emptyDropzone' | 'emptyDropzoneDragging' | 'emptyDropzoneDisabled' | 'emptyDropzoneError' | 'emptyTitle' | 'emptyHint' | 'emptyActions' | 'primaryButton' | 'secondaryButton' | 'emptySubtext' | 'grid' | 'tile' | 'addMoreTile' | 'addMoreTileDragging' | 'addMoreContent' | 'addMoreActions' | 'alert' | 'helperText' | 'errorText' | 'commitBar' | 'saveButton';
|
|
116
|
+
type SingleUploadClassNames = Partial<Record<SingleUploadSlot, string>>;
|
|
117
|
+
type SingleUploadStyles = Partial<Record<SingleUploadSlot, CSSProperties>>;
|
|
118
|
+
type MultiUploadClassNames = Partial<Record<MultiUploadSlot, string>>;
|
|
119
|
+
type MultiUploadStyles = Partial<Record<MultiUploadSlot, CSSProperties>>;
|
|
120
|
+
interface SingleDropzoneRenderContext {
|
|
121
|
+
state: UploadVisualState;
|
|
122
|
+
isDragging: boolean;
|
|
123
|
+
isUploading: boolean;
|
|
124
|
+
progress: number;
|
|
125
|
+
uploadMessage: string;
|
|
126
|
+
maxSizeMB: number;
|
|
127
|
+
disabled: boolean;
|
|
128
|
+
error?: string;
|
|
129
|
+
qualityLevel: QualityLevel;
|
|
130
|
+
setQualityLevel: (level: QualityLevel) => void;
|
|
131
|
+
openFileDialog: () => void;
|
|
132
|
+
dropzoneProps: HTMLAttributes<HTMLElement>;
|
|
133
|
+
locale: UploadLocale;
|
|
134
|
+
ui: UploadTranslations;
|
|
135
|
+
}
|
|
136
|
+
interface SinglePreviewRenderContext {
|
|
137
|
+
previewUrl: string;
|
|
138
|
+
uploadedData: UploadedImageData | null;
|
|
139
|
+
altText: string;
|
|
140
|
+
blurColor: string;
|
|
141
|
+
blurDataUrl: string;
|
|
142
|
+
isUploading: boolean;
|
|
143
|
+
progress: number;
|
|
144
|
+
uploadMessage: string;
|
|
145
|
+
sizeInfo: {
|
|
146
|
+
original: number;
|
|
147
|
+
optimized: number;
|
|
148
|
+
} | null;
|
|
149
|
+
disabled: boolean;
|
|
150
|
+
openFileDialog: () => void;
|
|
151
|
+
remove: () => void;
|
|
152
|
+
cancel: () => void;
|
|
153
|
+
openAltTextModal: () => void;
|
|
154
|
+
openBlurInspector: () => void;
|
|
155
|
+
download: () => Promise<void>;
|
|
156
|
+
locale: UploadLocale;
|
|
157
|
+
ui: UploadTranslations;
|
|
158
|
+
}
|
|
159
|
+
interface MultiHeaderRenderContext {
|
|
160
|
+
label?: string;
|
|
161
|
+
required: boolean;
|
|
162
|
+
disabled: boolean;
|
|
163
|
+
totalCount: number;
|
|
164
|
+
selectedCount: number;
|
|
165
|
+
uploadingCount: number;
|
|
166
|
+
isUploading: boolean;
|
|
167
|
+
hasFailedUploads: boolean;
|
|
168
|
+
selectAll: () => void;
|
|
169
|
+
clearSelection: () => void;
|
|
170
|
+
removeSelected: () => void;
|
|
171
|
+
retryFailed: () => void;
|
|
172
|
+
locale: UploadLocale;
|
|
173
|
+
ui: UploadTranslations;
|
|
174
|
+
}
|
|
175
|
+
interface MultiEmptyRenderContext {
|
|
176
|
+
state: UploadVisualState;
|
|
177
|
+
isDragging: boolean;
|
|
178
|
+
disabled: boolean;
|
|
179
|
+
allowFolder: boolean;
|
|
180
|
+
maxSizeMB: number;
|
|
181
|
+
maxImages: number;
|
|
182
|
+
error?: string;
|
|
183
|
+
openFileDialog: () => void;
|
|
184
|
+
openFolderDialog: () => void;
|
|
185
|
+
dropzoneProps: HTMLAttributes<HTMLElement>;
|
|
186
|
+
locale: UploadLocale;
|
|
187
|
+
ui: UploadTranslations;
|
|
188
|
+
}
|
|
189
|
+
interface MultiTileRenderContext {
|
|
190
|
+
item: ImagePreview;
|
|
191
|
+
index: number;
|
|
192
|
+
isSelected: boolean;
|
|
193
|
+
disabled: boolean;
|
|
194
|
+
toggleSelect: () => void;
|
|
195
|
+
remove: () => void;
|
|
196
|
+
cancel: () => void;
|
|
197
|
+
retry: () => void;
|
|
198
|
+
openAltTextModal: () => void;
|
|
199
|
+
setAltText: (altText: string) => void;
|
|
200
|
+
setBlurColor: (hex: string) => void;
|
|
201
|
+
locale: UploadLocale;
|
|
202
|
+
ui: UploadTranslations;
|
|
203
|
+
}
|
|
204
|
+
interface MultiAddMoreRenderContext {
|
|
205
|
+
isDragging: boolean;
|
|
206
|
+
disabled: boolean;
|
|
207
|
+
allowFolder: boolean;
|
|
208
|
+
remainingCount: number;
|
|
209
|
+
openFileDialog: () => void;
|
|
210
|
+
openFolderDialog: () => void;
|
|
211
|
+
dropzoneProps: HTMLAttributes<HTMLElement>;
|
|
212
|
+
locale: UploadLocale;
|
|
213
|
+
ui: UploadTranslations;
|
|
214
|
+
}
|
|
215
|
+
interface SingleCustomRenderers {
|
|
216
|
+
/** Replace the empty/uploading dropzone UI with custom JSX while preserving upload & drag behavior */
|
|
217
|
+
renderDropzone?: (ctx: SingleDropzoneRenderContext) => ReactNode;
|
|
218
|
+
/** Replace the uploaded image preview tile with custom JSX while preserving alt/blur modal actions */
|
|
219
|
+
renderPreview?: (ctx: SinglePreviewRenderContext) => ReactNode;
|
|
220
|
+
}
|
|
221
|
+
interface MultiCustomRenderers {
|
|
222
|
+
/** Replace the multi-upload header & bulk action toolbar with custom JSX */
|
|
223
|
+
renderHeader?: (ctx: MultiHeaderRenderContext) => ReactNode;
|
|
224
|
+
/** Replace the initial empty multi-upload dropzone with custom JSX */
|
|
225
|
+
renderEmptyDropzone?: (ctx: MultiEmptyRenderContext) => ReactNode;
|
|
226
|
+
/** Replace individual image preview cards inside the multi-upload grid */
|
|
227
|
+
renderTile?: (ctx: MultiTileRenderContext) => ReactNode;
|
|
228
|
+
/** Replace the trailing "Add More" tile inside the multi-upload grid (return `null` to hide) */
|
|
229
|
+
renderAddMore?: (ctx: MultiAddMoreRenderContext) => ReactNode;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
interface RenderImageProps {
|
|
233
|
+
src: string;
|
|
234
|
+
alt: string;
|
|
235
|
+
className?: string;
|
|
236
|
+
style?: CSSProperties;
|
|
237
|
+
onLoad?: (img: HTMLImageElement | null) => void;
|
|
238
|
+
}
|
|
239
|
+
type CustomImageRenderer = (props: RenderImageProps) => ReactNode;
|
|
240
|
+
interface ClientUploadRequestParams {
|
|
241
|
+
preset?: string;
|
|
242
|
+
folder?: string;
|
|
243
|
+
bucket?: string;
|
|
244
|
+
altText?: string;
|
|
245
|
+
customFilename?: string;
|
|
246
|
+
outputFormat?: ExplicitOutputFormat;
|
|
247
|
+
quality?: number;
|
|
248
|
+
maxDimensions?: ImageDimensions;
|
|
249
|
+
metadata?: Record<string, string>;
|
|
250
|
+
signal?: AbortSignal;
|
|
251
|
+
onUploadProgress?: (percent: number) => void;
|
|
252
|
+
}
|
|
253
|
+
type CustomUploaderFn = (file: File, params: ClientUploadRequestParams) => Promise<UploadedImageData>;
|
|
254
|
+
interface ImageUploadHandle {
|
|
255
|
+
/** Move keyboard focus to the upload dropzone or primary trigger */
|
|
256
|
+
focus: () => void;
|
|
257
|
+
/** Programmatically open the native file picker dialog */
|
|
258
|
+
open: () => void;
|
|
259
|
+
/** Clear the currently selected / uploaded image(s) */
|
|
260
|
+
clear: () => void;
|
|
261
|
+
}
|
|
262
|
+
interface BaseImageUploadProps<TPreset extends string = UploadPresetName> {
|
|
263
|
+
/** Optional named preset (e.g. 'avatar', 'hero', or a custom project preset) */
|
|
264
|
+
preset?: TPreset;
|
|
265
|
+
/** Optional storage folder path (e.g. 'products/42' or 'users/avatars') */
|
|
266
|
+
folder?: string;
|
|
267
|
+
/** Optional target storage bucket */
|
|
268
|
+
bucket?: string;
|
|
269
|
+
/** Arbitrary project-specific metadata sent with the upload (e.g. { entityId: '42', scope: 'catalog' }) */
|
|
270
|
+
metadata?: Record<string, string>;
|
|
271
|
+
/** Server upload endpoint URL (defaults to '/api/upload' when `uploader` is not provided) */
|
|
272
|
+
endpoint?: string;
|
|
273
|
+
/** Custom async upload function (bypasses HTTP `endpoint` when provided) */
|
|
274
|
+
uploader?: CustomUploaderFn;
|
|
275
|
+
/** Additional HTTP headers sent with FormData requests to `endpoint` */
|
|
276
|
+
headers?: Record<string, string>;
|
|
277
|
+
/** Send cookies/credentials with FormData requests (`'same-origin' | 'include' | 'omit'`) */
|
|
278
|
+
withCredentials?: boolean;
|
|
279
|
+
/** UI language ('en' | 'ar'). Auto-detects RTL layout for 'ar'. */
|
|
280
|
+
locale?: UploadLocale;
|
|
281
|
+
/** Optional partial translation overrides */
|
|
282
|
+
translations?: Partial<UploadTranslations>;
|
|
283
|
+
/** Custom image renderer (e.g. wrap Next.js `<Image />` or custom CDN loader) */
|
|
284
|
+
renderImage?: CustomImageRenderer;
|
|
285
|
+
/** Field label */
|
|
286
|
+
label?: string;
|
|
287
|
+
/** Maximum file size in MB (defaults to preset maxSizeMB or 10) */
|
|
288
|
+
maxSizeMB?: number;
|
|
289
|
+
/** Maximum bounding box dimensions sent to the server */
|
|
290
|
+
maxDimensions?: ImageDimensions;
|
|
291
|
+
/** Accepted MIME types string for `<input type="file" accept="..." />` */
|
|
292
|
+
accept?: string;
|
|
293
|
+
/** Disable interactions */
|
|
294
|
+
disabled?: boolean;
|
|
295
|
+
/** External validation error message */
|
|
296
|
+
error?: string;
|
|
297
|
+
/** Helper text displayed below the uploader */
|
|
298
|
+
helperText?: string;
|
|
299
|
+
/** Show required asterisk next to label */
|
|
300
|
+
required?: boolean;
|
|
301
|
+
/** Require non-empty alt text before saving in modal mode (defaults to `true`) */
|
|
302
|
+
requireAltText?: boolean;
|
|
303
|
+
/** Custom wrapper className */
|
|
304
|
+
className?: string;
|
|
305
|
+
/** Custom wrapper inline style */
|
|
306
|
+
style?: CSSProperties;
|
|
307
|
+
/**
|
|
308
|
+
* Strip built-in `iuk-*` visual classes so you can style every slot cleanly
|
|
309
|
+
* with Tailwind CSS, CSS Modules, or custom stylesheets without specificity overrides.
|
|
310
|
+
*/
|
|
311
|
+
unstyled?: boolean;
|
|
312
|
+
/** Fallback blur placeholder style variant */
|
|
313
|
+
blurType?: BlurPlaceholderType;
|
|
314
|
+
/** Show numeric upload percentage inside single dropzone */
|
|
315
|
+
showProgress?: boolean;
|
|
316
|
+
/** Show compression `<QualitySelector />` (defaults to `true`) */
|
|
317
|
+
showQualitySelector?: boolean;
|
|
318
|
+
/** Recommended quality level highlighted in `<QualitySelector />` */
|
|
319
|
+
recommendedQuality?: QualityLevel;
|
|
320
|
+
/** Optional guidance note shown inside `<QualitySelector />` */
|
|
321
|
+
qualityNote?: {
|
|
322
|
+
en: string;
|
|
323
|
+
ar?: string;
|
|
324
|
+
};
|
|
325
|
+
/** Modal title mode ('create' | 'edit') */
|
|
326
|
+
modeVariant?: 'create' | 'edit';
|
|
327
|
+
/** When defined (`true`/`false`), renders inside a minimizable modal dialog */
|
|
328
|
+
isOpen?: boolean;
|
|
329
|
+
/** Close callback for modal mode */
|
|
330
|
+
onClose?: () => void;
|
|
331
|
+
/** Modal header title */
|
|
332
|
+
title?: string;
|
|
333
|
+
/** Explicit output format ('avif' | 'webp' | 'jpeg' | 'png') */
|
|
334
|
+
outputFormat?: ExplicitOutputFormat;
|
|
335
|
+
/** Initial compression quality (1–100) */
|
|
336
|
+
quality?: number;
|
|
337
|
+
/** Custom filename target in storage */
|
|
338
|
+
customFilename?: string;
|
|
339
|
+
/** Camera capture attribute forwarded to `<input type="file" capture={...} />` on mobile devices */
|
|
340
|
+
capture?: 'user' | 'environment';
|
|
341
|
+
/** Enable pasting images from the clipboard (defaults to `true`) */
|
|
342
|
+
enablePaste?: boolean;
|
|
343
|
+
/** Scope for clipboard paste events: focused `'dropzone'` (default) or global `'document'` */
|
|
344
|
+
pasteTarget?: 'dropzone' | 'document';
|
|
345
|
+
/** Form field name; when set, renders a synchronized `<input type="hidden" name={name} />` */
|
|
346
|
+
name?: string;
|
|
347
|
+
/** Serialization format for the hidden form input (`'url'` default for single, `'json'` default for multi) */
|
|
348
|
+
formValue?: 'url' | 'json';
|
|
349
|
+
/** Blur callback invoked when focus leaves the uploader (e.g. for react-hook-form `field.onBlur`) */
|
|
350
|
+
onBlur?: () => void;
|
|
351
|
+
}
|
|
352
|
+
interface SingleImageUploadProps<TPreset extends string = UploadPresetName> extends BaseImageUploadProps<TPreset>, SingleCustomRenderers {
|
|
353
|
+
mode?: 'single';
|
|
354
|
+
value?: string | UploadedImageData | null;
|
|
355
|
+
onChange: (data: UploadedImageData | null) => void;
|
|
356
|
+
initialAltText?: string;
|
|
357
|
+
/** Per-slot custom CSS classes (Tailwind, CSS Modules, BEM) for SingleImageUpload */
|
|
358
|
+
classNames?: SingleUploadClassNames;
|
|
359
|
+
/** Per-slot inline CSS styles for SingleImageUpload */
|
|
360
|
+
styles?: SingleUploadStyles;
|
|
361
|
+
}
|
|
362
|
+
interface MultiImageUploadProps<TPreset extends string = UploadPresetName> extends BaseImageUploadProps<TPreset>, MultiCustomRenderers {
|
|
363
|
+
mode: 'multiple';
|
|
364
|
+
value?: UploadedImageData[];
|
|
365
|
+
onChange: (images: UploadedImageData[]) => void;
|
|
366
|
+
maxImages?: number;
|
|
367
|
+
/** Minimum required uploaded images before form submission / modal save */
|
|
368
|
+
minImages?: number;
|
|
369
|
+
allowFolder?: boolean;
|
|
370
|
+
maxParallelUploads?: number;
|
|
371
|
+
/** Invoked when a batch or retry upload begins */
|
|
372
|
+
onUploadStart?: (files: File[]) => void;
|
|
373
|
+
/** Invoked when a batch or retry upload finishes with the newly uploaded items */
|
|
374
|
+
onUploadComplete?: (results: UploadedImageData[]) => void;
|
|
375
|
+
/** Invoked when an in-flight tile upload is cancelled */
|
|
376
|
+
onUploadCancel?: (id: string) => void;
|
|
377
|
+
/** Per-slot custom CSS classes (Tailwind, CSS Modules, BEM) for MultiImageUpload */
|
|
378
|
+
classNames?: MultiUploadClassNames;
|
|
379
|
+
/** Per-slot inline CSS styles for MultiImageUpload */
|
|
380
|
+
styles?: MultiUploadStyles;
|
|
381
|
+
}
|
|
382
|
+
type ImageUploadProps<TPreset extends string = UploadPresetName> = SingleImageUploadProps<TPreset> | MultiImageUploadProps<TPreset>;
|
|
383
|
+
interface ImagePreview {
|
|
384
|
+
id: string;
|
|
385
|
+
url: string;
|
|
386
|
+
file?: File | null;
|
|
387
|
+
data?: UploadedImageData;
|
|
388
|
+
altText?: string;
|
|
389
|
+
blurColor?: string;
|
|
390
|
+
isUploading?: boolean;
|
|
391
|
+
progress?: number;
|
|
392
|
+
error?: string;
|
|
393
|
+
uploadMessage?: string | null;
|
|
394
|
+
originalSize?: number;
|
|
395
|
+
optimizedSize?: number | null;
|
|
396
|
+
fileName?: string;
|
|
397
|
+
}
|
|
398
|
+
interface UploadStatus {
|
|
399
|
+
message: string;
|
|
400
|
+
progress: number;
|
|
401
|
+
}
|
|
402
|
+
interface SizeInfo {
|
|
403
|
+
original: number;
|
|
404
|
+
optimized: number;
|
|
405
|
+
reduction: number;
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
interface ImageUploadContextValue {
|
|
409
|
+
endpoint: string;
|
|
410
|
+
uploader?: CustomUploaderFn;
|
|
411
|
+
headers?: Record<string, string>;
|
|
412
|
+
withCredentials?: boolean;
|
|
413
|
+
locale?: UploadLocale;
|
|
414
|
+
translations?: Partial<UploadTranslations>;
|
|
415
|
+
renderImage?: CustomImageRenderer;
|
|
416
|
+
storageKeyPrefix: string;
|
|
417
|
+
requireAltText: boolean;
|
|
418
|
+
unstyled: boolean;
|
|
419
|
+
singleClassNames?: SingleUploadClassNames;
|
|
420
|
+
singleStyles?: SingleUploadStyles;
|
|
421
|
+
multiClassNames?: MultiUploadClassNames;
|
|
422
|
+
multiStyles?: MultiUploadStyles;
|
|
423
|
+
}
|
|
424
|
+
interface ImageUploadProviderProps {
|
|
425
|
+
children: ReactNode;
|
|
426
|
+
/** Default server endpoint for uploads (defaults to `'/api/upload'`) */
|
|
427
|
+
endpoint?: string;
|
|
428
|
+
/** Custom async uploader function used across all upload components */
|
|
429
|
+
uploader?: CustomUploaderFn;
|
|
430
|
+
/** Custom HTTP headers attached to FormData upload requests */
|
|
431
|
+
headers?: Record<string, string>;
|
|
432
|
+
/** Send credentials/cookies with XHR/fetch requests */
|
|
433
|
+
withCredentials?: boolean;
|
|
434
|
+
/** Default UI locale (`'en' | 'ar'`) */
|
|
435
|
+
locale?: UploadLocale;
|
|
436
|
+
/** Global translation overrides */
|
|
437
|
+
translations?: Partial<UploadTranslations>;
|
|
438
|
+
/** Custom image component renderer (e.g. for custom CDN or framework `<Image />`) */
|
|
439
|
+
renderImage?: CustomImageRenderer;
|
|
440
|
+
/** Prefix used for sessionStorage metadata cache keys (defaults to `'iuk'`) */
|
|
441
|
+
storageKeyPrefix?: string;
|
|
442
|
+
/** Require alt text before saving in modal mode (defaults to `true`) */
|
|
443
|
+
requireAltText?: boolean;
|
|
444
|
+
/** Globally strip default `iuk-*` classes across all Single/Multi upload components */
|
|
445
|
+
unstyled?: boolean;
|
|
446
|
+
/** Global default slot `classNames` applied to all `<SingleImageUpload />` instances */
|
|
447
|
+
singleClassNames?: SingleUploadClassNames;
|
|
448
|
+
/** Global default slot `styles` applied to all `<SingleImageUpload />` instances */
|
|
449
|
+
singleStyles?: SingleUploadStyles;
|
|
450
|
+
/** Global default slot `classNames` applied to all `<MultiImageUpload />` instances */
|
|
451
|
+
multiClassNames?: MultiUploadClassNames;
|
|
452
|
+
/** Global default slot `styles` applied to all `<MultiImageUpload />` instances */
|
|
453
|
+
multiStyles?: MultiUploadStyles;
|
|
454
|
+
}
|
|
455
|
+
declare function ImageUploadProvider({ children, endpoint, uploader, headers, withCredentials, locale, translations, renderImage, storageKeyPrefix, requireAltText, unstyled, singleClassNames, singleStyles, multiClassNames, multiStyles, }: ImageUploadProviderProps): react.JSX.Element;
|
|
456
|
+
declare function useImageUploadContext(): ImageUploadContextValue;
|
|
457
|
+
|
|
458
|
+
interface UseDragAndDropOptions {
|
|
459
|
+
disabled?: boolean;
|
|
460
|
+
onDrop: (files: FileList) => void;
|
|
461
|
+
}
|
|
462
|
+
declare function useDragAndDrop({ disabled, onDrop }: UseDragAndDropOptions): {
|
|
463
|
+
isDragging: boolean;
|
|
464
|
+
dragHandlers: {
|
|
465
|
+
onDragEnter: (e: DragEvent) => void;
|
|
466
|
+
onDragLeave: (e: DragEvent) => void;
|
|
467
|
+
onDragOver: (e: DragEvent) => void;
|
|
468
|
+
onDrop: (e: DragEvent) => void;
|
|
469
|
+
};
|
|
470
|
+
};
|
|
471
|
+
|
|
472
|
+
interface UseFilePreviewOptions {
|
|
473
|
+
errorLabel?: string;
|
|
474
|
+
}
|
|
475
|
+
declare function useFilePreview(options?: UseFilePreviewOptions): {
|
|
476
|
+
createPreview: (file: File) => Promise<string>;
|
|
477
|
+
revokePreview: (url?: string | null) => void;
|
|
478
|
+
revokeAllPreviews: () => void;
|
|
479
|
+
};
|
|
480
|
+
|
|
481
|
+
interface UploadCallOptions {
|
|
482
|
+
uploadId?: string;
|
|
483
|
+
signal?: AbortSignal;
|
|
484
|
+
}
|
|
485
|
+
interface UseImageUploadOptions {
|
|
486
|
+
preset?: string;
|
|
487
|
+
folder?: string;
|
|
488
|
+
bucket?: string;
|
|
489
|
+
metadata?: Record<string, string>;
|
|
490
|
+
altText?: string;
|
|
491
|
+
outputFormat?: ExplicitOutputFormat;
|
|
492
|
+
/** 1–100. When omitted, the server picks the preset or format default. */
|
|
493
|
+
quality?: number;
|
|
494
|
+
maxDimensions?: ImageDimensions;
|
|
495
|
+
customFilename?: string;
|
|
496
|
+
endpoint?: string;
|
|
497
|
+
uploader?: CustomUploaderFn;
|
|
498
|
+
headers?: Record<string, string>;
|
|
499
|
+
withCredentials?: boolean;
|
|
500
|
+
locale?: UploadLocale;
|
|
501
|
+
onSuccess?: (data: UploadedImageData, file?: File, uploadId?: string) => void;
|
|
502
|
+
onError?: (error: string, file?: File, uploadId?: string) => void;
|
|
503
|
+
onProgress?: (progress: number, message: string, file?: File, uploadId?: string) => void;
|
|
504
|
+
}
|
|
505
|
+
declare function useImageUpload({ preset, folder, bucket, metadata, altText, outputFormat, quality, maxDimensions, customFilename: defaultCustomFilename, endpoint: propEndpoint, uploader: propUploader, headers: propHeaders, withCredentials: propWithCredentials, locale: propLocale, onSuccess, onError, onProgress, }?: UseImageUploadOptions): {
|
|
506
|
+
uploadImage: (file: File, customAltText?: string, overrideCustomFilename?: string, callOptions?: UploadCallOptions) => Promise<UploadedImageData | null>;
|
|
507
|
+
abortUpload: (idOrFile: string | File) => boolean;
|
|
508
|
+
abortAll: () => void;
|
|
509
|
+
isUploading: boolean;
|
|
510
|
+
progress: number;
|
|
511
|
+
uploadMessage: string;
|
|
512
|
+
reset: () => void;
|
|
513
|
+
};
|
|
514
|
+
|
|
515
|
+
interface MultiUploadStats {
|
|
516
|
+
total: number;
|
|
517
|
+
completed: number;
|
|
518
|
+
failed: number;
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
interface HeadlessDropzoneProps extends HTMLAttributes<HTMLElement> {
|
|
522
|
+
[key: `data-${string}`]: unknown;
|
|
523
|
+
}
|
|
524
|
+
interface HeadlessFileInputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
525
|
+
ref: Ref<HTMLInputElement>;
|
|
526
|
+
webkitdirectory?: string;
|
|
527
|
+
directory?: string;
|
|
528
|
+
}
|
|
529
|
+
type UseSingleUploadOptions<TPreset extends string = UploadPresetName> = SingleImageUploadProps<TPreset>;
|
|
530
|
+
interface SingleUploadController {
|
|
531
|
+
state: UploadVisualState;
|
|
532
|
+
preview: string | null;
|
|
533
|
+
uploadedData: UploadedImageData | null;
|
|
534
|
+
altText: string;
|
|
535
|
+
blurColor: string;
|
|
536
|
+
detectedBlurColor: string;
|
|
537
|
+
blurDataUrl: string;
|
|
538
|
+
isDragging: boolean;
|
|
539
|
+
isUploading: boolean;
|
|
540
|
+
progress: number;
|
|
541
|
+
uploadMessage: string;
|
|
542
|
+
error: string;
|
|
543
|
+
sizeInfo: {
|
|
544
|
+
original: number;
|
|
545
|
+
optimized: number;
|
|
546
|
+
} | null;
|
|
547
|
+
qualityLevel: QualityLevel;
|
|
548
|
+
maxSizeMB: number;
|
|
549
|
+
disabled: boolean;
|
|
550
|
+
canDownload: boolean;
|
|
551
|
+
locale: UploadLocale;
|
|
552
|
+
ui: UploadTranslations;
|
|
553
|
+
openFileDialog: () => void;
|
|
554
|
+
selectFiles: (files: FileList) => Promise<void>;
|
|
555
|
+
remove: () => void;
|
|
556
|
+
cancel: () => void;
|
|
557
|
+
cancelUpload: () => void;
|
|
558
|
+
save: () => void;
|
|
559
|
+
download: () => Promise<void>;
|
|
560
|
+
setQualityLevel: (level: QualityLevel) => void;
|
|
561
|
+
setAltText: (altText: string) => void;
|
|
562
|
+
setBlurColor: (hex: string) => void;
|
|
563
|
+
resetBlurColor: () => void;
|
|
564
|
+
getDropzoneProps: (overrides?: HTMLAttributes<HTMLElement>) => HeadlessDropzoneProps;
|
|
565
|
+
getInputProps: (overrides?: InputHTMLAttributes<HTMLInputElement>) => HeadlessFileInputProps;
|
|
566
|
+
}
|
|
567
|
+
type UseMultiUploadOptions<TPreset extends string = UploadPresetName> = Omit<MultiImageUploadProps<TPreset>, 'mode'> & {
|
|
568
|
+
mode?: 'multiple';
|
|
569
|
+
};
|
|
570
|
+
interface MultiUploadController {
|
|
571
|
+
state: UploadVisualState;
|
|
572
|
+
items: ImagePreview[];
|
|
573
|
+
completedItems: ImagePreview[];
|
|
574
|
+
uploadingItems: ImagePreview[];
|
|
575
|
+
selectedIds: Set<string>;
|
|
576
|
+
stats: MultiUploadStats;
|
|
577
|
+
isDragging: boolean;
|
|
578
|
+
isUploading: boolean;
|
|
579
|
+
hasFailedUploads: boolean;
|
|
580
|
+
error: string;
|
|
581
|
+
infoMessage: string;
|
|
582
|
+
qualityLevel: QualityLevel;
|
|
583
|
+
maxSizeMB: number;
|
|
584
|
+
maxImages: number;
|
|
585
|
+
remainingCount: number;
|
|
586
|
+
disabled: boolean;
|
|
587
|
+
locale: UploadLocale;
|
|
588
|
+
ui: UploadTranslations;
|
|
589
|
+
openFileDialog: () => void;
|
|
590
|
+
openFolderDialog: () => void;
|
|
591
|
+
selectFiles: (files: FileList) => Promise<void>;
|
|
592
|
+
remove: (id: string) => void;
|
|
593
|
+
removeSelected: () => void;
|
|
594
|
+
clear: () => void;
|
|
595
|
+
cancel: (id: string) => void;
|
|
596
|
+
cancelUpload: (id: string) => void;
|
|
597
|
+
retry: (id: string) => Promise<void>;
|
|
598
|
+
retryUpload: (id: string) => Promise<void>;
|
|
599
|
+
retryAll: () => Promise<void>;
|
|
600
|
+
toggleSelect: (id: string) => void;
|
|
601
|
+
selectAll: () => void;
|
|
602
|
+
clearSelection: () => void;
|
|
603
|
+
retryFailed: () => Promise<void>;
|
|
604
|
+
save: () => void;
|
|
605
|
+
setQualityLevel: (level: QualityLevel) => void;
|
|
606
|
+
setAltText: (id: string, altText: string) => void;
|
|
607
|
+
setBlurColor: (id: string, hex: string) => void;
|
|
608
|
+
getDropzoneProps: (overrides?: HTMLAttributes<HTMLElement>) => HeadlessDropzoneProps;
|
|
609
|
+
getInputProps: (overrides?: InputHTMLAttributes<HTMLInputElement>) => HeadlessFileInputProps;
|
|
610
|
+
getFolderInputProps: (overrides?: InputHTMLAttributes<HTMLInputElement>) => HeadlessFileInputProps;
|
|
611
|
+
}
|
|
612
|
+
type HeadlessSingleUploadProps<TPreset extends string = UploadPresetName> = UseSingleUploadOptions<TPreset> & {
|
|
613
|
+
children: (controller: SingleUploadController) => ReactNode;
|
|
614
|
+
};
|
|
615
|
+
type HeadlessMultiUploadProps<TPreset extends string = UploadPresetName> = UseMultiUploadOptions<TPreset> & {
|
|
616
|
+
children: (controller: MultiUploadController) => ReactNode;
|
|
617
|
+
};
|
|
618
|
+
|
|
619
|
+
declare function useSingleUpload<TPreset extends string = UploadPresetName>(options: UseSingleUploadOptions<TPreset>): SingleUploadController;
|
|
620
|
+
|
|
621
|
+
declare function useMultiUpload<TPreset extends string = UploadPresetName>(options: UseMultiUploadOptions<TPreset>): MultiUploadController;
|
|
622
|
+
|
|
623
|
+
/**
|
|
624
|
+
* Headless render-prop primitive for single-image upload workflows.
|
|
625
|
+
* Renders zero DOM elements of its own and delegates 100% of markup and styling to `children(controller)`.
|
|
626
|
+
*/
|
|
627
|
+
declare function HeadlessSingleUpload<TPreset extends string = UploadPresetName>(props: HeadlessSingleUploadProps<TPreset>): ReactElement;
|
|
628
|
+
|
|
629
|
+
/**
|
|
630
|
+
* Headless render-prop primitive for multi-image and folder upload workflows.
|
|
631
|
+
* Renders zero DOM elements of its own and delegates 100% of markup and styling to `children(controller)`.
|
|
632
|
+
*/
|
|
633
|
+
declare function HeadlessMultiUpload<TPreset extends string = UploadPresetName>(props: HeadlessMultiUploadProps<TPreset>): ReactElement;
|
|
634
|
+
|
|
635
|
+
export { type SinglePreviewRenderContext as A, type BaseImageUploadProps as B, type CustomImageRenderer as C, type SingleUploadClassNames as D, type SingleUploadController as E, type SingleUploadSlot as F, type SingleUploadStyles as G, type HeadlessDropzoneProps as H, type ImageUploadProps as I, type SizeInfo as J, type UploadCallOptions as K, type UploadStatus as L, type MultiImageUploadProps as M, type UseDragAndDropOptions as N, type UseFilePreviewOptions as O, type UseImageUploadOptions as P, type UseMultiUploadOptions as Q, type RenderImageProps as R, type SingleImageUploadProps as S, type UseSingleUploadOptions as T, type UploadTranslations as U, useDragAndDrop as V, useFilePreview as W, useImageUpload as X, useImageUploadContext as Y, useMultiUpload as Z, useSingleUpload as _, type UploadVisualState as a, type ImageUploadHandle as b, type ImagePreview as c, type BlurModalTranslations as d, type ClientUploadRequestParams as e, type CustomUploaderFn as f, type HeadlessFileInputProps as g, HeadlessMultiUpload as h, type HeadlessMultiUploadProps as i, HeadlessSingleUpload as j, type HeadlessSingleUploadProps as k, type ImageUploadContextValue as l, ImageUploadProvider as m, type ImageUploadProviderProps as n, type MultiAddMoreRenderContext as o, type MultiCustomRenderers as p, type MultiEmptyRenderContext as q, type MultiHeaderRenderContext as r, type MultiTileRenderContext as s, type MultiUploadClassNames as t, type MultiUploadController as u, type MultiUploadSlot as v, type MultiUploadStats as w, type MultiUploadStyles as x, type SingleCustomRenderers as y, type SingleDropzoneRenderContext as z };
|