@aws-amplify/ui-react-storage 3.0.18 → 3.1.0

package/dist/esm/components/StorageImage/StorageImage.mjs

@@ -1,31 +1,57 @@
 import * as React from 'react';
-import { isUndefined, classNames, ComponentClassName } from '@aws-amplify/ui';
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
 import { Image } from '@aws-amplify/ui-react';
-import { useStorageURL } from '@aws-amplify/ui-react/internal';
-import { useSetUserAgent } from '@aws-amplify/ui-react-core';
+import { useDeprecationWarning } from '@aws-amplify/ui-react/internal';
+import { useSetUserAgent, useGetUrl } from '@aws-amplify/ui-react-core';
 import { VERSION } from '../../version.mjs';
 
-const StorageImage = ({ accessLevel, className, fallbackSrc, identityId, imgKey, onStorageGetError, validateObjectExistence, ...rest }) => {
-    const resolvedValidateObjectExistence = isUndefined(validateObjectExistence)
-        ? true
-        : validateObjectExistence;
-    const options = React.useMemo(() => ({
-        accessLevel,
-        targetIdentityId: identityId,
-        validateObjectExistence: resolvedValidateObjectExistence,
-    }), [accessLevel, identityId, resolvedValidateObjectExistence]);
+const MISSING_REQUIRED_PROP_MESSAGE = '`StorageImage` requires either an `imgKey` or `path` prop.';
+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';
+const HAS_PATH_AND_KEY_MESSAGE = '`imgKey` is ignored when both `imgKey` and `path` props are provided.';
+const HAS_PATH_AND_UNSUPPORTED_OPTIONS_MESSAGE = '`accessLevel` and `identityId` are ignored when the `path` prop is provided.';
+const getDeprecationMessage = ({ hasImgkey, hasPath, hasDeprecatedOptions, }) => {
+    let message = '';
+    if (hasPath && hasImgkey) {
+        message = HAS_PATH_AND_KEY_MESSAGE;
+    }
+    else if (hasPath && hasDeprecatedOptions) {
+        message = HAS_PATH_AND_UNSUPPORTED_OPTIONS_MESSAGE;
+    }
+    else if (hasImgkey) {
+        message = HAS_DEPRECATED_PROPS_MESSAGE;
+    }
+    return message;
+};
+const StorageImage = ({ accessLevel, className, fallbackSrc, identityId, imgKey, path, onStorageGetError, onGetUrlError, validateObjectExistence = true, ...rest }) => {
+    const hasImgkey = !!imgKey;
+    const hasPath = !!path;
+    const hasDeprecatedOptions = !!accessLevel || !!identityId;
+    const message = getDeprecationMessage({
+        hasDeprecatedOptions,
+        hasImgkey,
+        hasPath,
+    });
+    useDeprecationWarning({ message, shouldWarn: !!message });
+    if (!hasImgkey && !hasPath) {
+        throw new Error(MISSING_REQUIRED_PROP_MESSAGE);
+    }
     useSetUserAgent({
         componentName: 'StorageImage',
         packageName: 'react-storage',
         version: VERSION,
     });
-    const url = useStorageURL({
-        key: imgKey,
-        options,
-        fallbackURL: fallbackSrc,
-        onStorageGetError,
-    });
-    return (React.createElement(Image, { ...rest, className: classNames(ComponentClassName.StorageImage, className), src: url }));
+    const onError = onGetUrlError ?? onStorageGetError;
+    const input = React.useMemo(() => ({
+        ...(path ? { path } : { key: imgKey }),
+        onError,
+        options: {
+            accessLevel,
+            targetIdentityId: identityId,
+            validateObjectExistence,
+        },
+    }), [accessLevel, imgKey, identityId, onError, path, validateObjectExistence]);
+    const { url } = useGetUrl(input);
+    return (React.createElement(Image, { ...rest, className: classNames(ComponentClassName.StorageImage, className), src: url?.toString() ?? fallbackSrc }));
 };
 
-export { StorageImage };
+export { HAS_DEPRECATED_PROPS_MESSAGE, HAS_PATH_AND_KEY_MESSAGE, HAS_PATH_AND_UNSUPPORTED_OPTIONS_MESSAGE, MISSING_REQUIRED_PROP_MESSAGE, StorageImage };

package/dist/esm/components/StorageManager/StorageManager.mjs

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getLogger, ComponentClassName } from '@aws-amplify/ui';
 import { VisuallyHidden } from '@aws-amplify/ui-react';
