@aws-amplify/ui-react-storage 3.2.1 → 3.3.0

package/dist/esm/components/FileUploader/FileUploader.mjs

@@ -0,0 +1,185 @@
+import * as React from 'react';
+import { getLogger, ComponentClassName } from '@aws-amplify/ui';
+import { VisuallyHidden } from '@aws-amplify/ui-react';
+import { useDeprecationWarning, useSetUserAgent } from '@aws-amplify/ui-react-core';
+import { useDropZone } from '@aws-amplify/ui-react/internal';
+import { useFileUploader } from './hooks/useFileUploader/useFileUploader.mjs';
+import { useUploadFiles } from './hooks/useUploadFiles/useUploadFiles.mjs';
+import { FileStatus } from './types.mjs';
+import { Container } from './ui/Container/Container.mjs';
+import { DropZone } from './ui/DropZone/DropZone.mjs';
+import { FileList } from './ui/FileList/FileList.mjs';
+import { FileListHeader } from './ui/FileListHeader/FileListHeader.mjs';
+import { FileListFooter } from './ui/FileListFooter/FileListFooter.mjs';
+import { FilePicker } from './ui/FilePicker/FilePicker.mjs';
+import { checkMaxFileSize } from './utils/checkMaxFileSize.mjs';
+import { defaultFileUploaderDisplayText } 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');
+const MISSING_REQUIRED_PROPS_MESSAGE = '`FileUploader` requires a `maxFileCount` prop to be provided.';
+const ACCESS_LEVEL_WITH_PATH_CALLBACK_MESSAGE = '`FileUploader` 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/FileUploader';
+const FileUploaderBase = React.forwardRef(function FileUploader({ acceptedFileTypes = [], accessLevel, autoUpload = true, components, defaultFiles, displayText: overrideDisplayText, isResumable = false, maxFileCount, maxFileSize, onFileRemove, onUploadError, onUploadStart, onUploadSuccess, path, processFile, showThumbnails = true, useAccelerateEndpoint, }, 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,
+        FileList,
+        FilePicker,
+        FileListHeader,
+        FileListFooter,
+        ...components,
+    };
+    const allowMultipleFiles = maxFileCount === undefined ||
+        (typeof maxFileCount === 'number' && maxFileCount > 1);
+    const displayText = {
+        ...defaultFileUploaderDisplayText,
+        ...overrideDisplayText,
+    };
+    const { getFileSizeErrorText } = displayText;
+    const getMaxFileSizeErrorMessage = (file) => {
+        return checkMaxFileSize({
+            file,
+            maxFileSize,
+            getFileSizeErrorText,
+        });
+    };
+    const { addFiles, clearFiles, files, removeUpload, queueFiles, setProcessedKey, setUploadingFile, setUploadPaused, setUploadProgress, setUploadSuccess, setUploadResumed, } = useFileUploader(defaultFiles);
+    React.useImperativeHandle(ref, () => ({ clearFiles }));
+    const { dragState, ...dropZoneProps } = useDropZone({
+        acceptedFileTypes,
+        onDropComplete: ({ acceptedFiles, rejectedFiles }) => {
+            if (rejectedFiles && rejectedFiles.length > 0) {
+                logger.warn('Rejected files: ', rejectedFiles);
+            }
+            // We need to filter out files by extension here,
+            // we don't get filenames on the drag event, only on drop
+            const _acceptedFiles = filterAllowedFiles(acceptedFiles, acceptedFileTypes);
+            addFiles({
+                files: _acceptedFiles,
+                status: autoUpload ? FileStatus.QUEUED : FileStatus.ADDED,
+                getFileErrorMessage: getMaxFileSizeErrorMessage,
+            });
+        },
+    });
+    useUploadFiles({
+        accessLevel,
+        files,
+        isResumable,
+        maxFileCount,
+        onUploadError,
+        onUploadSuccess,
+        onUploadStart,
+        onProcessFileSuccess: setProcessedKey,
+        setUploadingFile,
+        setUploadProgress,
+        setUploadSuccess,
+        processFile,
+        path,
+        useAccelerateEndpoint,
+    });
+    const onFilePickerChange = (event) => {
+        const { files } = event.target;
+        if (!files || files.length === 0) {
+            return;
+        }
+        addFiles({
+            files: Array.from(files),
+            status: autoUpload ? FileStatus.QUEUED : FileStatus.ADDED,
+            getFileErrorMessage: getMaxFileSizeErrorMessage,
+        });
+    };
+    const onClearAll = () => {
+        clearFiles();
+    };
+    const onUploadAll = () => {
+        queueFiles();
+    };
+    const onPauseUpload = ({ id, uploadTask }) => {
+        uploadTask.pause();
+        setUploadPaused({ id });
+    };
+    const onResumeUpload = ({ id, uploadTask }) => {
+        uploadTask.resume();
+        setUploadResumed({ id });
+    };
+    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
+        uploadTask.pause();
+        removeUpload({ id });
+    };
+    const onDeleteUpload = ({ id }) => {
+        // At this time we don't know if the delete
+        // permissions are enabled, so we do a soft delete
+        // from file list, but don't remove from storage
+        removeUpload({ id });
+        if (typeof onFileRemove === 'function') {
+            const file = files.find((file) => file.id === id);
+            if (file) {
+                // return `processedKey` if available and `processFile` is provided
+                const key = (processFile && file?.processedKey) ?? file.key;
+                onFileRemove({ key });
+            }
+        }
+    };
+    // checks if all downloads completed to 100%
+    const allUploadsSuccessful = files.length === 0
+        ? false
+        : files.every((file) => file?.status === FileStatus.UPLOADED);
+    // Displays if over max files
+    const hasMaxFilesError = files.filter((file) => file.progress < 100).length > maxFileCount;
+    const uploadedFilesLength = files.filter((file) => file?.status === FileStatus.UPLOADED).length;
+    const remainingFilesCount = files.length - uploadedFilesLength;
+    // number of files selected for upload when autoUpload is turned off
+    const selectedFilesCount = autoUpload ? 0 : remainingFilesCount;
+    const hasFiles = files.length > 0;
+    const hasUploadActions = !autoUpload && remainingFilesCount > 0;
+    const hiddenInput = React.useRef(null);
+    function handleClick() {
+        if (hiddenInput.current) {
+            hiddenInput.current.click();
+            hiddenInput.current.value = '';
+        }
+    }
+    useSetUserAgent({
+        componentName: 'FileUploader',
+        packageName: 'react-storage',
+        version: VERSION,
+    });
+    return (React.createElement(Components.Container, { className: `${ComponentClassName.FileUploader} ${hasFiles ? ComponentClassName.FileUploaderPreviewer : ''}` },
+        React.createElement(Components.DropZone, { inDropZone: dragState !== 'inactive', ...dropZoneProps, displayText: displayText },
+            React.createElement(React.Fragment, null,
+                React.createElement(Components.FilePicker, { onClick: handleClick }, displayText.browseFilesText),
+                React.createElement(VisuallyHidden, null,
+                    React.createElement("input", { type: "file", tabIndex: -1, ref: hiddenInput, onChange: onFilePickerChange, multiple: allowMultipleFiles, accept: acceptedFileTypes.join(',') })))),
+        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));
+});
+// pass an empty object as first param to avoid destructive action on `FileUploaderBase`
+const FileUploader = Object.assign({}, FileUploaderBase, {
+    Container,
+    DropZone,
+    FileList,
+    FileListHeader,
+    FileListFooter,
+    FilePicker,
+});
+
+export { ACCESS_LEVEL_DEPRECATION_MESSAGE, ACCESS_LEVEL_WITH_PATH_CALLBACK_MESSAGE, FileUploader, MISSING_REQUIRED_PROPS_MESSAGE };

