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

package/dist/index.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var ui = require('@aws-amplify/ui');
 var uiReact = require('@aws-amplify/ui-react');
-var internal = require('@aws-amplify/ui-react/internal');
 var uiReactCore = require('@aws-amplify/ui-react-core');
+var internal = require('@aws-amplify/ui-react/internal');
 var auth = require('aws-amplify/auth');
 var storage = require('aws-amplify/storage');
 
@@ -24,16 +24,725 @@ function _interopNamespace(e) {
                     get: function () { return e[k]; }
                 });
             }
-        });
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var FileStatus$1;
+(function (FileStatus) {
+    FileStatus["ADDED"] = "added";
+    FileStatus["QUEUED"] = "queued";
+    FileStatus["UPLOADING"] = "uploading";
+    FileStatus["PAUSED"] = "paused";
+    FileStatus["ERROR"] = "error";
+    FileStatus["UPLOADED"] = "uploaded";
+})(FileStatus$1 || (FileStatus$1 = {}));
+
+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 = {}));
+
+const updateFiles$1 = (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$1.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$1.ADDED
+                            ? { status: FileStatus$1.QUEUED }
+                            : {}),
+                    },
+                ];
+            }, []);
+            return {
+                ...state,
+                files: newFiles,
+            };
+        }
+        case FileUploaderActionTypes.SET_STATUS_UPLOADING: {
+            const { id, uploadTask } = action;
+            const status = FileStatus$1.UPLOADING;
+            const progress = 0;
+            const nextFileData = { status, progress, id, uploadTask };
+            const files = updateFiles$1(state.files, nextFileData);
+            return { ...state, files };
+        }
+        case FileUploaderActionTypes.SET_PROCESSED_FILE_KEY: {
+            const { processedKey, id } = action;
+            const files = updateFiles$1(state.files, { processedKey, id });
+            return { files };
+        }
+        case FileUploaderActionTypes.SET_UPLOAD_PROGRESS: {
+            const { id, progress } = action;
+            const files = updateFiles$1(state.files, { id, progress });
+            return { ...state, files };
+        }
+        case FileUploaderActionTypes.SET_STATUS: {
+            const { id, status } = action;
+            const files = updateFiles$1(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,
+            };
+        }
+    }
+}
+
+const addFilesAction$1 = ({ files, status, getFileErrorMessage, }) => ({
+    type: FileUploaderActionTypes.ADD_FILES,
+    files,
+    status,
+    getFileErrorMessage,
+});
+const clearFilesAction$1 = () => ({
+    type: FileUploaderActionTypes.CLEAR_FILES,
+});
+const queueFilesAction$1 = () => ({
+    type: FileUploaderActionTypes.QUEUE_FILES,
+});
+const setProcessedKeyAction$1 = (input) => ({
+    ...input,
+    type: FileUploaderActionTypes.SET_PROCESSED_FILE_KEY,
+});
+const setUploadingFileAction$1 = ({ id, uploadTask, }) => ({
+    type: FileUploaderActionTypes.SET_STATUS_UPLOADING,
+    id,
+    uploadTask,
+});
+const setUploadProgressAction$1 = ({ id, progress, }) => ({
+    type: FileUploaderActionTypes.SET_UPLOAD_PROGRESS,
+    id,
+    progress,
+});
+const setUploadStatusAction$1 = ({ id, status, }) => ({
+    type: FileUploaderActionTypes.SET_STATUS,
+    id,
+    status,
+});
+const removeUploadAction$1 = ({ id }) => ({
+    type: FileUploaderActionTypes.REMOVE_UPLOAD,
+    id,
+});
+
+const isDefaultFile$1 = (file) => !!(ui.isObject(file) && file.key);
+const createFileFromDefault$1 = (file) => isDefaultFile$1(file)
+    ? { ...file, id: file.key, status: FileStatus$1.UPLOADED }
+    : undefined;
+function useFileUploader(defaultFiles = []) {
+    const [{ files }, dispatch] = React__default["default"].useReducer(fileUploaderStateReducer, {
+        files: (Array.isArray(defaultFiles)
+            ? defaultFiles.map(createFileFromDefault$1).filter((file) => !!file)
+            : []),
+    });
+    const addFiles = ({ files, status, getFileErrorMessage, }) => {
+        dispatch(addFilesAction$1({ files, status, getFileErrorMessage }));
+    };
+    const clearFiles = () => {
+        dispatch(clearFilesAction$1());
+    };
+    const queueFiles = () => {
+        dispatch(queueFilesAction$1());
+    };
+    const setUploadingFile = ({ uploadTask, id, }) => {
+        dispatch(setUploadingFileAction$1({ id, uploadTask }));
+    };
+    const setProcessedKey = (input) => {
+        dispatch(setProcessedKeyAction$1(input));
+    };
+    const setUploadProgress = ({ progress, id, }) => {
+        dispatch(setUploadProgressAction$1({ id, progress }));
+    };
+    const setUploadSuccess = ({ id }) => {
+        dispatch(setUploadStatusAction$1({ id, status: FileStatus$1.UPLOADED }));
+    };
+    const setUploadPaused = ({ id }) => {
+        dispatch(setUploadStatusAction$1({ id, status: FileStatus$1.PAUSED }));
+    };
+    const setUploadResumed = ({ id }) => {
+        dispatch(setUploadStatusAction$1({ id, status: FileStatus$1.UPLOADING }));
+    };
+    const removeUpload = ({ id }) => {
+        dispatch(removeUploadAction$1({ id }));
+    };
+    return {
+        removeUpload,
+        setProcessedKey,
+        setUploadPaused,
+        setUploadProgress,
+        setUploadResumed,
+        setUploadSuccess,
+        setUploadingFile,
+        queueFiles,
+        addFiles,
+        clearFiles,
+        files,
+    };
+}
+
+const checkMaxFileSize$1 = ({ file, getFileSizeErrorText, maxFileSize, }) => {
+    if (maxFileSize === undefined)
+        return '';
+    if (file.size > maxFileSize) {
+        return getFileSizeErrorText(ui.humanFileSize(maxFileSize, true));
+    }
+    return '';
+};
+
+const defaultFileUploaderDisplayText = {
+    getFilesUploadedText(count) {
+        return `${count} ${count === 1 ? 'file uploaded' : 'files uploaded'}`;
+    },
+    getFileSizeErrorText(sizeText) {
+        return `File size must be below ${sizeText}`;
+    },
+    getRemainingFilesText(count) {
+        return `${count} ${count === 1 ? 'file' : 'files'} uploading`;
+    },
+    getSelectedFilesText(count) {
+        return `${count} ${count === 1 ? 'file' : 'files'} selected`;
+    },
+    getUploadingText(percentage) {
+        return `Uploading${percentage > 0 ? `: ${percentage}%` : ''}`;
+    },
+    getUploadButtonText(count) {
+        return `Upload ${count} ${count === 1 ? 'file' : 'files'}`;
+    },
+    getMaxFilesErrorText(count) {
+        return `Cannot choose more than ${count} ${count === 1 ? 'file' : 'files'}. Remove files before updating`;
+    },
+    getErrorText(message) {
+        return message;
+    },
+    doneButtonText: 'Done',
+    clearAllButtonText: 'Clear all',
+    extensionNotAllowedText: 'Extension not allowed',
+    browseFilesText: 'Browse files',
+    dropFilesText: 'Drop files here or',
+    pauseButtonText: 'Pause',
+    resumeButtonText: 'Resume',
+    uploadSuccessfulText: 'Uploaded',
+    getPausedText(percentage) {
+        return `Paused: ${percentage}%`;
+    },
+};
+
+const filterAllowedFiles$1 = (files, acceptedFileTypes) => {
+    // Allow any files if acceptedFileTypes is undefined, empty array, or contains '*'
+    if (!acceptedFileTypes ||
+        acceptedFileTypes.length === 0 ||
+        acceptedFileTypes.includes('*')) {
+        return files;
+    }
+    // Remove any files that are not in the accepted file list
+    return files.filter((file) => {
+        const fileName = file.name || '';
+        const mimeType = (file.type || '').toLowerCase();
+        const baseMimeType = mimeType.replace(/\/.*$/, '');
+        return acceptedFileTypes.some((type) => {
+            const validType = type.trim().toLowerCase();
+            if (validType.charAt(0) === '.') {
+                return fileName.toLowerCase().endsWith(validType);
+            }
+            else if (validType.endsWith('/*')) {
+                // This is something like a image/* mime type
+                return baseMimeType === validType.replace(/\/.*$/, '');
+            }
+            return mimeType === validType;
+        });
+    });
+};
+
+/**
+ * Utility function that takes the processFile prop, along with a file a key
+ * and returns a Promise that resolves to { file, key, ..rest }
+ * regardless if processFile is defined and if it is sync or async
+ */
+const resolveFile$1 = ({ processFile, ...input }) => {
+    return new Promise((resolve, reject) => {
+        const result = ui.isFunction(processFile) ? processFile(input) : input;
+        if (result instanceof Promise) {
+            result.then(resolve).catch(reject);
+        }
+        else {
+            resolve(result);
+        }
+    });
+};
+
+const getInput$1 = ({ accessLevel, file, key, onProcessFileSuccess, onProgress, path, processFile, useAccelerateEndpoint, }) => {
+    return async () => {
+        const hasCallbackPath = ui.isTypedFunction(path);
+        const hasStringPath = ui.isString(path);
+        const hasKeyInput = !!accessLevel && !hasCallbackPath;
+        const { file: data, key: processedKey, ...rest } = await resolveFile$1({ file, key, processFile });
+        const contentType = file.type || 'binary/octet-stream';
+        // IMPORTANT: always pass `...rest` here for backwards compatibility
+        const options = { contentType, onProgress, useAccelerateEndpoint, ...rest };
+        let inputResult;
+        if (hasKeyInput) {
+            // legacy handling of `path` is to prefix to `fileKey`
+            const resolvedKey = hasStringPath
+                ? `${path}${processedKey}`
+                : processedKey;
+            inputResult = {
+                data,
+                key: resolvedKey,
+                options: { ...options, accessLevel },
+            };
+        }
+        else {
+            const { identityId } = await auth.fetchAuthSession();
+            const resolvedPath = `${hasCallbackPath ? path({ identityId }) : path}${processedKey}`;
+            inputResult = { data: file, path: resolvedPath, options };
+        }
+        if (processFile) {
+            // provide post-processing value of target `key`
+            onProcessFileSuccess({ processedKey });
+        }
+        return inputResult;
+    };
+};
+
+async function uploadFile$1({ input, onError, onStart, onComplete, }) {
+    const resolvedInput = await input();
+    const uploadTask = storage.uploadData(resolvedInput);
+    const key = resolvedInput?.key ??
+        resolvedInput?.path;
+    if (ui.isFunction(onStart)) {
+        onStart({ key, uploadTask });
+    }
+    uploadTask.result
+        .then((result) => {
+        if (ui.isFunction(onComplete) && uploadTask.state === 'SUCCESS') {
+            onComplete(result);
+        }
+    })
+        .catch((error) => {
+        if (ui.isFunction(onError)) {
+            onError({ key, error });
+        }
+    });
+    return uploadTask;
+}
+
+function useUploadFiles$1({ accessLevel, files, isResumable, maxFileCount, onProcessFileSuccess, onUploadError, onUploadStart, onUploadSuccess, path, processFile, setUploadingFile, setUploadProgress, setUploadSuccess, useAccelerateEndpoint, }) {
+    React__namespace.useEffect(() => {
+        const filesReadyToUpload = files.filter((file) => file.status === FileStatus$1.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$1({
+                    accessLevel,
+                    file,
+                    key,
+                    onProcessFileSuccess: handleProcessFileSuccess,
+                    onProgress,
+                    path,
+                    processFile,
+                    useAccelerateEndpoint,
+                });
+                uploadFile$1({
+                    input,
+                    onComplete: (event) => {
+                        if (ui.isFunction(onUploadSuccess)) {
+                            onUploadSuccess({
+                                key: event.key ??
+                                    event.path,
+                            });
+                        }
+                        setUploadSuccess({ id });
+                    },
+                    onError: ({ key, error }) => {
+                        if (ui.isFunction(onUploadError)) {
+                            onUploadError(error.message, { key });
+                        }
+                    },
+                    onStart: ({ key, uploadTask }) => {
+                        if (ui.isFunction(onUploadStart)) {
+                            onUploadStart({ key });
+                        }
+                        setUploadingFile({ id, uploadTask });
+                    },
+                });
+            }
+        }
+    }, [
+        files,
+        accessLevel,
+        isResumable,
+        setUploadProgress,
+        setUploadingFile,
+        onUploadError,
+        onProcessFileSuccess,
+        onUploadSuccess,
+        onUploadStart,
+        maxFileCount,
+        setUploadSuccess,
+        processFile,
+        path,
+        useAccelerateEndpoint,
+    ]);
+}
+
+function Container$1({ children, className, }) {
+    return React__default["default"].createElement(uiReact.View, { className: className }, children);
+}
+
+function DropZone$1({ children, displayText, inDropZone, onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop, testId, }) {
+    const { dropFilesText } = displayText;
+    const icons = internal.useIcons('storageManager');
+    return (React__default["default"].createElement(uiReact.View, { className: ui.classNames(inDropZone &&
+            ui.classNameModifier(ui.ComponentClassName.FileUploaderDropZone, 'active'), ui.ComponentClassName.FileUploaderDropZone), "data-testid": testId, onDragStart: onDragStart, onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDrop: onDrop, onDragOver: onDragOver },
+        React__default["default"].createElement(uiReact.View, { as: "span", "aria-hidden": true, className: ui.ComponentClassName.FileUploaderDropZoneIcon }, icons?.upload ?? React__default["default"].createElement(internal.IconUpload, null)),
+        React__default["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.FileUploaderDropZoneText }, dropFilesText),
+        children));
+}
+
+const FileStatusMessage$1 = ({ errorMessage, getPausedText, getUploadingText, percentage, status, uploadSuccessfulText, }) => {
+    const icons = internal.useIcons('storageManager');
+    switch (status) {
+        case FileStatus$1.UPLOADING: {
+            return (React__default["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.FileUploaderFileStatus }, getUploadingText(percentage)));
+        }
+        case FileStatus$1.PAUSED:
+            return (React__default["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.FileUploaderFileStatus }, getPausedText(percentage)));
+        case FileStatus$1.UPLOADED:
+            return (React__default["default"].createElement(uiReact.Text, { className: ui.classNames(ui.ComponentClassName.FileUploaderFileStatus, ui.classNameModifier(ui.ComponentClassName.FileUploaderFileStatus, 'success')) },
+                React__default["default"].createElement(uiReact.View, { as: "span", fontSize: "xl" }, icons?.success ?? React__default["default"].createElement(internal.IconCheck, null)),
+                uploadSuccessfulText));
+        case FileStatus$1.ERROR:
+            return (React__default["default"].createElement(uiReact.Text, { className: ui.classNames(ui.ComponentClassName.FileUploaderFileStatus, ui.classNameModifier(ui.ComponentClassName.FileUploaderFileStatus, 'error')) },
+                React__default["default"].createElement(uiReact.View, { as: "span", fontSize: "xl" }, icons?.error ?? React__default["default"].createElement(internal.IconError, null)),
+                errorMessage));
+        default:
+            return null;
     }
-    n["default"] = e;
-    return Object.freeze(n);
+};
+
+const FileRemoveButton$1 = ({ altText, onClick, }) => {
+    const icons = internal.useIcons('storageManager');
+    return (React__default["default"].createElement(uiReact.Button, { size: "small", onClick: onClick, testId: "storage-manager-remove-button" },
+        React__default["default"].createElement(uiReact.VisuallyHidden, null, altText),
+        React__default["default"].createElement(uiReact.View, { as: "span", "aria-hidden": true, fontSize: "medium" }, icons?.remove ?? React__default["default"].createElement(internal.IconClose, null))));
+};
+
+const UploadDetails$1 = ({ displayName, fileSize, }) => {
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(uiReact.View, { className: ui.ComponentClassName.FileUploaderFileMain },
+            React__default["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.FileUploaderFileName }, displayName)),
+        React__default["default"].createElement(uiReact.Text, { as: "span", className: ui.ComponentClassName.FileUploaderFileSize }, fileSize ? ui.humanFileSize(fileSize, true) : '')));
+};
+
+const FileThumbnail$1 = ({ fileName, isImage, url, }) => {
+    const icons = internal.useIcons('storageManager');
+    const thumbnail = isImage ? (React__default["default"].createElement(uiReact.Image, { alt: fileName, src: url })) : (icons?.file ?? React__default["default"].createElement(internal.IconFile, null));
+    return (React__default["default"].createElement(uiReact.View, { className: ui.ComponentClassName.FileUploaderFileImage }, thumbnail));
+};
+
+function FileControl$1({ 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["default"].createElement(uiReact.View, { className: ui.ComponentClassName.FileUploaderFile },
+        React__default["default"].createElement(uiReact.View, { className: ui.ComponentClassName.FileUploaderFileWrapper },
+            showThumbnails ? (React__default["default"].createElement(FileThumbnail$1, { isImage: isImage, fileName: displayName, url: thumbnailUrl })) : null,
+            React__default["default"].createElement(UploadDetails$1, { displayName: displayName, fileSize: size }),
+            status === FileStatus$1.UPLOADING ? (React__default["default"].createElement(uiReact.Loader, { className: ui.ComponentClassName.FileUploaderLoader, variation: "linear", percentage: progress, isDeterminate: loaderIsDeterminate, isPercentageTextHidden: true })) : null,
+            isResumable &&
+                (status === FileStatus$1.UPLOADING || status === FileStatus$1.PAUSED) ? (status === FileStatus$1.PAUSED ? (React__default["default"].createElement(uiReact.Button, { onClick: onResume, size: "small", variation: "link" }, resumeButtonText)) : (React__default["default"].createElement(uiReact.Button, { onClick: onPause, size: "small", variation: "link" }, pauseButtonText))) : null,
+            React__default["default"].createElement(FileRemoveButton$1, { altText: `Remove file ${displayName}`, onClick: onRemove })),
+        React__default["default"].createElement(FileStatusMessage$1, { uploadSuccessfulText: uploadSuccessfulText, getUploadingText: getUploadingText, getPausedText: getPausedText, status: status, errorMessage: errorMessage, percentage: progress })));
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+function FileList$1({ 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["default"].createElement(uiReact.View, { className: ui.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$1.UPLOADING;
+            const onRemove = () => {
+                if (isResumable &&
+                    (status === FileStatus$1.UPLOADING || status === FileStatus$1.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["default"].createElement(FileControl$1, { 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["default"].createElement(uiReact.Alert, { variation: "error", heading: headingMaxFiles }))));
+}
+
+function FileListHeader$1({ allUploadsSuccessful, displayText, fileCount, remainingFilesCount, selectedFilesCount = 0, }) {
+    const { getFilesUploadedText, getRemainingFilesText, getSelectedFilesText } = displayText;
+    return (React__default["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.FileUploaderPreviewerText }, selectedFilesCount
+        ? getSelectedFilesText(selectedFilesCount)
+        : allUploadsSuccessful
+            ? getFilesUploadedText(fileCount)
+            : getRemainingFilesText(remainingFilesCount)));
+}
 
-const VERSION = '3.2.0';
+function FileListFooter$1({ displayText, remainingFilesCount, onClearAll, onUploadAll, }) {
+    const { clearAllButtonText, getUploadButtonText } = displayText;
+    return (React__default["default"].createElement(uiReact.View, { className: ui.ComponentClassName.FileUploaderPreviewerFooter },
+        React__default["default"].createElement(uiReact.View, { className: ui.ComponentClassName.FileUploaderPreviewerActions },
+            React__default["default"].createElement(uiReact.Button, { size: "small", variation: "link", onClick: onClearAll }, clearAllButtonText),
+            React__default["default"].createElement(uiReact.Button, { size: "small", variation: "primary", onClick: onUploadAll }, getUploadButtonText(remainingFilesCount)))));
+}
+
+function FilePicker$1({ children, className = ui.ComponentClassName.FileUploaderFilePicker, size = 'small', ...props }) {
+    return (React__default["default"].createElement(uiReact.Button, { ...props, className: className, size: size }, children));
+}
+
+const VERSION = '3.3.0';
+
+const logger$1 = ui.getLogger('Storage');
+const MISSING_REQUIRED_PROPS_MESSAGE$1 = '`FileUploader` requires a `maxFileCount` prop to be provided.';
+const ACCESS_LEVEL_WITH_PATH_CALLBACK_MESSAGE$1 = '`FileUploader` does not allow usage of a `path` callback prop with an `accessLevel` prop.';
+const ACCESS_LEVEL_DEPRECATION_MESSAGE$1 = '`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__namespace.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$1);
+    }
+    if (accessLevel && typeof path === 'function') {
+        throw new Error(ACCESS_LEVEL_WITH_PATH_CALLBACK_MESSAGE$1);
+    }
+    uiReactCore.useDeprecationWarning({
+        message: ACCESS_LEVEL_DEPRECATION_MESSAGE$1,
+        shouldWarn: !!accessLevel,
+    });
+    const Components = {
+        Container: Container$1,
+        DropZone: DropZone$1,
+        FileList: FileList$1,
+        FilePicker: FilePicker$1,
+        FileListHeader: FileListHeader$1,
+        FileListFooter: FileListFooter$1,
+        ...components,
+    };
+    const allowMultipleFiles = maxFileCount === undefined ||
+        (typeof maxFileCount === 'number' && maxFileCount > 1);
+    const displayText = {
+        ...defaultFileUploaderDisplayText,
+        ...overrideDisplayText,
+    };
+    const { getFileSizeErrorText } = displayText;
+    const getMaxFileSizeErrorMessage = (file) => {
+        return checkMaxFileSize$1({
+            file,
+            maxFileSize,
+            getFileSizeErrorText,
+        });
+    };
+    const { addFiles, clearFiles, files, removeUpload, queueFiles, setProcessedKey, setUploadingFile, setUploadPaused, setUploadProgress, setUploadSuccess, setUploadResumed, } = useFileUploader(defaultFiles);
+    React__namespace.useImperativeHandle(ref, () => ({ clearFiles }));
+    const { dragState, ...dropZoneProps } = internal.useDropZone({
+        acceptedFileTypes,
+        onDropComplete: ({ acceptedFiles, rejectedFiles }) => {
+            if (rejectedFiles && rejectedFiles.length > 0) {
+                logger$1.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$1(acceptedFiles, acceptedFileTypes);
+            addFiles({
+                files: _acceptedFiles,
+                status: autoUpload ? FileStatus$1.QUEUED : FileStatus$1.ADDED,
+                getFileErrorMessage: getMaxFileSizeErrorMessage,
+            });
+        },
+    });
+    useUploadFiles$1({
+        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$1.QUEUED : FileStatus$1.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$1.UPLOADED);
+    // Displays if over max files
+    const hasMaxFilesError = files.filter((file) => file.progress < 100).length > maxFileCount;
+    const uploadedFilesLength = files.filter((file) => file?.status === FileStatus$1.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__namespace.useRef(null);
+    function handleClick() {
+        if (hiddenInput.current) {
+            hiddenInput.current.click();
+            hiddenInput.current.value = '';
+        }
+    }
+    uiReactCore.useSetUserAgent({
+        componentName: 'FileUploader',
+        packageName: 'react-storage',
+        version: VERSION,
+    });
+    return (React__namespace.createElement(Components.Container, { className: `${ui.ComponentClassName.FileUploader} ${hasFiles ? ui.ComponentClassName.FileUploaderPreviewer : ''}` },
+        React__namespace.createElement(Components.DropZone, { inDropZone: dragState !== 'inactive', ...dropZoneProps, displayText: displayText },
+            React__namespace.createElement(React__namespace.Fragment, null,
+                React__namespace.createElement(Components.FilePicker, { onClick: handleClick }, displayText.browseFilesText),
+                React__namespace.createElement(uiReact.VisuallyHidden, null,
+                    React__namespace.createElement("input", { type: "file", tabIndex: -1, ref: hiddenInput, onChange: onFilePickerChange, multiple: allowMultipleFiles, accept: acceptedFileTypes.join(',') })))),
+        hasFiles ? (React__namespace.createElement(Components.FileListHeader, { allUploadsSuccessful: allUploadsSuccessful, displayText: displayText, fileCount: files.length, remainingFilesCount: remainingFilesCount, selectedFilesCount: selectedFilesCount })) : null,
+        React__namespace.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__namespace.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: Container$1,
+    DropZone: DropZone$1,
+    FileList: FileList$1,
+    FileListHeader: FileListHeader$1,
+    FileListFooter: FileListFooter$1,
+    FilePicker: FilePicker$1,
+});
 
 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';
@@ -286,39 +995,11 @@ function useStorageManager(defaultFiles = []) {
     };
 }
 
-/**
- * Format bytes as human-readable text.
- *
- * @param bytes Number of bytes.
- * @param si True to use metric (SI) units, aka powers of 1000. False to use
- *           binary (IEC), aka powers of 1024.
- * @param dp Number of decimal places to display.
- *
- * @return Formatted string.
- */
-function humanFileSize(bytes, si = false, dp = 1) {
-    const thresh = si ? 1000 : 1024;
-    if (Math.abs(bytes) < thresh) {
-        return `${bytes} B`;
-    }
-    const units = si
-        ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-        : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
-    let unit = -1;
-    const range = 10 ** dp;
-    do {
-        bytes /= thresh;
-        ++unit;
-    } while (Math.round(Math.abs(bytes) * range) / range >= thresh &&
-        unit < units.length - 1);
-    return bytes.toFixed(dp) + ' ' + units[unit];
-}
-
 const checkMaxFileSize = ({ file, getFileSizeErrorText, maxFileSize, }) => {
     if (maxFileSize === undefined)
         return '';
     if (file.size > maxFileSize) {
-        return getFileSizeErrorText(humanFileSize(maxFileSize, true));
+        return getFileSizeErrorText(ui.humanFileSize(maxFileSize, true));
     }
     return '';
 };
@@ -578,7 +1259,7 @@ const UploadDetails = ({ displayName, fileSize, }) => {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(uiReact.View, { className: ui.ComponentClassName.StorageManagerFileMain },
             React__default["default"].createElement(uiReact.Text, { className: ui.ComponentClassName.StorageManagerFileName }, displayName)),
-        React__default["default"].createElement(uiReact.Text, { as: "span", className: ui.ComponentClassName.StorageManagerFileSize }, fileSize ? humanFileSize(fileSize, true) : '')));
+        React__default["default"].createElement(uiReact.Text, { as: "span", className: ui.ComponentClassName.StorageManagerFileSize }, fileSize ? ui.humanFileSize(fileSize, true) : '')));
 };
 
 const FileThumbnail = ({ fileName, isImage, url, }) => {
@@ -663,6 +1344,10 @@ const MISSING_REQUIRED_PROPS_MESSAGE = '`StorageManager` requires a `maxFileCoun
 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__namespace.forwardRef(function StorageManager({ acceptedFileTypes = [], accessLevel, autoUpload = true, components, defaultFiles, displayText: overrideDisplayText, isResumable = false, maxFileCount, maxFileSize, onFileRemove, onUploadError, onUploadStart, onUploadSuccess, path, processFile, showThumbnails = true, useAccelerateEndpoint, }, ref) {
+    uiReactCore.useDeprecationWarning({
+        message: 'The `StorageManager` component has been renamed as the `FileUploader` component.',
+        shouldWarn: false,
+    });
     if (!maxFileCount) {
         // eslint-disable-next-line no-console
         console.warn(MISSING_REQUIRED_PROPS_MESSAGE);
@@ -821,5 +1506,6 @@ const StorageManager = Object.assign({}, StorageManagerBase, {
     FilePicker,
 });
 
+exports.FileUploader = FileUploader;
 exports.StorageImage = StorageImage;
 exports.StorageManager = StorageManager;