@aws-amplify/ui-react-storage 0.0.0-theming-v2-c5d1f72-20240709163904 → 0.0.0-theming-v2-882f11a-20240805184032

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.
@@ -58,7 +58,7 @@ const StorageManagerBase = React.forwardRef(function StorageManager({ acceptedFi
58
58
  getFileSizeErrorText,
59
59
  });
60
60
  };
61
- const { addFiles, clearFiles, files, removeUpload, queueFiles, setUploadingFile, setUploadPaused, setUploadProgress, setUploadSuccess, setUploadResumed, } = useStorageManager(defaultFiles);
61
+ const { addFiles, clearFiles, files, removeUpload, queueFiles, setProcessedKey, setUploadingFile, setUploadPaused, setUploadProgress, setUploadSuccess, setUploadResumed, } = useStorageManager(defaultFiles);
62
62
  React.useImperativeHandle(ref, () => ({ clearFiles }));
63
63
  const { dragState, ...dropZoneProps } = useDropZone({
64
64
  acceptedFileTypes,
@@ -84,6 +84,7 @@ const StorageManagerBase = React.forwardRef(function StorageManager({ acceptedFi
84
84
  onUploadError,
85
85
  onUploadSuccess,
86
86
  onUploadStart,
87
+ onProcessFileSuccess: setProcessedKey,
87
88
  setUploadingFile,
88
89
  setUploadProgress,
89
90
  setUploadSuccess,
@@ -130,7 +131,9 @@ const StorageManagerBase = React.forwardRef(function StorageManager({ acceptedFi
130
131
  if (typeof onFileRemove === 'function') {
131
132
  const file = files.find((file) => file.id === id);
132
133
  if (file) {
133
- onFileRemove({ key: file.key });
134
+ // return `processedKey` if available and `processFile` is provided
135
+ const key = (processFile && file?.processedKey) ?? file.key;
136
+ onFileRemove({ key });
134
137
  }
135
138
  }
136
139
  };
@@ -12,6 +12,10 @@ const clearFilesAction = () => ({
12
12
  const queueFilesAction = () => ({
13
13
  type: StorageManagerActionTypes.QUEUE_FILES,
14
14
  });
15
+ const setProcessedKeyAction = (input) => ({
16
+ ...input,
17
+ type: StorageManagerActionTypes.SET_PROCESSED_FILE_KEY,
18
+ });
15
19
  const setUploadingFileAction = ({ id, uploadTask, }) => ({
16
20
  type: StorageManagerActionTypes.SET_STATUS_UPLOADING,
17
21
  id,
@@ -32,4 +36,4 @@ const removeUploadAction = ({ id }) => ({
32
36
  id,
33
37
  });
34
38
 
35
- export { addFilesAction, clearFilesAction, queueFilesAction, removeUploadAction, setUploadProgressAction, setUploadStatusAction, setUploadingFileAction };
39
+ export { addFilesAction, clearFilesAction, queueFilesAction, removeUploadAction, setProcessedKeyAction, setUploadProgressAction, setUploadStatusAction, setUploadingFileAction };
@@ -1,6 +1,12 @@
1
1
  import { FileStatus } from '../../types.mjs';
2
2
  import { StorageManagerActionTypes } from './types.mjs';
3
3
 
4
+ const updateFiles = (files, nextFileData) => files.reduce((files, currentFile) => {
5
+ if (currentFile.id === nextFileData.id) {
6
+ return [...files, { ...currentFile, ...nextFileData }];
7
+ }
8
+ return [...files, currentFile];
9
+ }, []);
4
10
  function storageManagerStateReducer(state, action) {
5
11
  switch (action.type) {
6
12
  case StorageManagerActionTypes.ADD_FILES: {
@@ -20,16 +26,10 @@ function storageManagerStateReducer(state, action) {
20
26
  };
21
27
  });
22
28
  const newFiles = [...state.files, ...newUploads];
23
- return {
24
- ...state,
25
- files: newFiles,
26
- };
29
+ return { ...state, files: newFiles };
27
30
  }
28
31
  case StorageManagerActionTypes.CLEAR_FILES: {
29
- return {
30
- ...state,
31
- files: [],
32
- };
32
+ return { ...state, files: [] };
33
33
  }
34
34
  case StorageManagerActionTypes.QUEUE_FILES: {
35
35
  const { files } = state;
@@ -51,65 +51,26 @@ function storageManagerStateReducer(state, action) {
51
51
  }
52
52
  case StorageManagerActionTypes.SET_STATUS_UPLOADING: {
53
53
  const { id, uploadTask } = action;
54
- const { files } = state;
55
- const newFiles = files.reduce((files, currentFile) => {
56
- if (currentFile.id === id) {
57
- return [
58
- ...files,
59
- {
60
- ...currentFile,
61
- status: FileStatus.UPLOADING,
62
- progress: 0,
63
- uploadTask,
64
- },
65
- ];
66
- }
67
- return [...files, currentFile];
68
- }, []);
69
- return {
70
- ...state,
71
- files: newFiles,
72
- };
54
+ const status = FileStatus.UPLOADING;
55
+ const progress = 0;
56
+ const nextFileData = { status, progress, id, uploadTask };
57
+ const files = updateFiles(state.files, nextFileData);
58
+ return { ...state, files };
59
+ }
60
+ case StorageManagerActionTypes.SET_PROCESSED_FILE_KEY: {
61
+ const { processedKey, id } = action;
62
+ const files = updateFiles(state.files, { processedKey, id });
63
+ return { files };
73
64
  }
74
65
  case StorageManagerActionTypes.SET_UPLOAD_PROGRESS: {
75
66
  const { id, progress } = action;
76
- const { files } = state;
77
- const newFiles = files.reduce((files, currentFile) => {
78
- if (currentFile.id === id) {
79
- return [
80
- ...files,
81
- {
82
- ...currentFile,
83
- progress,
84
- },
85
- ];
86
- }
87
- return [...files, currentFile];
88
- }, []);
89
- return {
90
- ...state,
91
- files: newFiles,
92
- };
67
+ const files = updateFiles(state.files, { id, progress });
68
+ return { ...state, files };
93
69
  }
94
70
  case StorageManagerActionTypes.SET_STATUS: {
95
71
  const { id, status } = action;
96
- const { files } = state;
97
- const newFiles = files.reduce((files, currentFile) => {
98
- if (currentFile.id === id) {
99
- return [
100
- ...files,
101
- {
102
- ...currentFile,
103
- status,
104
- },
105
- ];
106
- }
107
- return [...files, currentFile];
108
- }, []);
109
- return {
110
- ...state,
111
- files: newFiles,
112
- };
72
+ const files = updateFiles(state.files, { id, status });
73
+ return { ...state, files };
113
74
  }
114
75
  case StorageManagerActionTypes.REMOVE_UPLOAD: {
115
76
  const { id } = action;
@@ -4,6 +4,7 @@ var StorageManagerActionTypes;
4
4
  StorageManagerActionTypes["CLEAR_FILES"] = "CLEAR_FILES";
5
5
  StorageManagerActionTypes["QUEUE_FILES"] = "QUEUE_FILES";
6
6
  StorageManagerActionTypes["SET_STATUS"] = "SET_STATUS";
7
+ StorageManagerActionTypes["SET_PROCESSED_FILE_KEY"] = "SET_PROCESSED_FILE_KEY";
7
8
  StorageManagerActionTypes["SET_STATUS_UPLOADING"] = "SET_STATUS_UPLOADING";
8
9
  StorageManagerActionTypes["SET_UPLOAD_PROGRESS"] = "SET_UPLOAD_PROGRESS";
9
10
  StorageManagerActionTypes["REMOVE_UPLOAD"] = "REMOVE_UPLOAD";
@@ -2,7 +2,7 @@ import React__default from 'react';
2
2
  import { isObject } from '@aws-amplify/ui';
3
3
  import { FileStatus } from '../../types.mjs';
4
4
  import { storageManagerStateReducer } from './reducer.mjs';
5
- import { addFilesAction, clearFilesAction, queueFilesAction, setUploadingFileAction, setUploadProgressAction, setUploadStatusAction, removeUploadAction } from './actions.mjs';
5
+ import { addFilesAction, clearFilesAction, queueFilesAction, setUploadingFileAction, setProcessedKeyAction, setUploadProgressAction, setUploadStatusAction, removeUploadAction } from './actions.mjs';
6
6
 
7
7
  const isDefaultFile = (file) => !!(isObject(file) && file.key);
8
8
  const createFileFromDefault = (file) => isDefaultFile(file)
@@ -26,6 +26,9 @@ function useStorageManager(defaultFiles = []) {
26
26
  const setUploadingFile = ({ uploadTask, id, }) => {
27
27
  dispatch(setUploadingFileAction({ id, uploadTask }));
28
28
  };
29
+ const setProcessedKey = (input) => {
30
+ dispatch(setProcessedKeyAction(input));
31
+ };
29
32
  const setUploadProgress = ({ progress, id, }) => {
30
33
  dispatch(setUploadProgressAction({ id, progress }));
31
34
  };
@@ -43,6 +46,7 @@ function useStorageManager(defaultFiles = []) {
43
46
  };
44
47
  return {
45
48
  removeUpload,
49
+ setProcessedKey,
46
50
  setUploadPaused,
47
51
  setUploadProgress,
48
52
  setUploadResumed,
@@ -4,7 +4,7 @@ import { getInput } from '../../utils/getInput.mjs';
4
4
  import { uploadFile } from '../../utils/uploadFile.mjs';
5
5
  import { FileStatus } from '../../types.mjs';
6
6
 
7
- function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, setUploadingFile, setUploadSuccess, onUploadError, onUploadSuccess, onUploadStart, maxFileCount, processFile, path, }) {
7
+ function useUploadFiles({ accessLevel, files, isResumable, maxFileCount, onProcessFileSuccess, onUploadError, onUploadStart, onUploadSuccess, path, processFile, setUploadingFile, setUploadProgress, setUploadSuccess, }) {
8
8
  React.useEffect(() => {
9
9
  const filesReadyToUpload = files.filter((file) => file.status === FileStatus.QUEUED);
10
10
  if (filesReadyToUpload.length > maxFileCount) {
@@ -22,10 +22,12 @@ function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, se
22
22
  setUploadProgress({ id, progress });
23
23
  };
24
24
  if (file) {
25
+ const handleProcessFileSuccess = (input) => onProcessFileSuccess({ id, ...input });
25
26
  const input = getInput({
26
27
  accessLevel,
27
28
  file,
28
29
  key,
30
+ onProcessFileSuccess: handleProcessFileSuccess,
29
31
  onProgress,
30
32
  path,
31
33
  processFile,
@@ -62,6 +64,7 @@ function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, se
62
64
  setUploadProgress,
63
65
  setUploadingFile,
64
66
  onUploadError,
67
+ onProcessFileSuccess,
65
68
  onUploadSuccess,
66
69
  onUploadStart,
67
70
  maxFileCount,
@@ -4,7 +4,7 @@ import { Button, VisuallyHidden, View } from '@aws-amplify/ui-react';
4
4
 
5
5
  const FileRemoveButton = ({ altText, onClick, }) => {
6
6
  const icons = useIcons('storageManager');
7
- return (React__default.createElement(Button, { size: "small", onClick: onClick },
7
+ return (React__default.createElement(Button, { size: "small", onClick: onClick, testId: "storage-manager-remove-button" },
8
8
  React__default.createElement(VisuallyHidden, null, altText),
9
9
  React__default.createElement(View, { as: "span", "aria-hidden": true, fontSize: "medium" }, icons?.remove ?? React__default.createElement(IconClose, null))));
10
10
  };
@@ -2,23 +2,37 @@ import { fetchAuthSession } from 'aws-amplify/auth';
2
2
  import { isTypedFunction, isString } from '@aws-amplify/ui';
3
3
  import { resolveFile } from './resolveFile.mjs';
4
4
 
5
- const getInput = ({ accessLevel, file, key, onProgress, path, processFile, }) => {
5
+ const getInput = ({ accessLevel, file, key, onProcessFileSuccess, onProgress, path, processFile, }) => {
6
6
  return async () => {
7
7
  const hasCallbackPath = isTypedFunction(path);
8
8
  const hasStringPath = isString(path);
9
9
  const hasKeyInput = !!accessLevel && !hasCallbackPath;
10
- const { file: data, key: fileKey, ...rest } = await resolveFile({ file, key, processFile });
10
+ const { file: data, key: processedKey, ...rest } = await resolveFile({ file, key, processFile });
11
11
  const contentType = file.type || 'binary/octet-stream';
12
12
  // IMPORTANT: always pass `...rest` here for backwards compatibility
13
13
  const options = { contentType, onProgress, ...rest };
14
+ let inputResult;
14
15
  if (hasKeyInput) {
15
16
  // legacy handling of `path` is to prefix to `fileKey`
16
- const resolvedKey = hasStringPath ? `${path}${fileKey}` : fileKey;
17
- return { data, key: resolvedKey, options: { ...options, accessLevel } };
17
+ const resolvedKey = hasStringPath
18
+ ? `${path}${processedKey}`
19
+ : processedKey;
20
+ inputResult = {
21
+ data,
22
+ key: resolvedKey,
23
+ options: { ...options, accessLevel },
24
+ };
18
25
  }
19
- const { identityId } = await fetchAuthSession();
20
- const resolvedPath = `${hasCallbackPath ? path({ identityId }) : path}${fileKey}`;
21
- return { data: file, path: resolvedPath, options };
26
+ else {
27
+ const { identityId } = await fetchAuthSession();
28
+ const resolvedPath = `${hasCallbackPath ? path({ identityId }) : path}${processedKey}`;
29
+ inputResult = { data: file, path: resolvedPath, options };
30
+ }
31
+ if (processFile) {
32
+ // provide post-processing value of target `key`
33
+ onProcessFileSuccess({ processedKey });
34
+ }
35
+ return inputResult;
22
36
  };
23
37
  };
24
38
 
@@ -1,3 +1,3 @@
1
- const VERSION = '3.1.3';
1
+ const VERSION = '3.1.6';
2
2
 
3
3
  export { VERSION };
package/dist/index.js CHANGED
@@ -33,7 +33,7 @@ function _interopNamespace(e) {
33
33
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
34
34
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
35
35
 
36
- const VERSION = '3.1.3';
36
+ const VERSION = '3.1.6';
37
37
 
38
38
  const MISSING_REQUIRED_PROP_MESSAGE = '`StorageImage` requires either an `imgKey` or `path` prop.';
39
39
  const HAS_DEPRECATED_PROPS_MESSAGE = '`imgKey`, `accessLevel`, and `identityId` will be replaced with `path` in a future major version. See https://ui.docs.amplify.aws/react/connected-components/storage/storageimage#props';
@@ -100,11 +100,18 @@ var StorageManagerActionTypes;
100
100
  StorageManagerActionTypes["CLEAR_FILES"] = "CLEAR_FILES";
101
101
  StorageManagerActionTypes["QUEUE_FILES"] = "QUEUE_FILES";
102
102
  StorageManagerActionTypes["SET_STATUS"] = "SET_STATUS";
103
+ StorageManagerActionTypes["SET_PROCESSED_FILE_KEY"] = "SET_PROCESSED_FILE_KEY";
103
104
  StorageManagerActionTypes["SET_STATUS_UPLOADING"] = "SET_STATUS_UPLOADING";
104
105
  StorageManagerActionTypes["SET_UPLOAD_PROGRESS"] = "SET_UPLOAD_PROGRESS";
105
106
  StorageManagerActionTypes["REMOVE_UPLOAD"] = "REMOVE_UPLOAD";
106
107
  })(StorageManagerActionTypes || (StorageManagerActionTypes = {}));
107
108
 
109
+ const updateFiles = (files, nextFileData) => files.reduce((files, currentFile) => {
110
+ if (currentFile.id === nextFileData.id) {
111
+ return [...files, { ...currentFile, ...nextFileData }];
112
+ }
113
+ return [...files, currentFile];
114
+ }, []);
108
115
  function storageManagerStateReducer(state, action) {
109
116
  switch (action.type) {
110
117
  case StorageManagerActionTypes.ADD_FILES: {
@@ -124,16 +131,10 @@ function storageManagerStateReducer(state, action) {
124
131
  };
125
132
  });
126
133
  const newFiles = [...state.files, ...newUploads];
127
- return {
128
- ...state,
129
- files: newFiles,
130
- };
134
+ return { ...state, files: newFiles };
131
135
  }
132
136
  case StorageManagerActionTypes.CLEAR_FILES: {
133
- return {
134
- ...state,
135
- files: [],
136
- };
137
+ return { ...state, files: [] };
137
138
  }
138
139
  case StorageManagerActionTypes.QUEUE_FILES: {
139
140
  const { files } = state;
@@ -155,65 +156,26 @@ function storageManagerStateReducer(state, action) {
155
156
  }
156
157
  case StorageManagerActionTypes.SET_STATUS_UPLOADING: {
157
158
  const { id, uploadTask } = action;
158
- const { files } = state;
159
- const newFiles = files.reduce((files, currentFile) => {
160
- if (currentFile.id === id) {
161
- return [
162
- ...files,
163
- {
164
- ...currentFile,
165
- status: FileStatus.UPLOADING,
166
- progress: 0,
167
- uploadTask,
168
- },
169
- ];
170
- }
171
- return [...files, currentFile];
172
- }, []);
173
- return {
174
- ...state,
175
- files: newFiles,
176
- };
159
+ const status = FileStatus.UPLOADING;
160
+ const progress = 0;
161
+ const nextFileData = { status, progress, id, uploadTask };
162
+ const files = updateFiles(state.files, nextFileData);
163
+ return { ...state, files };
164
+ }
165
+ case StorageManagerActionTypes.SET_PROCESSED_FILE_KEY: {
166
+ const { processedKey, id } = action;
167
+ const files = updateFiles(state.files, { processedKey, id });
168
+ return { files };
177
169
  }
178
170
  case StorageManagerActionTypes.SET_UPLOAD_PROGRESS: {
179
171
  const { id, progress } = action;
180
- const { files } = state;
181
- const newFiles = files.reduce((files, currentFile) => {
182
- if (currentFile.id === id) {
183
- return [
184
- ...files,
185
- {
186
- ...currentFile,
187
- progress,
188
- },
189
- ];
190
- }
191
- return [...files, currentFile];
192
- }, []);
193
- return {
194
- ...state,
195
- files: newFiles,
196
- };
172
+ const files = updateFiles(state.files, { id, progress });
173
+ return { ...state, files };
197
174
  }
198
175
  case StorageManagerActionTypes.SET_STATUS: {
199
176
  const { id, status } = action;
200
- const { files } = state;
201
- const newFiles = files.reduce((files, currentFile) => {
202
- if (currentFile.id === id) {
203
- return [
204
- ...files,
205
- {
206
- ...currentFile,
207
- status,
208
- },
209
- ];
210
- }
211
- return [...files, currentFile];
212
- }, []);
213
- return {
214
- ...state,
215
- files: newFiles,
216
- };
177
+ const files = updateFiles(state.files, { id, status });
178
+ return { ...state, files };
217
179
  }
218
180
  case StorageManagerActionTypes.REMOVE_UPLOAD: {
219
181
  const { id } = action;
@@ -245,6 +207,10 @@ const clearFilesAction = () => ({
245
207
  const queueFilesAction = () => ({
246
208
  type: StorageManagerActionTypes.QUEUE_FILES,
247
209
  });
210
+ const setProcessedKeyAction = (input) => ({
211
+ ...input,
212
+ type: StorageManagerActionTypes.SET_PROCESSED_FILE_KEY,
213
+ });
248
214
  const setUploadingFileAction = ({ id, uploadTask, }) => ({
249
215
  type: StorageManagerActionTypes.SET_STATUS_UPLOADING,
250
216
  id,
@@ -287,6 +253,9 @@ function useStorageManager(defaultFiles = []) {
287
253
  const setUploadingFile = ({ uploadTask, id, }) => {
288
254
  dispatch(setUploadingFileAction({ id, uploadTask }));
289
255
  };
256
+ const setProcessedKey = (input) => {
257
+ dispatch(setProcessedKeyAction(input));
258
+ };
290
259
  const setUploadProgress = ({ progress, id, }) => {
291
260
  dispatch(setUploadProgressAction({ id, progress }));
292
261
  };
@@ -304,6 +273,7 @@ function useStorageManager(defaultFiles = []) {
304
273
  };
305
274
  return {
306
275
  removeUpload,
276
+ setProcessedKey,
307
277
  setUploadPaused,
308
278
  setUploadProgress,
309
279
  setUploadResumed,
@@ -434,23 +404,37 @@ const resolveFile = ({ processFile, ...input }) => {
434
404
  });
435
405
  };
436
406
 
437
- const getInput = ({ accessLevel, file, key, onProgress, path, processFile, }) => {
407
+ const getInput = ({ accessLevel, file, key, onProcessFileSuccess, onProgress, path, processFile, }) => {
438
408
  return async () => {
439
409
  const hasCallbackPath = ui.isTypedFunction(path);
440
410
  const hasStringPath = ui.isString(path);
441
411
  const hasKeyInput = !!accessLevel && !hasCallbackPath;
442
- const { file: data, key: fileKey, ...rest } = await resolveFile({ file, key, processFile });
412
+ const { file: data, key: processedKey, ...rest } = await resolveFile({ file, key, processFile });
443
413
  const contentType = file.type || 'binary/octet-stream';
444
414
  // IMPORTANT: always pass `...rest` here for backwards compatibility
445
415
  const options = { contentType, onProgress, ...rest };
416
+ let inputResult;
446
417
  if (hasKeyInput) {
447
418
  // legacy handling of `path` is to prefix to `fileKey`
448
- const resolvedKey = hasStringPath ? `${path}${fileKey}` : fileKey;
449
- return { data, key: resolvedKey, options: { ...options, accessLevel } };
419
+ const resolvedKey = hasStringPath
420
+ ? `${path}${processedKey}`
421
+ : processedKey;
422
+ inputResult = {
423
+ data,
424
+ key: resolvedKey,
425
+ options: { ...options, accessLevel },
426
+ };
427
+ }
428
+ else {
429
+ const { identityId } = await auth.fetchAuthSession();
430
+ const resolvedPath = `${hasCallbackPath ? path({ identityId }) : path}${processedKey}`;
431
+ inputResult = { data: file, path: resolvedPath, options };
432
+ }
433
+ if (processFile) {
434
+ // provide post-processing value of target `key`
435
+ onProcessFileSuccess({ processedKey });
450
436
  }
451
- const { identityId } = await auth.fetchAuthSession();
452
- const resolvedPath = `${hasCallbackPath ? path({ identityId }) : path}${fileKey}`;
453
- return { data: file, path: resolvedPath, options };
437
+ return inputResult;
454
438
  };
455
439
  };
456
440
 
@@ -476,7 +460,7 @@ async function uploadFile({ input, onError, onStart, onComplete, }) {
476
460
  return uploadTask;
477
461
  }
478
462
 
479
- function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, setUploadingFile, setUploadSuccess, onUploadError, onUploadSuccess, onUploadStart, maxFileCount, processFile, path, }) {
463
+ function useUploadFiles({ accessLevel, files, isResumable, maxFileCount, onProcessFileSuccess, onUploadError, onUploadStart, onUploadSuccess, path, processFile, setUploadingFile, setUploadProgress, setUploadSuccess, }) {
480
464
  React__namespace.useEffect(() => {
481
465
  const filesReadyToUpload = files.filter((file) => file.status === FileStatus.QUEUED);
482
466
  if (filesReadyToUpload.length > maxFileCount) {
@@ -494,10 +478,12 @@ function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, se
494
478
  setUploadProgress({ id, progress });
495
479
  };
496
480
  if (file) {
481
+ const handleProcessFileSuccess = (input) => onProcessFileSuccess({ id, ...input });
497
482
  const input = getInput({
498
483
  accessLevel,
499
484
  file,
500
485
  key,
486
+ onProcessFileSuccess: handleProcessFileSuccess,
501
487
  onProgress,
502
488
  path,
503
489
  processFile,
@@ -534,6 +520,7 @@ function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, se
534
520
  setUploadProgress,
535
521
  setUploadingFile,
536
522
  onUploadError,
523
+ onProcessFileSuccess,
537
524
  onUploadSuccess,
538
525
  onUploadStart,
539
526
  maxFileCount,
@@ -580,7 +567,7 @@ const FileStatusMessage = ({ errorMessage, getPausedText, getUploadingText, perc
580
567
 
581
568
  const FileRemoveButton = ({ altText, onClick, }) => {
582
569
  const icons = internal.useIcons('storageManager');
583
- return (React__default["default"].createElement(uiReact.Button, { size: "small", onClick: onClick },
570
+ return (React__default["default"].createElement(uiReact.Button, { size: "small", onClick: onClick, testId: "storage-manager-remove-button" },
584
571
  React__default["default"].createElement(uiReact.VisuallyHidden, null, altText),
585
572
  React__default["default"].createElement(uiReact.View, { as: "span", "aria-hidden": true, fontSize: "medium" }, icons?.remove ?? React__default["default"].createElement(internal.IconClose, null))));
586
573
  };
@@ -708,7 +695,7 @@ const StorageManagerBase = React__namespace.forwardRef(function StorageManager({
708
695
  getFileSizeErrorText,
709
696
  });
710
697
  };
711
- const { addFiles, clearFiles, files, removeUpload, queueFiles, setUploadingFile, setUploadPaused, setUploadProgress, setUploadSuccess, setUploadResumed, } = useStorageManager(defaultFiles);
698
+ const { addFiles, clearFiles, files, removeUpload, queueFiles, setProcessedKey, setUploadingFile, setUploadPaused, setUploadProgress, setUploadSuccess, setUploadResumed, } = useStorageManager(defaultFiles);
712
699
  React__namespace.useImperativeHandle(ref, () => ({ clearFiles }));
713
700
  const { dragState, ...dropZoneProps } = internal.useDropZone({
714
701
  acceptedFileTypes,
@@ -734,6 +721,7 @@ const StorageManagerBase = React__namespace.forwardRef(function StorageManager({
734
721
  onUploadError,
735
722
  onUploadSuccess,
736
723
  onUploadStart,
724
+ onProcessFileSuccess: setProcessedKey,
737
725
  setUploadingFile,
738
726
  setUploadProgress,
739
727
  setUploadSuccess,
@@ -780,7 +768,9 @@ const StorageManagerBase = React__namespace.forwardRef(function StorageManager({
780
768
  if (typeof onFileRemove === 'function') {
781
769
  const file = files.find((file) => file.id === id);
782
770
  if (file) {
783
- onFileRemove({ key: file.key });
771
+ // return `processedKey` if available and `processFile` is provided
772
+ const key = (processFile && file?.processedKey) ?? file.key;
773
+ onFileRemove({ key });
784
774
  }
785
775
  }
786
776
  };
package/dist/styles.css CHANGED
@@ -4682,7 +4682,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4682
4682
  }
4683
4683
 
4684
4684
  .amplify-rating {
4685
- display: inline-flex;
4685
+ display: flex;
4686
4686
  position: relative;
4687
4687
  text-align: left;
4688
4688
  font-size: var(--amplify-components-rating-default-size);
@@ -4,6 +4,10 @@ import { TaskEvent } from '../../utils';
4
4
  export declare const addFilesAction: ({ files, status, getFileErrorMessage, }: AddFilesActionParams) => Action;
5
5
  export declare const clearFilesAction: () => Action;
6
6
  export declare const queueFilesAction: () => Action;
7
+ export declare const setProcessedKeyAction: (input: {
8
+ id: string;
9
+ processedKey: string;
10
+ }) => Action;
7
11
  export declare const setUploadingFileAction: ({ id, uploadTask, }: TaskEvent) => Action;
8
12
  export declare const setUploadProgressAction: ({ id, progress, }: {
9
13
  id: string;
@@ -8,6 +8,7 @@ export declare enum StorageManagerActionTypes {
8
8
  CLEAR_FILES = "CLEAR_FILES",
9
9
  QUEUE_FILES = "QUEUE_FILES",
10
10
  SET_STATUS = "SET_STATUS",
11
+ SET_PROCESSED_FILE_KEY = "SET_PROCESSED_FILE_KEY",
11
12
  SET_STATUS_UPLOADING = "SET_STATUS_UPLOADING",
12
13
  SET_UPLOAD_PROGRESS = "SET_UPLOAD_PROGRESS",
13
14
  REMOVE_UPLOAD = "REMOVE_UPLOAD"
@@ -34,6 +35,10 @@ export type Action = {
34
35
  type: StorageManagerActionTypes.SET_UPLOAD_PROGRESS;
35
36
  id: string;
36
37
  progress: number;
38
+ } | {
39
+ type: StorageManagerActionTypes.SET_PROCESSED_FILE_KEY;
40
+ id: string;
41
+ processedKey: string;
37
42
  } | {
38
43
  type: StorageManagerActionTypes.REMOVE_UPLOAD;
39
44
  id: string;
@@ -10,6 +10,10 @@ export interface UseStorageManager {
10
10
  clearFiles: () => void;
11
11
  queueFiles: () => void;
12
12
  setUploadingFile: TaskHandler;
13
+ setProcessedKey: (params: {
14
+ id: string;
15
+ processedKey: string;
16
+ }) => void;
13
17
  setUploadProgress: (params: {
14
18
  id: string;
15
19
  progress: number;
@@ -3,6 +3,10 @@ import { StorageManagerProps } from '../../types';
3
3
  import { UseStorageManager } from '../useStorageManager';
4
4
  export interface UseUploadFilesProps extends Pick<StorageManagerProps, 'isResumable' | 'onUploadSuccess' | 'onUploadError' | 'onUploadStart' | 'maxFileCount' | 'processFile'>, Pick<UseStorageManager, 'setUploadingFile' | 'setUploadProgress' | 'setUploadSuccess' | 'files'> {
5
5
  accessLevel?: StorageManagerProps['accessLevel'];
6
+ onProcessFileSuccess: (input: {
7
+ id: string;
8
+ processedKey: string;
9
+ }) => void;
6
10
  path?: string | PathCallback;
7
11
  }
8
- export declare function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, setUploadingFile, setUploadSuccess, onUploadError, onUploadSuccess, onUploadStart, maxFileCount, processFile, path, }: UseUploadFilesProps): void;
12
+ export declare function useUploadFiles({ accessLevel, files, isResumable, maxFileCount, onProcessFileSuccess, onUploadError, onUploadStart, onUploadSuccess, path, processFile, setUploadingFile, setUploadProgress, setUploadSuccess, }: UseUploadFilesProps): void;
@@ -15,6 +15,7 @@ export interface StorageFile {
15
15
  file?: File;
16
16
  status: FileStatus;
17
17
  progress: number;
18
+ processedKey?: string;
18
19
  uploadTask?: UploadTask;
19
20
  key: string;
20
21
  error: string;
@@ -6,8 +6,11 @@ export interface GetInputParams {
6
6
  accessLevel: StorageAccessLevel | undefined;
7
7
  file: File;
8
8
  key: string;
9
+ onProcessFileSuccess: (input: {
10
+ processedKey: string;
11
+ }) => void;
9
12
  onProgress: NonNullable<UploadDataWithPathInput['options']>['onProgress'];
10
13
  path: string | PathCallback | undefined;
11
14
  processFile: ProcessFile | undefined;
12
15
  }
13
- export declare const getInput: ({ accessLevel, file, key, onProgress, path, processFile, }: GetInputParams) => () => Promise<PathInput | UploadDataInput>;
16
+ export declare const getInput: ({ accessLevel, file, key, onProcessFileSuccess, onProgress, path, processFile, }: GetInputParams) => () => Promise<PathInput | UploadDataInput>;
@@ -1 +1 @@
1
- export declare const VERSION = "3.1.3";
1
+ export declare const VERSION = "3.1.6";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui-react-storage",
3
- "version": "0.0.0-theming-v2-c5d1f72-20240709163904",
3
+ "version": "0.0.0-theming-v2-882f11a-20240805184032",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {
@@ -39,9 +39,9 @@
39
39
  "typecheck": "tsc --noEmit"
40
40
  },
41
41
  "dependencies": {
42
- "@aws-amplify/ui": "0.0.0-theming-v2-c5d1f72-20240709163904",
43
- "@aws-amplify/ui-react": "0.0.0-theming-v2-c5d1f72-20240709163904",
44
- "@aws-amplify/ui-react-core": "0.0.0-theming-v2-c5d1f72-20240709163904",
42
+ "@aws-amplify/ui": "0.0.0-theming-v2-882f11a-20240805184032",
43
+ "@aws-amplify/ui-react": "0.0.0-theming-v2-882f11a-20240805184032",
44
+ "@aws-amplify/ui-react-core": "0.0.0-theming-v2-882f11a-20240805184032",
45
45
  "lodash": "4.17.21",
46
46
  "tslib": "^2.5.2"
47
47
  },