package/dist/esm/components/FileUploader/hooks/useFileUploader/actions.mjs

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

package/dist/esm/components/FileUploader/hooks/useFileUploader/reducer.mjs

@@ -0,0 +1,93 @@
+import { FileStatus } from '../../types.mjs';
+import { FileUploaderActionTypes } from './types.mjs';
+
+const updateFiles = (files, nextFileData) => files.reduce((files, currentFile) => {
+    if (currentFile.id === nextFileData.id) {
+        return [...files, { ...currentFile, ...nextFileData }];
+    }
+    return [...files, currentFile];
+}, []);
+function fileUploaderStateReducer(state, action) {
+    switch (action.type) {
+        case FileUploaderActionTypes.ADD_FILES: {
+            const { files, status } = action;
+            const newUploads = files.map((file) => {
+                const errorText = action.getFileErrorMessage(file);
+                return {
+                    // make sure id is unique,
+                    // we only use it internally and don't send it to Storage
+                    id: `${Date.now()}-${file.name}`,
+                    file,
+                    error: errorText,
+                    key: file.name,
+                    status: errorText ? FileStatus.ERROR : status,
+                    isImage: file.type.startsWith('image/'),
+                    progress: -1,
+                };
+            });
+            const newFiles = [...state.files, ...newUploads];
+            return { ...state, files: newFiles };
+        }
+        case FileUploaderActionTypes.CLEAR_FILES: {
+            return { ...state, files: [] };
+        }
+        case FileUploaderActionTypes.QUEUE_FILES: {
+            const { files } = state;
+            const newFiles = files.reduce((files, currentFile) => {
+                return [
+                    ...files,
+                    {
+                        ...currentFile,
+                        ...(currentFile.status === FileStatus.ADDED
+                            ? { status: FileStatus.QUEUED }
+                            : {}),
+                    },
+                ];
+            }, []);
+            return {
+                ...state,
+                files: newFiles,
+            };
+        }
+        case FileUploaderActionTypes.SET_STATUS_UPLOADING: {
+            const { id, uploadTask } = action;
+            const status = FileStatus.UPLOADING;
+            const progress = 0;
+            const nextFileData = { status, progress, id, uploadTask };
+            const files = updateFiles(state.files, nextFileData);
+            return { ...state, files };
+        }
+        case FileUploaderActionTypes.SET_PROCESSED_FILE_KEY: {
+            const { processedKey, id } = action;
+            const files = updateFiles(state.files, { processedKey, id });
+            return { files };
+        }
+        case FileUploaderActionTypes.SET_UPLOAD_PROGRESS: {
+            const { id, progress } = action;
+            const files = updateFiles(state.files, { id, progress });
+            return { ...state, files };
+        }
+        case FileUploaderActionTypes.SET_STATUS: {
+            const { id, status } = action;
+            const files = updateFiles(state.files, { id, status });
+            return { ...state, files };
+        }
+        case FileUploaderActionTypes.REMOVE_UPLOAD: {
+            const { id } = action;
+            const { files } = state;
+            const newFiles = files.reduce((files, currentFile) => {
+                if (currentFile.id === id) {
+                    // remove by not returning currentFile
+                    return [...files];
+                }
+                return [...files, currentFile];
+            }, []);
+            return {
+                ...state,
+                files: newFiles,
+            };
+        }
+    }
+}
+
+export { fileUploaderStateReducer };