-import { useSetUserAgent } from '@aws-amplify/ui-react-core';
+import { useDeprecationWarning, useSetUserAgent } from '@aws-amplify/ui-react-core';
 import { useDropZone } from '@aws-amplify/ui-react/internal';
 import { useStorageManager } from './hooks/useStorageManager/useStorageManager.mjs';
 import { useUploadFiles } from './hooks/useUploadFiles/useUploadFiles.mjs';
@@ -15,14 +15,26 @@ import { FilePicker } from './ui/FilePicker/FilePicker.mjs';
 import { checkMaxFileSize } from './utils/checkMaxFileSize.mjs';
 import { defaultStorageManagerDisplayText } from './utils/displayText.mjs';
 import { filterAllowedFiles } from './utils/filterAllowedFiles.mjs';
+import 'aws-amplify/auth';
 import 'aws-amplify/storage';
 import { VERSION } from '../../version.mjs';
 
 const logger = getLogger('Storage');
-function StorageManagerBase({ acceptedFileTypes = [], accessLevel, autoUpload = true, defaultFiles, displayText: overrideDisplayText, isResumable = false, maxFileCount, maxFileSize, onUploadError, onUploadSuccess, onFileRemove, onUploadStart, showThumbnails = true, processFile, components, path, }, ref) {
-    if (!accessLevel || !maxFileCount) {
-        logger.warn('StorageManager requires accessLevel and maxFileCount props');
+const MISSING_REQUIRED_PROPS_MESSAGE = '`StorageManager` requires a `maxFileCount` prop to be provided.';
+const ACCESS_LEVEL_WITH_PATH_CALLBACK_MESSAGE = '`StorageManager` does not allow usage of a `path` callback prop with an `accessLevel` prop.';
+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/storagemanager';
+const StorageManagerBase = React.forwardRef(function StorageManager({ acceptedFileTypes = [], accessLevel, autoUpload = true, components, defaultFiles, displayText: overrideDisplayText, isResumable = false, maxFileCount, maxFileSize, onFileRemove, onUploadError, onUploadStart, onUploadSuccess, path, processFile, showThumbnails = true, }, ref) {
+    if (!maxFileCount) {
+        // eslint-disable-next-line no-console
+        console.warn(MISSING_REQUIRED_PROPS_MESSAGE);
     }
+    if (accessLevel && typeof path === 'function') {
+        throw new Error(ACCESS_LEVEL_WITH_PATH_CALLBACK_MESSAGE);
+    }
+    useDeprecationWarning({
+        message: ACCESS_LEVEL_DEPRECATION_MESSAGE,
+        shouldWarn: !!accessLevel,
+    });
     const Components = {
         Container,
         DropZone,
@@ -95,15 +107,15 @@ function StorageManagerBase({ acceptedFileTypes = [], accessLevel, autoUpload =
     const onUploadAll = () => {
         queueFiles();
     };
-    const onPauseUpload = ({ id, uploadTask, }) => {
+    const onPauseUpload = ({ id, uploadTask }) => {
         uploadTask.pause();
         setUploadPaused({ id });
     };
-    const onResumeUpload = ({ id, uploadTask, }) => {
+    const onResumeUpload = ({ id, uploadTask }) => {
         uploadTask.resume();
         setUploadResumed({ id });
     };
-    const onCancelUpload = ({ id, uploadTask, }) => {
+    const onCancelUpload = ({ id, uploadTask }) => {
         // At this time we don't know if the delete
         // permissions are enabled (required to cancel upload),
         // so we do a pause instead and remove from files
@@ -155,8 +167,9 @@ function StorageManagerBase({ acceptedFileTypes = [], accessLevel, autoUpload =
         hasFiles ? (React.createElement(Components.FileListHeader, { allUploadsSuccessful: allUploadsSuccessful, displayText: displayText, fileCount: files.length, remainingFilesCount: remainingFilesCount, selectedFilesCount: selectedFilesCount })) : null,
         React.createElement(Components.FileList, { displayText: displayText, files: files, isResumable: isResumable, onCancelUpload: onCancelUpload, onDeleteUpload: onDeleteUpload, onResume: onResumeUpload, onPause: onPauseUpload, showThumbnails: showThumbnails, hasMaxFilesError: hasMaxFilesError, maxFileCount: maxFileCount }),
         hasUploadActions ? (React.createElement(Components.FileListFooter, { displayText: displayText, remainingFilesCount: remainingFilesCount, onClearAll: onClearAll, onUploadAll: onUploadAll })) : null));
-}
-const StorageManager = Object.assign(React.forwardRef(StorageManagerBase), {
+});
+// pass an empty object as first param to avoid destructive action on `StorageManagerBase`
+const StorageManager = Object.assign({}, StorageManagerBase, {
     Container,
     DropZone,
     FileList,
@@ -165,4 +178,4 @@ const StorageManager = Object.assign(React.forwardRef(StorageManagerBase), {
     FilePicker,
 });
 
-export { StorageManager };
+export { ACCESS_LEVEL_DEPRECATION_MESSAGE, ACCESS_LEVEL_WITH_PATH_CALLBACK_MESSAGE, MISSING_REQUIRED_PROPS_MESSAGE, StorageManager };

package/dist/esm/components/StorageManager/hooks/useStorageManager/actions.mjs

@@ -1,49 +1,35 @@
 import { StorageManagerActionTypes } from './types.mjs';
 
-const addFilesAction = ({ files, status, getFileErrorMessage, }) => {
-    return {
-        type: StorageManagerActionTypes.ADD_FILES,
-        files,
-        status,
-        getFileErrorMessage,
-    };
-};
-const clearFilesAction = () => {
-    return {
-        type: StorageManagerActionTypes.CLEAR_FILES,
-    };
-};
-const queueFilesAction = () => {
-    return {
-        type: StorageManagerActionTypes.QUEUE_FILES,
-    };
-};
-const setUploadingFileAction = ({ id, uploadTask, }) => {
-    return {
-        type: StorageManagerActionTypes.SET_STATUS_UPLOADING,
-        id,
-        uploadTask,
-    };
-};
-const setUploadProgressAction = ({ id, progress, }) => {
-    return {
-        type: StorageManagerActionTypes.SET_UPLOAD_PROGRESS,
-        id,
-        progress,
-    };
-};
-const setUploadStatusAction = ({ id, status, }) => {
-    return {
-        type: StorageManagerActionTypes.SET_STATUS,
-        id,
-        status,
-    };
-};
-const removeUploadAction = ({ id }) => {
-    return {
-        type: StorageManagerActionTypes.REMOVE_UPLOAD,
-        id,
-    };
-};
+const addFilesAction = ({ files, status, getFileErrorMessage, }) => ({
+    type: StorageManagerActionTypes.ADD_FILES,
+    files,
+    status,
+    getFileErrorMessage,
+});
+const clearFilesAction = () => ({
+    type: StorageManagerActionTypes.CLEAR_FILES,
+});
+const queueFilesAction = () => ({
+    type: StorageManagerActionTypes.QUEUE_FILES,
+});
+const setUploadingFileAction = ({ id, uploadTask, }) => ({
+    type: StorageManagerActionTypes.SET_STATUS_UPLOADING,
+    id,
+    uploadTask,
+});
+const setUploadProgressAction = ({ id, progress, }) => ({
+    type: StorageManagerActionTypes.SET_UPLOAD_PROGRESS,
+    id,
+    progress,
+});
+const setUploadStatusAction = ({ id, status, }) => ({
+    type: StorageManagerActionTypes.SET_STATUS,
+    id,
+    status,
+});
+const removeUploadAction = ({ id }) => ({
+    type: StorageManagerActionTypes.REMOVE_UPLOAD,
+    id,
+});
 
 export { addFilesAction, clearFilesAction, queueFilesAction, removeUploadAction, setUploadProgressAction, setUploadStatusAction, setUploadingFileAction };

package/dist/esm/components/StorageManager/hooks/useStorageManager/reducer.mjs

@@ -60,7 +60,7 @@ function storageManagerStateReducer(state, action) {
                             ...currentFile,
                             status: FileStatus.UPLOADING,
                             progress: 0,
-                            uploadTask: uploadTask ? uploadTask : undefined,
+                            uploadTask,
                         },
                     ];
                 }

package/dist/esm/components/StorageManager/hooks/useUploadFiles/useUploadFiles.mjs

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { isString, isFunction } from '@aws-amplify/ui';
+import { isFunction } from '@aws-amplify/ui';
+import { getInput } from '../../utils/getInput.mjs';
 import { uploadFile } from '../../utils/uploadFile.mjs';
 import { FileStatus } from '../../types.mjs';
-import { resolveFile } from './resolveFile.mjs';
 
 function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, setUploadingFile, setUploadSuccess, onUploadError, onUploadSuccess, onUploadStart, maxFileCount, processFile, path, }) {
     React.useEffect(() => {
@@ -11,44 +11,47 @@ function useUploadFiles({ files, accessLevel, isResumable, setUploadProgress, se
             return;
         }
         for (const { file, key, id } of filesReadyToUpload) {
-            const onComplete = (event) => {
-                if (isFunction(onUploadSuccess)) {
-                    onUploadSuccess(event);
-                }
-                setUploadSuccess({ id });
-            };
             const onProgress = (event) => {
                 /**
                  * When a file is zero bytes, the progress.total will equal zero.
                  * Therefore, this will prevent a divide by zero error.
                  */
-                const progressPercentage = event.totalBytes === undefined || event.totalBytes === 0
+                const progress = event.totalBytes === undefined || event.totalBytes === 0
                     ? 100
                     : Math.floor((event.transferredBytes / event.totalBytes) * 100);
-                setUploadProgress({ id, progress: progressPercentage });
+                setUploadProgress({ id, progress });
             };
             if (file) {
-                resolveFile({ processFile, file, key }).then(({ key: processedKey, ...rest }) => {
-                    // prepend `path` to `processedKey`
-                    const resolvedKey = isString(path)
-                        ? `${path}${processedKey}`
-                        : processedKey;
-                    if (isFunction(onUploadStart)) {
-                        onUploadStart({ key: resolvedKey });
-                    }
-                    const uploadTask = uploadFile({
-                        ...rest,
-                        key: resolvedKey,
-                        level: accessLevel,
-                        progressCallback: onProgress,
-                        errorCallback: (error) => {
-                            if (isFunction(onUploadError)) {
-                                onUploadError(error, { key: resolvedKey });
-                            }
-                        },
-                        completeCallback: onComplete,
-                    });
-                    setUploadingFile({ id, uploadTask });
+                const input = getInput({
+                    accessLevel,
+                    file,
+                    key,
+                    onProgress,
+                    path,
+                    processFile,
+                });
+                uploadFile({
+                    input,
+                    onComplete: (event) => {
+                        if (isFunction(onUploadSuccess)) {
+                            onUploadSuccess({
+                                key: event.key ??
+                                    event.path,
+                            });
+                        }
+                        setUploadSuccess({ id });
+                    },
+                    onError: ({ key, error }) => {
+                        if (isFunction(onUploadError)) {
+                            onUploadError(error.message, { key });
+                        }
+                    },
+                    onStart: ({ key, uploadTask }) => {
+                        if (isFunction(onUploadStart)) {
+                            onUploadStart({ key });
+                        }
+                        setUploadingFile({ id, uploadTask });
+                    },
                 });
             }
         }

package/dist/esm/components/StorageManager/ui/FileList/FileDetails.mjs

@@ -2,6 +2,7 @@ import React__default from 'react';
 import { ComponentClassName } from '@aws-amplify/ui';
 import { View, Text } from '@aws-amplify/ui-react';
 import { humanFileSize } from '../../utils/humanFileSize.mjs';
+import 'aws-amplify/auth';
 import 'aws-amplify/storage';
 
 const UploadDetails = ({ displayName, fileSize, }) => {

package/dist/esm/components/StorageManager/utils/getInput.mjs

@@ -0,0 +1,25 @@
+import { fetchAuthSession } from 'aws-amplify/auth';
+import { isTypedFunction, isString } from '@aws-amplify/ui';
+import { resolveFile } from './resolveFile.mjs';
+
+const getInput = ({ accessLevel, file, key, onProgress, path, processFile, }) => {
+    return async () => {
+        const hasCallbackPath = isTypedFunction(path);
+        const hasStringPath = isString(path);
+        const hasKeyInput = !!accessLevel && !hasCallbackPath;
+        const { file: data, key: fileKey, ...rest } = await resolveFile({ file, key, processFile });
+        const contentType = file.type || 'binary/octet-stream';
+        // IMPORTANT: always pass `...rest` here for backwards compatibility
+        const options = { contentType, onProgress, ...rest };
+        if (hasKeyInput) {
+            // legacy handling of `path` is to prefix to `fileKey`
+            const resolvedKey = hasStringPath ? `${path}${fileKey}` : fileKey;
+            return { data, key: resolvedKey, options: { ...options, accessLevel } };
+        }
+        const { identityId } = await fetchAuthSession();
+        const resolvedPath = `${hasCallbackPath ? path({ identityId }) : path}${fileKey}`;
+        return { data: file, path: resolvedPath, options };
+    };
+};
+
+export { getInput };

package/dist/esm/components/StorageManager/{hooks/useUploadFiles → utils}/resolveFile.mjs

@@ -5,11 +5,9 @@ import { isFunction } from '@aws-amplify/ui';
  * and returns a Promise that resolves to { file, key, ..rest }
  * regardless if processFile is defined and if it is sync or async
  */
-const resolveFile = ({ processFile, file, key, }) => {
+const resolveFile = ({ processFile, ...input }) => {
     return new Promise((resolve, reject) => {
-        const result = isFunction(processFile)
-            ? processFile({ file, key })
-            : { file, key };
+        const result = isFunction(processFile) ? processFile(input) : input;
         if (result instanceof Promise) {
             result.then(resolve).catch(reject);
         }

package/dist/esm/components/StorageManager/utils/uploadFile.mjs

@@ -1,29 +1,26 @@
 import { uploadData } from 'aws-amplify/storage';
+import { isFunction } from '@aws-amplify/ui';
 
-function uploadFile({ file, key, level = 'private', progressCallback: onProgress, errorCallback, completeCallback, ...rest }) {
-    const contentType = file.type || 'binary/octet-stream';
-    const input = {
-        key,
-        data: file,
-        options: {
-            accessLevel: level,
-            contentType,
-            onProgress,
-            ...rest,
-        },
-    };
-    const output = uploadData(input);
-    output.result
-        .then(() => {
-        if (output.state === 'SUCCESS') {
-            completeCallback?.({ key });
+async function uploadFile({ input, onError, onStart, onComplete, }) {
+    const resolvedInput = await input();
+    const uploadTask = uploadData(resolvedInput);
+    const key = resolvedInput?.key ??
+        resolvedInput?.path;
+    if (isFunction(onStart)) {
+        onStart({ key, uploadTask });
+    }
+    uploadTask.result
+        .then((result) => {
+        if (isFunction(onComplete) && uploadTask.state === 'SUCCESS') {
+            onComplete(result);
         }
     })
-        .catch((e) => {
-        const error = e;
-        errorCallback?.(error.message);
+        .catch((error) => {
+        if (isFunction(onError)) {
+            onError({ key, error });
+        }
     });
-    return output;
+    return uploadTask;
 }
 
 export { uploadFile };

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '3.0.18';
+const VERSION = '3.1.0';
 
 export { VERSION };