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

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

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import { ComponentClassName } from '@aws-amplify/ui';
+import { View, Button } from '@aws-amplify/ui-react';
+
+function FileListFooter({ displayText, remainingFilesCount, onClearAll, onUploadAll, }) {
+    const { clearAllButtonText, getUploadButtonText } = displayText;
+    return (React__default.createElement(View, { className: ComponentClassName.FileUploaderPreviewerFooter },
+        React__default.createElement(View, { className: ComponentClassName.FileUploaderPreviewerActions },
+            React__default.createElement(Button, { size: "small", variation: "link", onClick: onClearAll }, clearAllButtonText),
+            React__default.createElement(Button, { size: "small", variation: "primary", onClick: onUploadAll }, getUploadButtonText(remainingFilesCount)))));
+}
+
+export { FileListFooter };

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

@@ -0,0 +1,14 @@
+import React__default from 'react';
+import { ComponentClassName } from '@aws-amplify/ui';
+import { Text } from '@aws-amplify/ui-react';
+
+function FileListHeader({ allUploadsSuccessful, displayText, fileCount, remainingFilesCount, selectedFilesCount = 0, }) {
+    const { getFilesUploadedText, getRemainingFilesText, getSelectedFilesText } = displayText;
+    return (React__default.createElement(Text, { className: ComponentClassName.FileUploaderPreviewerText }, selectedFilesCount
+        ? getSelectedFilesText(selectedFilesCount)
+        : allUploadsSuccessful
+            ? getFilesUploadedText(fileCount)
+            : getRemainingFilesText(remainingFilesCount)));
+}
+
+export { FileListHeader };

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

@@ -0,0 +1,9 @@
+import React__default from 'react';
+import { ComponentClassName } from '@aws-amplify/ui';
+import { Button } from '@aws-amplify/ui-react';
+
+function FilePicker({ children, className = ComponentClassName.FileUploaderFilePicker, size = 'small', ...props }) {
+    return (React__default.createElement(Button, { ...props, className: className, size: size }, children));
+}
+
+export { FilePicker };

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

@@ -0,0 +1,12 @@
+import { humanFileSize } from '@aws-amplify/ui';
+
+const checkMaxFileSize = ({ file, getFileSizeErrorText, maxFileSize, }) => {
+    if (maxFileSize === undefined)
+        return '';
+    if (file.size > maxFileSize) {
+        return getFileSizeErrorText(humanFileSize(maxFileSize, true));
+    }
+    return '';
+};
+
+export { checkMaxFileSize };

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

@@ -0,0 +1,39 @@
+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}%`;
+    },
+};
+
+export { defaultFileUploaderDisplayText };

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

@@ -0,0 +1,27 @@
+const filterAllowedFiles = (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;
+        });
+    });
+};
+
+export { filterAllowedFiles };

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

@@ -0,0 +1,39 @@
+import { fetchAuthSession } from 'aws-amplify/auth';
+import { isTypedFunction, isString } from '@aws-amplify/ui';
+import { resolveFile } from './resolveFile.mjs';
+
+const getInput = ({ accessLevel, file, key, onProcessFileSuccess, onProgress, path, processFile, useAccelerateEndpoint, }) => {
+    return async () => {
+        const hasCallbackPath = isTypedFunction(path);
+        const hasStringPath = isString(path);
+        const hasKeyInput = !!accessLevel && !hasCallbackPath;
+        const { file: data, key: processedKey, ...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, 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 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;
+    };
+};
+
+export { getInput };

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

@@ -0,0 +1,20 @@
+import { isFunction } from '@aws-amplify/ui';
+
+/**
+ * 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 = ({ processFile, ...input }) => {
+    return new Promise((resolve, reject) => {
+        const result = isFunction(processFile) ? processFile(input) : input;
+        if (result instanceof Promise) {
+            result.then(resolve).catch(reject);
+        }
+        else {
+            resolve(result);
+        }
+    });
+};
+
+export { resolveFile };

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

@@ -0,0 +1,26 @@
+import { uploadData } from 'aws-amplify/storage';
+import { isFunction } from '@aws-amplify/ui';
+
+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((error) => {
+        if (isFunction(onError)) {
+            onError({ key, error });
+        }
+    });
+    return uploadTask;
+}
+
+export { uploadFile };

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

@@ -24,6 +24,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.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) {
+    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);

package/dist/esm/index.mjs

@@ -1,2 +1,3 @@
+export { FileUploader } from './components/FileUploader/FileUploader.mjs';
 export { StorageImage } from './components/StorageImage/StorageImage.mjs';
 export { StorageManager } from './components/StorageManager/StorageManager.mjs';

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '3.2.1';
+const VERSION = '3.3.0';
 
 export { VERSION };