package/dist/esm/components/FileUploader/hooks/useFileUploader/types.mjs

@@ -0,0 +1,13 @@
+var FileUploaderActionTypes;
+(function (FileUploaderActionTypes) {
+    FileUploaderActionTypes["ADD_FILES"] = "ADD_FILES";
+    FileUploaderActionTypes["CLEAR_FILES"] = "CLEAR_FILES";
+    FileUploaderActionTypes["QUEUE_FILES"] = "QUEUE_FILES";
+    FileUploaderActionTypes["SET_STATUS"] = "SET_STATUS";
+    FileUploaderActionTypes["SET_PROCESSED_FILE_KEY"] = "SET_PROCESSED_FILE_KEY";
+    FileUploaderActionTypes["SET_STATUS_UPLOADING"] = "SET_STATUS_UPLOADING";
+    FileUploaderActionTypes["SET_UPLOAD_PROGRESS"] = "SET_UPLOAD_PROGRESS";
+    FileUploaderActionTypes["REMOVE_UPLOAD"] = "REMOVE_UPLOAD";
+})(FileUploaderActionTypes || (FileUploaderActionTypes = {}));
+
+export { FileUploaderActionTypes };

package/dist/esm/components/FileUploader/hooks/useFileUploader/useFileUploader.mjs

