@aws-amplify/ui-react-storage 3.2.1 → 3.3.1
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/dist/esm/components/FileUploader/FileUploader.mjs +185 -0
- package/dist/esm/components/FileUploader/hooks/useFileUploader/actions.mjs +39 -0
- package/dist/esm/components/FileUploader/hooks/useFileUploader/reducer.mjs +93 -0
- package/dist/esm/components/FileUploader/hooks/useFileUploader/types.mjs +13 -0
- package/dist/esm/components/FileUploader/hooks/useFileUploader/useFileUploader.mjs +62 -0
- package/dist/esm/components/FileUploader/hooks/useUploadFiles/useUploadFiles.mjs +79 -0
- package/dist/esm/components/FileUploader/types.mjs +11 -0
- package/dist/esm/components/FileUploader/ui/Container/Container.mjs +8 -0
- package/dist/esm/components/FileUploader/ui/DropZone/DropZone.mjs +16 -0
- package/dist/esm/components/FileUploader/ui/FileList/FileControl.mjs +23 -0
- package/dist/esm/components/FileUploader/ui/FileList/FileDetails.mjs +12 -0
- package/dist/esm/components/FileUploader/ui/FileList/FileList.mjs +44 -0
- package/dist/esm/components/FileUploader/ui/FileList/FileRemoveButton.mjs +12 -0
- package/dist/esm/components/FileUploader/ui/FileList/FileStatusMessage.mjs +28 -0
- package/dist/esm/components/FileUploader/ui/FileList/FileThumbnail.mjs +12 -0
- package/dist/esm/components/FileUploader/ui/FileListFooter/FileListFooter.mjs +13 -0
- package/dist/esm/components/FileUploader/ui/FileListHeader/FileListHeader.mjs +14 -0
- package/dist/esm/components/FileUploader/ui/FilePicker/FilePicker.mjs +9 -0
- package/dist/esm/components/FileUploader/utils/checkMaxFileSize.mjs +12 -0
- package/dist/esm/components/FileUploader/utils/displayText.mjs +39 -0
- package/dist/esm/components/FileUploader/utils/filterAllowedFiles.mjs +27 -0
- package/dist/esm/components/FileUploader/utils/getInput.mjs +39 -0
- package/dist/esm/components/FileUploader/utils/resolveFile.mjs +20 -0
- package/dist/esm/components/FileUploader/utils/uploadFile.mjs +26 -0
- package/dist/esm/components/StorageManager/StorageManager.mjs +4 -0
- package/dist/esm/index.mjs +1 -0
- package/dist/esm/version.mjs +1 -1
- package/dist/index.js +721 -7
- package/dist/styles.css +250 -0
- package/dist/types/components/FileUploader/FileUploader.d.ts +15 -0
- package/dist/types/components/FileUploader/hooks/index.d.ts +2 -0
- package/dist/types/components/FileUploader/hooks/useFileUploader/actions.d.ts +22 -0
- package/dist/types/components/FileUploader/hooks/useFileUploader/index.d.ts +1 -0
- package/dist/types/components/FileUploader/hooks/useFileUploader/reducer.d.ts +2 -0
- package/dist/types/components/FileUploader/hooks/useFileUploader/types.d.ts +50 -0
- package/dist/types/components/FileUploader/hooks/useFileUploader/useFileUploader.d.ts +35 -0
- package/dist/types/components/FileUploader/hooks/useUploadFiles/index.d.ts +1 -0
- package/dist/types/components/FileUploader/hooks/useUploadFiles/useUploadFiles.d.ts +12 -0
- package/dist/types/components/FileUploader/index.d.ts +3 -0
- package/dist/types/components/FileUploader/types.d.ts +129 -0
- package/dist/types/components/FileUploader/ui/Container/Container.d.ts +6 -0
- package/dist/types/components/FileUploader/ui/Container/index.d.ts +1 -0
- package/dist/types/components/FileUploader/ui/DropZone/DropZone.d.ts +3 -0
- package/dist/types/components/FileUploader/ui/DropZone/index.d.ts +2 -0
- package/dist/types/components/FileUploader/ui/DropZone/types.d.ts +13 -0
- package/dist/types/components/FileUploader/ui/FileList/FileControl.d.ts +3 -0
- package/dist/types/components/FileUploader/ui/FileList/FileDetails.d.ts +3 -0
- package/dist/types/components/FileUploader/ui/FileList/FileList.d.ts +3 -0
- package/dist/types/components/FileUploader/ui/FileList/FileRemoveButton.d.ts +3 -0
- package/dist/types/components/FileUploader/ui/FileList/FileStatusMessage.d.ts +3 -0
- package/dist/types/components/FileUploader/ui/FileList/FileThumbnail.d.ts +3 -0
- package/dist/types/components/FileUploader/ui/FileList/index.d.ts +2 -0
- package/dist/types/components/FileUploader/ui/FileList/types.d.ts +51 -0
- package/dist/types/components/FileUploader/ui/FileListFooter/FileListFooter.d.ts +9 -0
- package/dist/types/components/FileUploader/ui/FileListFooter/index.d.ts +1 -0
- package/dist/types/components/FileUploader/ui/FileListHeader/FileListHeader.d.ts +10 -0
- package/dist/types/components/FileUploader/ui/FileListHeader/index.d.ts +1 -0
- package/dist/types/components/FileUploader/ui/FilePicker/FilePicker.d.ts +4 -0
- package/dist/types/components/FileUploader/ui/FilePicker/index.d.ts +1 -0
- package/dist/types/components/FileUploader/ui/index.d.ts +6 -0
- package/dist/types/components/FileUploader/utils/checkMaxFileSize.d.ts +5 -0
- package/dist/types/components/FileUploader/utils/displayText.d.ts +22 -0
- package/dist/types/components/FileUploader/utils/filterAllowedFiles.d.ts +1 -0
- package/dist/types/components/FileUploader/utils/getInput.d.ts +17 -0
- package/dist/types/components/FileUploader/utils/index.d.ts +5 -0
- package/dist/types/components/FileUploader/utils/resolveFile.d.ts +9 -0
- package/dist/types/components/FileUploader/utils/uploadFile.d.ts +32 -0
- package/dist/types/components/index.d.ts +1 -0
- package/dist/types/index.d.ts +1 -1
- package/dist/types/version.d.ts +1 -1
- package/package.json +17 -5
package/dist/styles.css
CHANGED
|
@@ -83,6 +83,35 @@
|
|
|
83
83
|
--amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs);
|
|
84
84
|
--amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs);
|
|
85
85
|
--amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small);
|
|
86
|
+
--amplify-components-avatar-color: var(--amplify-colors-font-tertiary);
|
|
87
|
+
--amplify-components-avatar-line-height: 1;
|
|
88
|
+
--amplify-components-avatar-font-weight: var(--amplify-font-weights-semibold);
|
|
89
|
+
--amplify-components-avatar-font-size: var(--amplify-font-sizes-small);
|
|
90
|
+
--amplify-components-avatar-text-align: center;
|
|
91
|
+
--amplify-components-avatar-width: var(--amplify-font-sizes-xxl);
|
|
92
|
+
--amplify-components-avatar-height: var(--amplify-font-sizes-xxl);
|
|
93
|
+
--amplify-components-avatar-background-color: var(--amplify-colors-background-tertiary);
|
|
94
|
+
--amplify-components-avatar-border-radius: 100%;
|
|
95
|
+
--amplify-components-avatar-border-color: var(--amplify-colors-border-primary);
|
|
96
|
+
--amplify-components-avatar-border-width: var(--amplify-border-widths-medium);
|
|
97
|
+
--amplify-components-avatar-info-color: var(--amplify-colors-font-info);
|
|
98
|
+
--amplify-components-avatar-info-background-color: var(--amplify-colors-background-info);
|
|
99
|
+
--amplify-components-avatar-info-border-color: var(--amplify-colors-border-info);
|
|
100
|
+
--amplify-components-avatar-warning-color: var(--amplify-colors-font-warning);
|
|
101
|
+
--amplify-components-avatar-warning-background-color: var(--amplify-colors-background-warning);
|
|
102
|
+
--amplify-components-avatar-warning-border-color: var(--amplify-colors-border-warning);
|
|
103
|
+
--amplify-components-avatar-success-color: var(--amplify-colors-font-success);
|
|
104
|
+
--amplify-components-avatar-success-background-color: var(--amplify-colors-background-success);
|
|
105
|
+
--amplify-components-avatar-success-border-color: var(--amplify-colors-border-success);
|
|
106
|
+
--amplify-components-avatar-error-color: var(--amplify-colors-font-error);
|
|
107
|
+
--amplify-components-avatar-error-background-color: var(--amplify-colors-background-error);
|
|
108
|
+
--amplify-components-avatar-error-border-color: var(--amplify-colors-border-error);
|
|
109
|
+
--amplify-components-avatar-small-font-size: var(--amplify-font-sizes-xs);
|
|
110
|
+
--amplify-components-avatar-small-width: var(--amplify-font-sizes-xl);
|
|
111
|
+
--amplify-components-avatar-small-height: var(--amplify-font-sizes-xl);
|
|
112
|
+
--amplify-components-avatar-large-font-size: var(--amplify-font-sizes-medium);
|
|
113
|
+
--amplify-components-avatar-large-width: var(--amplify-font-sizes-xxxl);
|
|
114
|
+
--amplify-components-avatar-large-height: var(--amplify-font-sizes-xxxl);
|
|
86
115
|
--amplify-components-badge-color: var(--amplify-colors-font-primary);
|
|
87
116
|
--amplify-components-badge-line-height: 1;
|
|
88
117
|
--amplify-components-badge-font-weight: var(--amplify-font-weights-semibold);
|
|
@@ -3421,6 +3450,118 @@ strong.amplify-text {
|
|
|
3421
3450
|
gap: var(--amplify-space-medium);
|
|
3422
3451
|
}
|
|
3423
3452
|
|
|
3453
|
+
.amplify-avatar {
|
|
3454
|
+
--avatar-color: var(--amplify-components-avatar-color);
|
|
3455
|
+
--avatar-background-color: var(--amplify-components-avatar-background-color);
|
|
3456
|
+
--avatar-filled-background-color: var(--amplify-components-avatar-color);
|
|
3457
|
+
--avatar-filled-color: var(--amplify-components-avatar-background-color);
|
|
3458
|
+
--avatar-border-color: var(--amplify-components-avatar-border-color);
|
|
3459
|
+
--avatar-size: var(--amplify-components-avatar-width);
|
|
3460
|
+
--amplify-components-icon-height: 100%;
|
|
3461
|
+
display: inline-flex;
|
|
3462
|
+
align-items: center;
|
|
3463
|
+
justify-content: center;
|
|
3464
|
+
color: var(--avatar-color);
|
|
3465
|
+
background-color: var(--avatar-background-color);
|
|
3466
|
+
font-weight: var(--amplify-components-avatar-font-weight);
|
|
3467
|
+
font-size: var(--amplify-components-avatar-font-size);
|
|
3468
|
+
width: var(--amplify-components-avatar-width);
|
|
3469
|
+
height: var(--amplify-components-avatar-height);
|
|
3470
|
+
overflow: hidden;
|
|
3471
|
+
border-radius: var(--amplify-components-avatar-border-radius);
|
|
3472
|
+
}
|
|
3473
|
+
.amplify-avatar--filled {
|
|
3474
|
+
background-color: var(--avatar-filled-background-color);
|
|
3475
|
+
color: var(--avatar-filled-color);
|
|
3476
|
+
}
|
|
3477
|
+
.amplify-avatar--outlined {
|
|
3478
|
+
border-width: var(--amplify-components-avatar-border-width);
|
|
3479
|
+
border-style: solid;
|
|
3480
|
+
padding: var(--amplify-components-avatar-border-width);
|
|
3481
|
+
border-color: var(--avatar-border-color);
|
|
3482
|
+
background-color: transparent;
|
|
3483
|
+
color: var(--avatar-color);
|
|
3484
|
+
}
|
|
3485
|
+
.amplify-avatar--small {
|
|
3486
|
+
--avatar-size: var(--amplify-components-avatar-small-width);
|
|
3487
|
+
width: var(--amplify-components-avatar-small-width);
|
|
3488
|
+
height: var(--amplify-components-avatar-small-height);
|
|
3489
|
+
font-size: var(--amplify-components-avatar-small-font-size);
|
|
3490
|
+
}
|
|
3491
|
+
.amplify-avatar--large {
|
|
3492
|
+
--avatar-size: var(--amplify-components-avatar-large-width);
|
|
3493
|
+
width: var(--amplify-components-avatar-large-width);
|
|
3494
|
+
height: var(--amplify-components-avatar-large-height);
|
|
3495
|
+
font-size: var(--amplify-components-avatar-large-font-size);
|
|
3496
|
+
}
|
|
3497
|
+
.amplify-avatar--warning {
|
|
3498
|
+
--avatar-border-color: var(
|
|
3499
|
+
--amplify-components-avatar-warning-border-color
|
|
3500
|
+
);
|
|
3501
|
+
--avatar-background-color: var(
|
|
3502
|
+
--amplify-components-avatar-warning-background-color
|
|
3503
|
+
);
|
|
3504
|
+
--avatar-color: var(--amplify-components-avatar-warning-color);
|
|
3505
|
+
--avatar-filled-background-color: var(
|
|
3506
|
+
--amplify-components-avatar-warning-color
|
|
3507
|
+
);
|
|
3508
|
+
--avatar-filled-color: var(
|
|
3509
|
+
--amplify-components-avatar-warning-background-color
|
|
3510
|
+
);
|
|
3511
|
+
}
|
|
3512
|
+
.amplify-avatar--error {
|
|
3513
|
+
--avatar-border-color: var(--amplify-components-avatar-error-border-color);
|
|
3514
|
+
--avatar-background-color: var(
|
|
3515
|
+
--amplify-components-avatar-error-background-color
|
|
3516
|
+
);
|
|
3517
|
+
--avatar-color: var(--amplify-components-avatar-error-color);
|
|
3518
|
+
--avatar-filled-background-color: var(
|
|
3519
|
+
--amplify-components-avatar-error-color
|
|
3520
|
+
);
|
|
3521
|
+
--avatar-filled-color: var(
|
|
3522
|
+
--amplify-components-avatar-error-background-color
|
|
3523
|
+
);
|
|
3524
|
+
}
|
|
3525
|
+
.amplify-avatar--info {
|
|
3526
|
+
--avatar-border-color: var(--amplify-components-avatar-info-border-color);
|
|
3527
|
+
--avatar-background-color: var(
|
|
3528
|
+
--amplify-components-avatar-info-background-color
|
|
3529
|
+
);
|
|
3530
|
+
--avatar-color: var(--amplify-components-avatar-info-color);
|
|
3531
|
+
--avatar-filled-background-color: var(
|
|
3532
|
+
--amplify-components-avatar-info-color
|
|
3533
|
+
);
|
|
3534
|
+
--avatar-filled-color: var(
|
|
3535
|
+
--amplify-components-avatar-info-background-color
|
|
3536
|
+
);
|
|
3537
|
+
}
|
|
3538
|
+
.amplify-avatar--success {
|
|
3539
|
+
--avatar-border-color: var(
|
|
3540
|
+
--amplify-components-avatar-success-border-color
|
|
3541
|
+
);
|
|
3542
|
+
--avatar-background-color: var(
|
|
3543
|
+
--amplify-components-avatar-success-background-color
|
|
3544
|
+
);
|
|
3545
|
+
--avatar-color: var(--amplify-components-avatar-success-color);
|
|
3546
|
+
--avatar-filled-background-color: var(
|
|
3547
|
+
--amplify-components-avatar-success-color
|
|
3548
|
+
);
|
|
3549
|
+
--avatar-filled-color: var(
|
|
3550
|
+
--amplify-components-avatar-success-background-color
|
|
3551
|
+
);
|
|
3552
|
+
}
|
|
3553
|
+
.amplify-avatar__icon {
|
|
3554
|
+
display: flex;
|
|
3555
|
+
font-size: calc(var(--avatar-size) * 0.6);
|
|
3556
|
+
}
|
|
3557
|
+
.amplify-avatar__image {
|
|
3558
|
+
width: 100%;
|
|
3559
|
+
height: 100%;
|
|
3560
|
+
-o-object-fit: cover;
|
|
3561
|
+
object-fit: cover;
|
|
3562
|
+
display: block;
|
|
3563
|
+
}
|
|
3564
|
+
|
|
3424
3565
|
.amplify-breadcrumbs__list {
|
|
3425
3566
|
display: flex;
|
|
3426
3567
|
flex-wrap: var(--amplify-components-breadcrumbs-flex-wrap);
|
|
@@ -6184,6 +6325,115 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
6184
6325
|
gap: var(--amplify-space-small);
|
|
6185
6326
|
}
|
|
6186
6327
|
|
|
6328
|
+
.amplify-ai-conversation {
|
|
6329
|
+
display: flex;
|
|
6330
|
+
flex-direction: column;
|
|
6331
|
+
height: 100%;
|
|
6332
|
+
}
|
|
6333
|
+
.amplify-ai-conversation__message {
|
|
6334
|
+
--content-bg: transparent;
|
|
6335
|
+
display: flex;
|
|
6336
|
+
flex-direction: var(--flex-direction);
|
|
6337
|
+
gap: var(--amplify-space-small);
|
|
6338
|
+
padding: var(--amplify-space-small);
|
|
6339
|
+
}
|
|
6340
|
+
.amplify-ai-conversation__message__list {
|
|
6341
|
+
display: flex;
|
|
6342
|
+
flex-direction: column;
|
|
6343
|
+
}
|
|
6344
|
+
.amplify-ai-conversation__message__avatar {
|
|
6345
|
+
flex-shrink: 0;
|
|
6346
|
+
}
|
|
6347
|
+
.amplify-ai-conversation__message__sender {
|
|
6348
|
+
display: flex;
|
|
6349
|
+
flex-direction: var(--flex-direction);
|
|
6350
|
+
align-items: center;
|
|
6351
|
+
height: var(--amplify-components-avatar-height);
|
|
6352
|
+
gap: var(--amplify-space-small);
|
|
6353
|
+
}
|
|
6354
|
+
.amplify-ai-conversation__message__sender__username {
|
|
6355
|
+
font-weight: bold;
|
|
6356
|
+
}
|
|
6357
|
+
.amplify-ai-conversation__message__sender__timestamp {
|
|
6358
|
+
color: var(--amplify-colors-font-tertiary);
|
|
6359
|
+
font-size: var(--amplify-font-sizes-small);
|
|
6360
|
+
}
|
|
6361
|
+
.amplify-ai-conversation__message__body {
|
|
6362
|
+
display: flex;
|
|
6363
|
+
flex-direction: column;
|
|
6364
|
+
align-items: var(--body-align-items);
|
|
6365
|
+
gap: var(--amplify-space-xs);
|
|
6366
|
+
}
|
|
6367
|
+
.amplify-ai-conversation__message__content {
|
|
6368
|
+
background-color: var(--content-bg);
|
|
6369
|
+
border-radius: var(--amplify-radii-medium);
|
|
6370
|
+
padding: var(--content-padding);
|
|
6371
|
+
}
|
|
6372
|
+
.amplify-ai-conversation__message__actions {
|
|
6373
|
+
display: flex;
|
|
6374
|
+
flex-direction: row;
|
|
6375
|
+
}
|
|
6376
|
+
.amplify-ai-conversation__message--bubble {
|
|
6377
|
+
--content-bg: var(--bg-color);
|
|
6378
|
+
--content-padding: var(--amplify-space-xxs) var(--amplify-space-xs);
|
|
6379
|
+
--flex-direction: row-reverse;
|
|
6380
|
+
--body-align-items: flex-end;
|
|
6381
|
+
}
|
|
6382
|
+
.amplify-ai-conversation__message--user {
|
|
6383
|
+
--bg-color: var(--amplify-colors-background-secondary);
|
|
6384
|
+
}
|
|
6385
|
+
.amplify-ai-conversation__message--assistant {
|
|
6386
|
+
--bg-color: var(--amplify-colors-primary-10);
|
|
6387
|
+
--flex-direction: row;
|
|
6388
|
+
--body-align-items: flex-start;
|
|
6389
|
+
}
|
|
6390
|
+
.amplify-ai-conversation__form {
|
|
6391
|
+
display: flex;
|
|
6392
|
+
flex-direction: row;
|
|
6393
|
+
align-items: flex-start;
|
|
6394
|
+
gap: var(--amplify-space-small);
|
|
6395
|
+
}
|
|
6396
|
+
.amplify-ai-conversation__form__dropzone {
|
|
6397
|
+
text-align: initial;
|
|
6398
|
+
border: none;
|
|
6399
|
+
padding: var(--amplify-space-xs);
|
|
6400
|
+
}
|
|
6401
|
+
.amplify-ai-conversation__attachment {
|
|
6402
|
+
display: flex;
|
|
6403
|
+
flex-direction: row;
|
|
6404
|
+
padding-block: var(--amplify-space-xxxs);
|
|
6405
|
+
padding-inline: var(--amplify-space-xs);
|
|
6406
|
+
border-width: var(--amplify-border-widths-small);
|
|
6407
|
+
border-style: solid;
|
|
6408
|
+
border-color: var(--amplify-colors-border-secondary);
|
|
6409
|
+
border-radius: var(--amplify-radii-small);
|
|
6410
|
+
align-items: center;
|
|
6411
|
+
gap: var(--amplify-space-xs);
|
|
6412
|
+
font-size: var(--amplify-font-sizes-small);
|
|
6413
|
+
}
|
|
6414
|
+
.amplify-ai-conversation__attachment__list {
|
|
6415
|
+
display: flex;
|
|
6416
|
+
flex-direction: row;
|
|
6417
|
+
flex-wrap: wrap;
|
|
6418
|
+
gap: var(--amplify-space-small);
|
|
6419
|
+
padding-block-start: var(--amplify-space-small);
|
|
6420
|
+
}
|
|
6421
|
+
.amplify-ai-conversation__attachment__image {
|
|
6422
|
+
width: 1rem;
|
|
6423
|
+
height: 1rem;
|
|
6424
|
+
-o-object-fit: cover;
|
|
6425
|
+
object-fit: cover;
|
|
6426
|
+
}
|
|
6427
|
+
.amplify-ai-conversation__attachment__size {
|
|
6428
|
+
color: var(--amplify-colors-font-tertiary);
|
|
6429
|
+
}
|
|
6430
|
+
.amplify-ai-conversation__attachment__remove {
|
|
6431
|
+
padding: var(--amplify-space-xxs);
|
|
6432
|
+
}
|
|
6433
|
+
.amplify-ai-conversation__prompt {
|
|
6434
|
+
font-weight: normal;
|
|
6435
|
+
}
|
|
6436
|
+
|
|
6187
6437
|
.amplify-label-start {
|
|
6188
6438
|
flex-direction: row;
|
|
6189
6439
|
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { FileUploaderProps, FileUploaderPathProps, FileUploaderHandle } from './types';
|
|
3
|
+
import { Container, DropZone, FileList, FileListHeader, FileListFooter, FilePicker } from './ui';
|
|
4
|
+
export declare const MISSING_REQUIRED_PROPS_MESSAGE = "`FileUploader` requires a `maxFileCount` prop to be provided.";
|
|
5
|
+
export declare const ACCESS_LEVEL_WITH_PATH_CALLBACK_MESSAGE = "`FileUploader` does not allow usage of a `path` callback prop with an `accessLevel` prop.";
|
|
6
|
+
export declare const ACCESS_LEVEL_DEPRECATION_MESSAGE = "`accessLevel` has been deprecated and will be removed in a future major version. See migration notes at https://ui.docs.amplify.aws/react/connected-components/storage/FileUploader";
|
|
7
|
+
declare const FileUploader: React.ForwardRefExoticComponent<(FileUploaderProps | FileUploaderPathProps) & React.RefAttributes<FileUploaderHandle>> & {
|
|
8
|
+
Container: typeof Container;
|
|
9
|
+
DropZone: typeof DropZone;
|
|
10
|
+
FileList: typeof FileList;
|
|
11
|
+
FileListHeader: typeof FileListHeader;
|
|
12
|
+
FileListFooter: typeof FileListFooter;
|
|
13
|
+
FilePicker: typeof FilePicker;
|
|
14
|
+
};
|
|
15
|
+
export { FileUploader };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { FileStatus } from '../../types';
|
|
2
|
+
import { Action, AddFilesActionParams } from './types';
|
|
3
|
+
import { TaskEvent } from '../../utils';
|
|
4
|
+
export declare const addFilesAction: ({ files, status, getFileErrorMessage, }: AddFilesActionParams) => Action;
|
|
5
|
+
export declare const clearFilesAction: () => Action;
|
|
6
|
+
export declare const queueFilesAction: () => Action;
|
|
7
|
+
export declare const setProcessedKeyAction: (input: {
|
|
8
|
+
id: string;
|
|
9
|
+
processedKey: string;
|
|
10
|
+
}) => Action;
|
|
11
|
+
export declare const setUploadingFileAction: ({ id, uploadTask, }: TaskEvent) => Action;
|
|
12
|
+
export declare const setUploadProgressAction: ({ id, progress, }: {
|
|
13
|
+
id: string;
|
|
14
|
+
progress: number;
|
|
15
|
+
}) => Action;
|
|
16
|
+
export declare const setUploadStatusAction: ({ id, status, }: {
|
|
17
|
+
id: string;
|
|
18
|
+
status: FileStatus;
|
|
19
|
+
}) => Action;
|
|
20
|
+
export declare const removeUploadAction: ({ id }: {
|
|
21
|
+
id: string;
|
|
22
|
+
}) => Action;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { useFileUploader, UseFileUploader } from './useFileUploader';
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { FileStatus, StorageFiles } from '../../types';
|
|
2
|
+
import { UploadTask } from '../../utils';
|
|
3
|
+
export interface UseFileUploaderState {
|
|
4
|
+
files: StorageFiles;
|
|
5
|
+
}
|
|
6
|
+
export declare enum FileUploaderActionTypes {
|
|
7
|
+
ADD_FILES = "ADD_FILES",
|
|
8
|
+
CLEAR_FILES = "CLEAR_FILES",
|
|
9
|
+
QUEUE_FILES = "QUEUE_FILES",
|
|
10
|
+
SET_STATUS = "SET_STATUS",
|
|
11
|
+
SET_PROCESSED_FILE_KEY = "SET_PROCESSED_FILE_KEY",
|
|
12
|
+
SET_STATUS_UPLOADING = "SET_STATUS_UPLOADING",
|
|
13
|
+
SET_UPLOAD_PROGRESS = "SET_UPLOAD_PROGRESS",
|
|
14
|
+
REMOVE_UPLOAD = "REMOVE_UPLOAD"
|
|
15
|
+
}
|
|
16
|
+
export type GetFileErrorMessage = (file: File) => string;
|
|
17
|
+
export type Action = {
|
|
18
|
+
type: FileUploaderActionTypes.ADD_FILES;
|
|
19
|
+
files: File[];
|
|
20
|
+
status: FileStatus;
|
|
21
|
+
getFileErrorMessage: GetFileErrorMessage;
|
|
22
|
+
} | {
|
|
23
|
+
type: FileUploaderActionTypes.CLEAR_FILES;
|
|
24
|
+
} | {
|
|
25
|
+
type: FileUploaderActionTypes.SET_STATUS;
|
|
26
|
+
id: string;
|
|
27
|
+
status: FileStatus;
|
|
28
|
+
} | {
|
|
29
|
+
type: FileUploaderActionTypes.QUEUE_FILES;
|
|
30
|
+
} | {
|
|
31
|
+
type: FileUploaderActionTypes.SET_STATUS_UPLOADING;
|
|
32
|
+
id: string;
|
|
33
|
+
uploadTask?: UploadTask;
|
|
34
|
+
} | {
|
|
35
|
+
type: FileUploaderActionTypes.SET_UPLOAD_PROGRESS;
|
|
36
|
+
id: string;
|
|
37
|
+
progress: number;
|
|
38
|
+
} | {
|
|
39
|
+
type: FileUploaderActionTypes.SET_PROCESSED_FILE_KEY;
|
|
40
|
+
id: string;
|
|
41
|
+
processedKey: string;
|
|
42
|
+
} | {
|
|
43
|
+
type: FileUploaderActionTypes.REMOVE_UPLOAD;
|
|
44
|
+
id: string;
|
|
45
|
+
};
|
|
46
|
+
export interface AddFilesActionParams {
|
|
47
|
+
files: File[];
|
|
48
|
+
status: FileStatus;
|
|
49
|
+
getFileErrorMessage: GetFileErrorMessage;
|
|
50
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { StorageFiles, FileStatus, DefaultFile } from '../../types';
|
|
2
|
+
import { GetFileErrorMessage } from './types';
|
|
3
|
+
import { TaskHandler } from '../../utils';
|
|
4
|
+
export interface UseFileUploader {
|
|
5
|
+
addFiles: (params: {
|
|
6
|
+
files: File[];
|
|
7
|
+
status: FileStatus;
|
|
8
|
+
getFileErrorMessage: GetFileErrorMessage;
|
|
9
|
+
}) => void;
|
|
10
|
+
clearFiles: () => void;
|
|
11
|
+
queueFiles: () => void;
|
|
12
|
+
setUploadingFile: TaskHandler;
|
|
13
|
+
setProcessedKey: (params: {
|
|
14
|
+
id: string;
|
|
15
|
+
processedKey: string;
|
|
16
|
+
}) => void;
|
|
17
|
+
setUploadProgress: (params: {
|
|
18
|
+
id: string;
|
|
19
|
+
progress: number;
|
|
20
|
+
}) => void;
|
|
21
|
+
setUploadSuccess: (params: {
|
|
22
|
+
id: string;
|
|
23
|
+
}) => void;
|
|
24
|
+
setUploadResumed: (params: {
|
|
25
|
+
id: string;
|
|
26
|
+
}) => void;
|
|
27
|
+
setUploadPaused: (params: {
|
|
28
|
+
id: string;
|
|
29
|
+
}) => void;
|
|
30
|
+
removeUpload: (params: {
|
|
31
|
+
id: string;
|
|
32
|
+
}) => void;
|
|
33
|
+
files: StorageFiles;
|
|
34
|
+
}
|
|
35
|
+
export declare function useFileUploader(defaultFiles?: Array<DefaultFile>): UseFileUploader;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { useUploadFiles, UseUploadFilesProps } from './useUploadFiles';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { PathCallback } from '../../utils';
|
|
2
|
+
import { FileUploaderProps } from '../../types';
|
|
3
|
+
import { UseFileUploader } from '../useFileUploader';
|
|
4
|
+
export interface UseUploadFilesProps extends Pick<FileUploaderProps, 'isResumable' | 'onUploadSuccess' | 'onUploadError' | 'onUploadStart' | 'maxFileCount' | 'processFile' | 'useAccelerateEndpoint'>, Pick<UseFileUploader, 'setUploadingFile' | 'setUploadProgress' | 'setUploadSuccess' | 'files'> {
|
|
5
|
+
accessLevel?: FileUploaderProps['accessLevel'];
|
|
6
|
+
onProcessFileSuccess: (input: {
|
|
7
|
+
id: string;
|
|
8
|
+
processedKey: string;
|
|
9
|
+
}) => void;
|
|
10
|
+
path?: string | PathCallback;
|
|
11
|
+
}
|
|
12
|
+
export declare function useUploadFiles({ accessLevel, files, isResumable, maxFileCount, onProcessFileSuccess, onUploadError, onUploadStart, onUploadSuccess, path, processFile, setUploadingFile, setUploadProgress, setUploadSuccess, useAccelerateEndpoint, }: UseUploadFilesProps): void;
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { StorageAccessLevel } from '@aws-amplify/core';
|
|
3
|
+
import { ContainerProps, DropZoneProps, FileListHeaderProps, FileListFooterProps, FileListProps, FilePickerProps } from './ui';
|
|
4
|
+
import { FileUploaderDisplayText, PathCallback, UploadTask } from './utils';
|
|
5
|
+
export declare enum FileStatus {
|
|
6
|
+
ADDED = "added",
|
|
7
|
+
QUEUED = "queued",
|
|
8
|
+
UPLOADING = "uploading",
|
|
9
|
+
PAUSED = "paused",
|
|
10
|
+
ERROR = "error",
|
|
11
|
+
UPLOADED = "uploaded"
|
|
12
|
+
}
|
|
13
|
+
export interface StorageFile {
|
|
14
|
+
id: string;
|
|
15
|
+
file?: File;
|
|
16
|
+
status: FileStatus;
|
|
17
|
+
progress: number;
|
|
18
|
+
processedKey?: string;
|
|
19
|
+
uploadTask?: UploadTask;
|
|
20
|
+
key: string;
|
|
21
|
+
error: string;
|
|
22
|
+
isImage: boolean;
|
|
23
|
+
}
|
|
24
|
+
export type StorageFiles = StorageFile[];
|
|
25
|
+
export type DefaultFile = Pick<StorageFile, 'key'>;
|
|
26
|
+
export interface ProcessFileParams extends Record<string, any> {
|
|
27
|
+
file: File;
|
|
28
|
+
key: string;
|
|
29
|
+
useAccelerateEndpoint?: boolean;
|
|
30
|
+
}
|
|
31
|
+
export type ProcessFile = (params: ProcessFileParams) => Promise<ProcessFileParams> | ProcessFileParams;
|
|
32
|
+
export interface FileUploaderHandle {
|
|
33
|
+
clearFiles: () => void;
|
|
34
|
+
}
|
|
35
|
+
export interface FileUploaderProps {
|
|
36
|
+
/**
|
|
37
|
+
* List of accepted File types, values of `['*']` or undefined allow any files
|
|
38
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
|
|
39
|
+
*/
|
|
40
|
+
acceptedFileTypes?: string[];
|
|
41
|
+
/**
|
|
42
|
+
* Access level for file uploads
|
|
43
|
+
* @see https://docs.amplify.aws/lib/storage/configureaccess/q/platform/js/
|
|
44
|
+
*/
|
|
45
|
+
accessLevel: StorageAccessLevel;
|
|
46
|
+
/**
|
|
47
|
+
* Determines if the upload will automatically start after a file is selected, default value: true
|
|
48
|
+
*/
|
|
49
|
+
autoUpload?: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* Component overrides
|
|
52
|
+
*/
|
|
53
|
+
components?: {
|
|
54
|
+
Container?: React.ComponentType<ContainerProps>;
|
|
55
|
+
DropZone?: React.ComponentType<DropZoneProps>;
|
|
56
|
+
FileList?: React.ComponentType<FileListProps>;
|
|
57
|
+
FilePicker?: React.ComponentType<FilePickerProps>;
|
|
58
|
+
FileListHeader?: React.ComponentType<FileListHeaderProps>;
|
|
59
|
+
FileListFooter?: React.ComponentType<FileListFooterProps>;
|
|
60
|
+
};
|
|
61
|
+
/**
|
|
62
|
+
* List of default files already uploaded
|
|
63
|
+
*/
|
|
64
|
+
defaultFiles?: DefaultFile[];
|
|
65
|
+
/**
|
|
66
|
+
* Overrides default display text
|
|
67
|
+
*/
|
|
68
|
+
displayText?: FileUploaderDisplayText;
|
|
69
|
+
/**
|
|
70
|
+
* Determines if upload can be paused / resumed
|
|
71
|
+
*/
|
|
72
|
+
isResumable?: boolean;
|
|
73
|
+
/**
|
|
74
|
+
* Maximum total files to upload in each batch
|
|
75
|
+
*/
|
|
76
|
+
maxFileCount: number;
|
|
77
|
+
/**
|
|
78
|
+
* Maximum file size in bytes
|
|
79
|
+
*/
|
|
80
|
+
maxFileSize?: number;
|
|
81
|
+
/**
|
|
82
|
+
* When a file is removed
|
|
83
|
+
*/
|
|
84
|
+
onFileRemove?: (file: {
|
|
85
|
+
key: string;
|
|
86
|
+
}) => void;
|
|
87
|
+
/**
|
|
88
|
+
* Monitor upload errors
|
|
89
|
+
*/
|
|
90
|
+
onUploadError?: (error: string, file: {
|
|
91
|
+
key: string;
|
|
92
|
+
}) => void;
|
|
93
|
+
/**
|
|
94
|
+
* Monitor upload success
|
|
95
|
+
*/
|
|
96
|
+
onUploadSuccess?: (event: {
|
|
97
|
+
key?: string;
|
|
98
|
+
}) => void;
|
|
99
|
+
/**
|
|
100
|
+
* When a file begins uploading
|
|
101
|
+
*/
|
|
102
|
+
onUploadStart?: (event: {
|
|
103
|
+
key?: string;
|
|
104
|
+
}) => void;
|
|
105
|
+
/**
|
|
106
|
+
* Process file before upload
|
|
107
|
+
*/
|
|
108
|
+
processFile?: ProcessFile;
|
|
109
|
+
/**
|
|
110
|
+
* Determines if thumbnails show for image files
|
|
111
|
+
*/
|
|
112
|
+
showThumbnails?: boolean;
|
|
113
|
+
/**
|
|
114
|
+
* Provided value is prefixed to the file `key` for each file
|
|
115
|
+
*/
|
|
116
|
+
path?: string;
|
|
117
|
+
useAccelerateEndpoint?: boolean;
|
|
118
|
+
}
|
|
119
|
+
export interface FileUploaderPathProps extends Omit<FileUploaderProps, 'accessLevel' | 'path'> {
|
|
120
|
+
/**
|
|
121
|
+
* S3 bucket key, allows either a `string` or a `PathCallback`:
|
|
122
|
+
* - `string`: `path` is prefixed to the file `key` for each file
|
|
123
|
+
* - `PathCallback`: callback provided an input containing the current `identityId`,
|
|
124
|
+
* resolved value is prefixed to the file `key` for each file
|
|
125
|
+
*/
|
|
126
|
+
path: string | PathCallback;
|
|
127
|
+
accessLevel?: never;
|
|
128
|
+
useAccelerateEndpoint?: boolean;
|
|
129
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Container, ContainerProps } from './Container';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { FileUploaderDisplayText } from '../../utils/displayText';
|
|
3
|
+
export interface DropZoneProps {
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
displayText: FileUploaderDisplayText;
|
|
6
|
+
inDropZone: boolean;
|
|
7
|
+
onDragEnter: (event: React.DragEvent<HTMLDivElement>) => void;
|
|
8
|
+
onDragLeave: (event: React.DragEvent<HTMLDivElement>) => void;
|
|
9
|
+
onDragOver: (event: React.DragEvent<HTMLDivElement>) => void;
|
|
10
|
+
onDragStart: (event: React.DragEvent<HTMLDivElement>) => void;
|
|
11
|
+
onDrop: (event: React.DragEvent<HTMLDivElement>) => void;
|
|
12
|
+
testId?: string;
|
|
13
|
+
}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { FileControlProps } from './types';
|
|
3
|
+
export declare function FileControl({ onPause, onResume, displayName, errorMessage, isImage, isResumable, loaderIsDeterminate, onRemove, progress, showThumbnails, size, status, displayText, thumbnailUrl, }: FileControlProps): JSX.Element;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { FileListProps } from './types';
|
|
3
|
+
export declare function FileList({ displayText, files, hasMaxFilesError, isResumable, onCancelUpload, onDeleteUpload, onResume, onPause, showThumbnails, maxFileCount, }: FileListProps): JSX.Element | null;
|