@aws-amplify/ui-react-storage 3.1.2 → 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.
- package/dist/esm/components/StorageManager/StorageManager.mjs +5 -2
- package/dist/esm/components/StorageManager/hooks/useStorageManager/actions.mjs +5 -1
- package/dist/esm/components/StorageManager/hooks/useStorageManager/reducer.mjs +22 -61
- package/dist/esm/components/StorageManager/hooks/useStorageManager/types.mjs +1 -0
- package/dist/esm/components/StorageManager/hooks/useStorageManager/useStorageManager.mjs +5 -1
- package/dist/esm/components/StorageManager/hooks/useUploadFiles/useUploadFiles.mjs +4 -1
- package/dist/esm/components/StorageManager/ui/FileList/FileRemoveButton.mjs +1 -1
- package/dist/esm/components/StorageManager/utils/getInput.mjs +10 -4
- package/dist/esm/version.mjs +1 -1
- package/dist/index.js +52 -70
- package/dist/styles.css +1 -1
- package/dist/types/components/StorageManager/hooks/useStorageManager/actions.d.ts +4 -0
- package/dist/types/components/StorageManager/hooks/useStorageManager/types.d.ts +5 -0
- package/dist/types/components/StorageManager/hooks/useStorageManager/useStorageManager.d.ts +4 -0
- package/dist/types/components/StorageManager/hooks/useUploadFiles/useUploadFiles.d.ts +5 -1
- package/dist/types/components/StorageManager/types.d.ts +1 -0
- package/dist/types/components/StorageManager/utils/getInput.d.ts +4 -1
- package/dist/types/version.d.ts +1 -1
- package/package.json +4 -4
|
@@ -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
|
-
|
|
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
|
|
55
|
-
const
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
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
|
|
77
|
-
|
|
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
|
|
97
|
-
|
|
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({
|
|
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:
|
|
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
|
|
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}${
|
|
26
|
+
const resolvedPath = `${hasCallbackPath ? path({ identityId }) : path}${processedKey}`;
|
|
21
27
|
return { data: file, path: resolvedPath, options };
|
|
22
28
|
};
|
|
23
29
|
};
|
package/dist/esm/version.mjs
CHANGED
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.
|
|
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
|
|
159
|
-
const
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
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
|
|
181
|
-
|
|
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
|
|
201
|
-
|
|
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:
|
|
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
|
|
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}${
|
|
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({
|
|
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
|
-
|
|
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
|
@@ -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({
|
|
12
|
+
export declare function useUploadFiles({ accessLevel, files, isResumable, maxFileCount, onProcessFileSuccess, onUploadError, onUploadStart, onUploadSuccess, path, processFile, setUploadingFile, setUploadProgress, setUploadSuccess, }: UseUploadFilesProps): void;
|
|
@@ -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>;
|
package/dist/types/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const VERSION = "3.1.
|
|
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
|
+
"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.
|
|
43
|
-
"@aws-amplify/ui-react": "6.1.
|
|
44
|
-
"@aws-amplify/ui-react-core": "3.0.
|
|
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
|
},
|