@@ -0,0 +1,62 @@
+import React__default from 'react';
+import { isObject } from '@aws-amplify/ui';
+import { FileStatus } from '../../types.mjs';
+import { fileUploaderStateReducer } from './reducer.mjs';
+import { addFilesAction, clearFilesAction, queueFilesAction, setUploadingFileAction, setProcessedKeyAction, setUploadProgressAction, setUploadStatusAction, removeUploadAction } from './actions.mjs';
+
+const isDefaultFile = (file) => !!(isObject(file) && file.key);
+const createFileFromDefault = (file) => isDefaultFile(file)
+    ? { ...file, id: file.key, status: FileStatus.UPLOADED }
+    : undefined;
+function useFileUploader(defaultFiles = []) {
+    const [{ files }, dispatch] = React__default.useReducer(fileUploaderStateReducer, {
+        files: (Array.isArray(defaultFiles)
+            ? defaultFiles.map(createFileFromDefault).filter((file) => !!file)
+            : []),
+    });
+    const addFiles = ({ files, status, getFileErrorMessage, }) => {
+        dispatch(addFilesAction({ files, status, getFileErrorMessage }));
+    };
+    const clearFiles = () => {
+        dispatch(clearFilesAction());
+    };
+    const queueFiles = () => {
+        dispatch(queueFilesAction());
+    };
+    const setUploadingFile = ({ uploadTask, id, }) => {
+        dispatch(setUploadingFileAction({ id, uploadTask }));
+    };
+    const setProcessedKey = (input) => {
+        dispatch(setProcessedKeyAction(input));
+    };
+    const setUploadProgress = ({ progress, id, }) => {
+        dispatch(setUploadProgressAction({ id, progress }));
+    };
+    const setUploadSuccess = ({ id }) => {
+        dispatch(setUploadStatusAction({ id, status: FileStatus.UPLOADED }));
+    };
+    const setUploadPaused = ({ id }) => {
+        dispatch(setUploadStatusAction({ id, status: FileStatus.PAUSED }));
+    };
+    const setUploadResumed = ({ id }) => {
+        dispatch(setUploadStatusAction({ id, status: FileStatus.UPLOADING }));
+    };
+    const removeUpload = ({ id }) => {
+        dispatch(removeUploadAction({ id }));
+    };
+    return {
+        removeUpload,
+        setProcessedKey,
+        setUploadPaused,
+        setUploadProgress,
+        setUploadResumed,
+        setUploadSuccess,
+        setUploadingFile,
+        queueFiles,
+        addFiles,
+        clearFiles,
+        files,
+    };
+}
+
+export { useFileUploader };

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

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { isFunction } from '@aws-amplify/ui';
+import { getInput } from '../../utils/getInput.mjs';
+import { uploadFile } from '../../utils/uploadFile.mjs';
+import { FileStatus } from '../../types.mjs';
+
+function useUploadFiles({ accessLevel, files, isResumable, maxFileCount, onProcessFileSuccess, onUploadError, onUploadStart, onUploadSuccess, path, processFile, setUploadingFile, setUploadProgress, setUploadSuccess, useAccelerateEndpoint, }) {
+    React.useEffect(() => {
+        const filesReadyToUpload = files.filter((file) => file.status === FileStatus.QUEUED);
+        if (filesReadyToUpload.length > maxFileCount) {
+            return;
+        }
+        for (const { file, key, id } of filesReadyToUpload) {
+            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 progress = event.totalBytes === undefined || event.totalBytes === 0
+                    ? 100
+                    : Math.floor((event.transferredBytes / event.totalBytes) * 100);
+                setUploadProgress({ id, progress });
+            };
+            if (file) {
+                const handleProcessFileSuccess = (input) => onProcessFileSuccess({ id, ...input });
+                const input = getInput({
+                    accessLevel,
+                    file,
+                    key,
+                    onProcessFileSuccess: handleProcessFileSuccess,
+                    onProgress,
+                    path,
+                    processFile,
+                    useAccelerateEndpoint,
+                });
+                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 });
+                    },
+                });
+            }
+        }
+    }, [
+        files,
+        accessLevel,
+        isResumable,
+        setUploadProgress,
+        setUploadingFile,
+        onUploadError,
+        onProcessFileSuccess,
+        onUploadSuccess,
+        onUploadStart,
+        maxFileCount,
+        setUploadSuccess,
+        processFile,
+        path,
+        useAccelerateEndpoint,
+    ]);
+}
+
+export { useUploadFiles };

