@aws-amplify/ui-react-storage 3.1.3 → 3.1.4

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,22 +2,28 @@ 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
+ if (processFile) {
12
+ // provide post-processing value of target `key`
13
+ onProcessFileSuccess({ processedKey });
14
+ }
11
15
  const contentType = file.type || 'binary/octet-stream';
12
16
  // IMPORTANT: always pass `...rest` here for backwards compatibility
13
17
  const options = { contentType, onProgress, ...rest };
14
18
  if (hasKeyInput) {
15
19
  // legacy handling of `path` is to prefix to `fileKey`
16
- const resolvedKey = hasStringPath ? `${path}${fileKey}` : fileKey;
20
+ const resolvedKey = hasStringPath
21
+ ? `${path}${processedKey}`
22
+ : processedKey;
17
23
  return { data, key: resolvedKey, options: { ...options, accessLevel } };
18
24
  }
19
25
  const { identityId } = await fetchAuthSession();
20
- const resolvedPath = `${hasCallbackPath ? path({ identityId }) : path}${fileKey}`;
26
+ const resolvedPath = `${hasCallbackPath ? path({ identityId }) : path}${processedKey}`;
21
27
  return { data: file, path: resolvedPath, options };
22
28
  };
23
29
  };
@@ -1,3 +1,3 @@
1
- const VERSION = '3.1.3';
1
+ const VERSION = '3.1.4';
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.4';
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,22 +404,28 @@ 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 });
413
+ if (processFile) {
414
+ // provide post-processing value of target `key`
415
+ onProcessFileSuccess({ processedKey });
416
+ }
443
417
  const contentType = file.type || 'binary/octet-stream';
444
418
  // IMPORTANT: always pass `...rest` here for backwards compatibility
445
419
  const options = { contentType, onProgress, ...rest };
446
420
  if (hasKeyInput) {
447
421
  // legacy handling of `path` is to prefix to `fileKey`
448
- const resolvedKey = hasStringPath ? `${path}${fileKey}` : fileKey;
422
+ const resolvedKey = hasStringPath
423
+ ? `${path}${processedKey}`
424
+ : processedKey;
449
425
  return { data, key: resolvedKey, options: { ...options, accessLevel } };
450
426
  }
451
427
  const { identityId } = await auth.fetchAuthSession();
452
- const resolvedPath = `${hasCallbackPath ? path({ identityId }) : path}${fileKey}`;
428
+ const resolvedPath = `${hasCallbackPath ? path({ identityId }) : path}${processedKey}`;
453
429
  return { data: file, path: resolvedPath, options };
454
430
  };
455
431
  };
@@ -476,7 +452,7 @@ async function uploadFile({ input, onError, onStart, onComplete, }) {
476
452
  return uploadTask;
477
453
  }
478
454
 
479
- function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, setUploadingFile, setUploadSuccess, onUploadError, onUploadSuccess, onUploadStart, maxFileCount, processFile, path, }) {
455
+ function useUploadFiles({ accessLevel, files, isResumable, maxFileCount, onProcessFileSuccess, onUploadError, onUploadStart, onUploadSuccess, path, processFile, setUploadingFile, setUploadProgress, setUploadSuccess, }) {
480
456
  React__namespace.useEffect(() => {
481
457
  const filesReadyToUpload = files.filter((file) => file.status === FileStatus.QUEUED);
482
458
  if (filesReadyToUpload.length > maxFileCount) {
@@ -494,10 +470,12 @@ function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, se
494
470
  setUploadProgress({ id, progress });
495
471
  };
496
472
  if (file) {
473
+ const handleProcessFileSuccess = (input) => onProcessFileSuccess({ id, ...input });
497
474
  const input = getInput({
498
475
  accessLevel,
499
476
  file,
500
477
  key,
478
+ onProcessFileSuccess: handleProcessFileSuccess,
501
479
  onProgress,
502
480
  path,
503
481
  processFile,
@@ -534,6 +512,7 @@ function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, se
534
512
  setUploadProgress,
535
513
  setUploadingFile,
536
514
  onUploadError,
515
+ onProcessFileSuccess,
537
516
  onUploadSuccess,
538
517
  onUploadStart,
539
518
  maxFileCount,
@@ -580,7 +559,7 @@ const FileStatusMessage = ({ errorMessage, getPausedText, getUploadingText, perc
580
559
 
581
560
  const FileRemoveButton = ({ altText, onClick, }) => {
582
561
  const icons = internal.useIcons('storageManager');
583
- return (React__default["default"].createElement(uiReact.Button, { size: "small", onClick: onClick },
562
+ return (React__default["default"].createElement(uiReact.Button, { size: "small", onClick: onClick, testId: "storage-manager-remove-button" },
584
563
  React__default["default"].createElement(uiReact.VisuallyHidden, null, altText),
585
564
  React__default["default"].createElement(uiReact.View, { as: "span", "aria-hidden": true, fontSize: "medium" }, icons?.remove ?? React__default["default"].createElement(internal.IconClose, null))));
586
565
  };
@@ -708,7 +687,7 @@ const StorageManagerBase = React__namespace.forwardRef(function StorageManager({
708
687
  getFileSizeErrorText,
709
688
  });
710
689
  };
711
- const { addFiles, clearFiles, files, removeUpload, queueFiles, setUploadingFile, setUploadPaused, setUploadProgress, setUploadSuccess, setUploadResumed, } = useStorageManager(defaultFiles);
690
+ const { addFiles, clearFiles, files, removeUpload, queueFiles, setProcessedKey, setUploadingFile, setUploadPaused, setUploadProgress, setUploadSuccess, setUploadResumed, } = useStorageManager(defaultFiles);
712
691
  React__namespace.useImperativeHandle(ref, () => ({ clearFiles }));
713
692
  const { dragState, ...dropZoneProps } = internal.useDropZone({
714
693
  acceptedFileTypes,
@@ -734,6 +713,7 @@ const StorageManagerBase = React__namespace.forwardRef(function StorageManager({
734
713
  onUploadError,
735
714
  onUploadSuccess,
736
715
  onUploadStart,
716
+ onProcessFileSuccess: setProcessedKey,
737
717
  setUploadingFile,
738
718
  setUploadProgress,
739
719
  setUploadSuccess,
@@ -780,7 +760,9 @@ const StorageManagerBase = React__namespace.forwardRef(function StorageManager({
780
760
  if (typeof onFileRemove === 'function') {
781
761
  const file = files.find((file) => file.id === id);
782
762
  if (file) {
783
- onFileRemove({ key: file.key });
763
+ // return `processedKey` if available and `processFile` is provided
764
+ const key = (processFile && file?.processedKey) ?? file.key;
765
+ onFileRemove({ key });
784
766
  }
785
767
  }
786
768
  };
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.4";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui-react-storage",
3
- "version": "3.1.3",
3
+ "version": "3.1.4",
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": "6.0.16",
43
- "@aws-amplify/ui-react": "6.1.12",
44
- "@aws-amplify/ui-react-core": "3.0.16",
42
+ "@aws-amplify/ui": "6.0.17",
43
+ "@aws-amplify/ui-react": "6.1.13",
44
+ "@aws-amplify/ui-react-core": "3.0.17",
45
45
  "lodash": "4.17.21",
46
46
  "tslib": "^2.5.2"
47
47
  },