package/dist/esm/components/FileUploader/types.mjs

@@ -0,0 +1,11 @@
+var FileStatus;
+(function (FileStatus) {
+    FileStatus["ADDED"] = "added";
+    FileStatus["QUEUED"] = "queued";
+    FileStatus["UPLOADING"] = "uploading";
+    FileStatus["PAUSED"] = "paused";
+    FileStatus["ERROR"] = "error";
+    FileStatus["UPLOADED"] = "uploaded";
+})(FileStatus || (FileStatus = {}));
+
+export { FileStatus };

package/dist/esm/components/FileUploader/ui/Container/Container.mjs

@@ -0,0 +1,8 @@
+import React__default from 'react';
+import { View } from '@aws-amplify/ui-react';
+
+function Container({ children, className, }) {
+    return React__default.createElement(View, { className: className }, children);
+}
+
+export { Container };

package/dist/esm/components/FileUploader/ui/DropZone/DropZone.mjs

@@ -0,0 +1,16 @@
+import React__default from 'react';
+import { classNames, classNameModifier, ComponentClassName } from '@aws-amplify/ui';
+import { View, Text } from '@aws-amplify/ui-react';
+import { useIcons, IconUpload } from '@aws-amplify/ui-react/internal';
+
+function DropZone({ children, displayText, inDropZone, onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop, testId, }) {
+    const { dropFilesText } = displayText;
+    const icons = useIcons('storageManager');
+    return (React__default.createElement(View, { className: classNames(inDropZone &&
+            classNameModifier(ComponentClassName.FileUploaderDropZone, 'active'), ComponentClassName.FileUploaderDropZone), "data-testid": testId, onDragStart: onDragStart, onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDrop: onDrop, onDragOver: onDragOver },
+        React__default.createElement(View, { as: "span", "aria-hidden": true, className: ComponentClassName.FileUploaderDropZoneIcon }, icons?.upload ?? React__default.createElement(IconUpload, null)),
+        React__default.createElement(Text, { className: ComponentClassName.FileUploaderDropZoneText }, dropFilesText),
+        children));
+}
+
+export { DropZone };

package/dist/esm/components/FileUploader/ui/FileList/FileControl.mjs

@@ -0,0 +1,23 @@
+import React__default from 'react';
+import { ComponentClassName } from '@aws-amplify/ui';
+import { View, Loader, Button } from '@aws-amplify/ui-react';
+import { FileStatus } from '../../types.mjs';
+import { FileStatusMessage } from './FileStatusMessage.mjs';
+import { FileRemoveButton } from './FileRemoveButton.mjs';
+import { UploadDetails } from './FileDetails.mjs';
+import { FileThumbnail } from './FileThumbnail.mjs';
+
+function FileControl({ onPause, onResume, displayName, errorMessage, isImage, isResumable, loaderIsDeterminate, onRemove, progress, showThumbnails = true, size, status, displayText, thumbnailUrl, }) {
+    const { getPausedText, getUploadingText, uploadSuccessfulText, pauseButtonText, resumeButtonText, } = displayText;
+    return (React__default.createElement(View, { className: ComponentClassName.FileUploaderFile },
+        React__default.createElement(View, { className: ComponentClassName.FileUploaderFileWrapper },
+            showThumbnails ? (React__default.createElement(FileThumbnail, { isImage: isImage, fileName: displayName, url: thumbnailUrl })) : null,
+            React__default.createElement(UploadDetails, { displayName: displayName, fileSize: size }),
+            status === FileStatus.UPLOADING ? (React__default.createElement(Loader, { className: ComponentClassName.FileUploaderLoader, variation: "linear", percentage: progress, isDeterminate: loaderIsDeterminate, isPercentageTextHidden: true })) : null,
+            isResumable &&
+                (status === FileStatus.UPLOADING || status === FileStatus.PAUSED) ? (status === FileStatus.PAUSED ? (React__default.createElement(Button, { onClick: onResume, size: "small", variation: "link" }, resumeButtonText)) : (React__default.createElement(Button, { onClick: onPause, size: "small", variation: "link" }, pauseButtonText))) : null,
+            React__default.createElement(FileRemoveButton, { altText: `Remove file ${displayName}`, onClick: onRemove })),
+        React__default.createElement(FileStatusMessage, { uploadSuccessfulText: uploadSuccessfulText, getUploadingText: getUploadingText, getPausedText: getPausedText, status: status, errorMessage: errorMessage, percentage: progress })));
+}
+
+export { FileControl };

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

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { ComponentClassName, humanFileSize } from '@aws-amplify/ui';
+import { View, Text } from '@aws-amplify/ui-react';
+
+const UploadDetails = ({ displayName, fileSize, }) => {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(View, { className: ComponentClassName.FileUploaderFileMain },
+            React__default.createElement(Text, { className: ComponentClassName.FileUploaderFileName }, displayName)),
+        React__default.createElement(Text, { as: "span", className: ComponentClassName.FileUploaderFileSize }, fileSize ? humanFileSize(fileSize, true) : '')));
+};
+
+export { UploadDetails };

package/dist/esm/components/FileUploader/ui/FileList/FileList.mjs

@@ -0,0 +1,44 @@
+import React__default from 'react';
+import { ComponentClassName } from '@aws-amplify/ui';
+import { View, Alert } from '@aws-amplify/ui-react';
+import { FileStatus } from '../../types.mjs';
+import { FileControl } from './FileControl.mjs';
+
+function FileList({ displayText, files, hasMaxFilesError, isResumable, onCancelUpload, onDeleteUpload, onResume, onPause, showThumbnails, maxFileCount, }) {
+    if (files.length < 1) {
+        return null;
+    }
+    const { getMaxFilesErrorText } = displayText;
+    const headingMaxFiles = getMaxFilesErrorText(maxFileCount);
+    return (React__default.createElement(View, { className: ComponentClassName.FileUploaderFileList },
+        files.map((storageFile) => {
+            const { file, status, progress, error, key, isImage, id, uploadTask } = storageFile;
+            const thumbnailUrl = file && isImage ? URL.createObjectURL(file) : '';
+            const loaderIsDeterminate = isResumable ? progress > 0 : true;
+            const isUploading = status === FileStatus.UPLOADING;
+            const onRemove = () => {
+                if (isResumable &&
+                    (status === FileStatus.UPLOADING || status === FileStatus.PAUSED) &&
+                    uploadTask) {
+                    onCancelUpload({ id, uploadTask });
+                }
+                else {
+                    onDeleteUpload({ id });
+                }
+            };
+            const handlePauseUpload = () => {
+                if (uploadTask) {
+                    onPause({ id, uploadTask });
+                }
+            };
+            const handleResumeUpload = () => {
+                if (uploadTask) {
+                    onResume({ id, uploadTask });
+                }
+            };
+            return (React__default.createElement(FileControl, { displayName: key, errorMessage: error, displayText: displayText, isImage: isImage, isUploading: isUploading, isResumable: isResumable, key: id, loaderIsDeterminate: loaderIsDeterminate, onRemove: onRemove, onPause: handlePauseUpload, onResume: handleResumeUpload, progress: progress, showThumbnails: showThumbnails, size: file?.size, status: status, thumbnailUrl: thumbnailUrl }));
+        }),
+        hasMaxFilesError && (React__default.createElement(Alert, { variation: "error", heading: headingMaxFiles }))));
+}
+
+export { FileList };

package/dist/esm/components/FileUploader/ui/FileList/FileRemoveButton.mjs

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { useIcons, IconClose } from '@aws-amplify/ui-react/internal';
+import { Button, VisuallyHidden, View } from '@aws-amplify/ui-react';
+
+const FileRemoveButton = ({ altText, onClick, }) => {
+    const icons = useIcons('storageManager');
+    return (React__default.createElement(Button, { size: "small", onClick: onClick, testId: "storage-manager-remove-button" },
+        React__default.createElement(VisuallyHidden, null, altText),
+        React__default.createElement(View, { as: "span", "aria-hidden": true, fontSize: "medium" }, icons?.remove ?? React__default.createElement(IconClose, null))));
+};
+
+export { FileRemoveButton };

package/dist/esm/components/FileUploader/ui/FileList/FileStatusMessage.mjs

@@ -0,0 +1,28 @@
+import React__default from 'react';
+import { classNames, ComponentClassName, classNameModifier } from '@aws-amplify/ui';
+import { Text, View } from '@aws-amplify/ui-react';
+import { useIcons, IconError, IconCheck } from '@aws-amplify/ui-react/internal';
+import { FileStatus } from '../../types.mjs';
+
+const FileStatusMessage = ({ errorMessage, getPausedText, getUploadingText, percentage, status, uploadSuccessfulText, }) => {
+    const icons = useIcons('storageManager');
+    switch (status) {
+        case FileStatus.UPLOADING: {
+            return (React__default.createElement(Text, { className: ComponentClassName.FileUploaderFileStatus }, getUploadingText(percentage)));
+        }
+        case FileStatus.PAUSED:
+            return (React__default.createElement(Text, { className: ComponentClassName.FileUploaderFileStatus }, getPausedText(percentage)));
+        case FileStatus.UPLOADED:
+            return (React__default.createElement(Text, { className: classNames(ComponentClassName.FileUploaderFileStatus, classNameModifier(ComponentClassName.FileUploaderFileStatus, 'success')) },
+                React__default.createElement(View, { as: "span", fontSize: "xl" }, icons?.success ?? React__default.createElement(IconCheck, null)),
+                uploadSuccessfulText));
+        case FileStatus.ERROR:
+            return (React__default.createElement(Text, { className: classNames(ComponentClassName.FileUploaderFileStatus, classNameModifier(ComponentClassName.FileUploaderFileStatus, 'error')) },
+                React__default.createElement(View, { as: "span", fontSize: "xl" }, icons?.error ?? React__default.createElement(IconError, null)),
+                errorMessage));
+        default:
+            return null;
+    }
+};
+
+export { FileStatusMessage };

package/dist/esm/components/FileUploader/ui/FileList/FileThumbnail.mjs

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { ComponentClassName } from '@aws-amplify/ui';
+import { Image, View } from '@aws-amplify/ui-react';
+import { useIcons, IconFile } from '@aws-amplify/ui-react/internal';
+
+const FileThumbnail = ({ fileName, isImage, url, }) => {
+    const icons = useIcons('storageManager');
+    const thumbnail = isImage ? (React__default.createElement(Image, { alt: fileName, src: url })) : (icons?.file ?? React__default.createElement(IconFile, null));
+    return (React__default.createElement(View, { className: ComponentClassName.FileUploaderFileImage }, thumbnail));
+};
+
+export { FileThumbnail };