Storage Manager

import { StorageManager } from '@aws-amplify/ui-react-storage';

export const DefaultStorageManagerExample = () => {
  return (
    <StorageManager
      acceptedFileTypes={['image/*']}
      accessLevel="guest"
      maxFileCount={1}
      isResumable
    />
  );
};

import { StorageManager } from '@aws-amplify/ui-react-storage';

export const StorageManagerUploadActionsExample = () => {
  return (
    <StorageManager
      acceptedFileTypes={['image/*']}
      accessLevel="guest"
      autoUpload={false}
      maxFileCount={1}
      isResumable
    />
  );
};

import { StorageManager } from '@aws-amplify/ui-react-storage';

export const StorageManagerFileTypesExample = () => {
  return (
    <StorageManager
      acceptedFileTypes={[
        // you can list file extensions:
        '.gif',
        '.bmp',
        '.doc',
        '.jpeg',
        '.jpg',
        // or MIME types:
        'image/png',
        'video/*',
      ]}
      accessLevel="guest"
      maxFileCount={5}
      // Size is in bytes
      maxFileSize={10000}
    />
  );
};

import { StorageManager } from '@aws-amplify/ui-react-storage';

export const StorageManagerResumableExample = () => {
  return (
    <StorageManager
      acceptedFileTypes={['image/*', '.zip', '.mp4']}
      accessLevel="guest"
      maxFileCount={10}
      isResumable
    />
  );
};

import { StorageManager } from '@aws-amplify/ui-react-storage';

const processFile = async ({ file }) => {
  const fileExtension = file.name.split('.').pop();

  return file
    .arrayBuffer()
    .then((filebuffer) => window.crypto.subtle.digest('SHA-1', filebuffer))
    .then((hashBuffer) => {
      const hashArray = Array.from(new Uint8Array(hashBuffer));
      const hashHex = hashArray
        .map((a) => a.toString(16).padStart(2, '0'))
        .join('');
      return { file, key: `${hashHex}.${fileExtension}` };
    });
};

export const StorageManagerHashExample = () => {
  return (
    <StorageManager
      acceptedFileTypes={['image/*']}
      accessLevel="guest"
      maxFileCount={1}
      processFile={processFile}
    />
  );
};

import * as React from 'react';
import { StorageManager } from '@aws-amplify/ui-react-storage';

export const StorageManagerEventExample = () => {
  const [files, setFiles] = React.useState({});

  return (
    <>
      <StorageManager
        acceptedFileTypes={['image/*']}
        accessLevel="private"
        maxFileCount={3}
        onFileRemove={({ key }) => {
          setFiles((prevFiles) => {
            return {
              ...prevFiles,
              [key]: undefined,
            };
          });
        }}
        onUploadError={(error, { key }) => {
          setFiles((prevFiles) => {
            return {
              ...prevFiles,
              [key]: {
                status: 'error',
              },
            };
          });
        }}
        onUploadSuccess={({ key }) => {
          setFiles((prevFiles) => {
            return {
              ...prevFiles,
              [key]: {
                status: 'success',
              },
            };
          });
        }}
        onUploadStart={({ key }) => {
          setFiles((prevFiles) => {
            return {
              ...prevFiles,
              [key]: {
                status: 'uploading',
              },
            };
          });
        }}
      />
      {Object.keys(files).map((key) => {
        return files[key] ? (
          <div>
            {key}: {files[key].status}
          </div>
        ) : null;
      })}
    </>
  );
};

import { StorageManager } from '@aws-amplify/ui-react-storage';

export const StorageManagerPathPropExample = () => {
  return (
    <StorageManager
      accessLevel="guest"
      // uploaded files can be found in S3 inside `public/images/`
      path="images/"
      acceptedFileTypes={['image/*']}
      maxFileCount={1}
    />
  );
};

import { StorageManager } from '@aws-amplify/ui-react-storage';

const processFile = ({ file, key }) => {
  return {
    file,
    key,
    metadata: {
      id: key,
    },
  };
};

export function StorageManagerMetadataExample() {
  return (
    <StorageManager
      acceptedFileTypes={['image/*']}
      accessLevel="guest"
      maxFileCount={3}
      showThumbnails={true}
      processFile={processFile}
    />
  );
}

import { StorageManager } from '@aws-amplify/ui-react-storage';

export const StorageManagerDisplayTextExample = () => {
  return (
    <StorageManager
      acceptedFileTypes={['image/*']}
      accessLevel="guest"
      maxFileCount={1}
      displayText={{
        // some text are plain strings
        dropFilesText: 'drag-and-drop here',
        browseFilesText: 'Open file picker',
        // others are functions that take an argument
        getFilesUploadedText(count) {
          return `${count} images uploaded`;
        },
      }}
    />
  );
};

import * as React from 'react';
import { ToggleButtonGroup, ToggleButton } from '@aws-amplify/ui-react';
import { StorageManager } from '@aws-amplify/ui-react-storage';

const dictionary = {
  // use default strings for english
  en: null,
  es: {
    getFilesUploadedText(count) {
      return `${count} ${
        count === 1 ? 'archivo cargado' : 'archivos cargados'
      }`;
    },
    getFileSizeErrorText(sizeText) {
      return `El tamaño del archivo debe ser menor a ${sizeText}`;
    },
    getRemainingFilesText(count) {
      return `${count} ${count === 1 ? 'archivo' : 'archivos'} subiendo`;
    },
    getUploadingText(percentage) {
      return `Subiendo${percentage > 0 ? `: ${percentage}%` : ''}`;
    },
    getUploadButtonText(count) {
      return `Cargar ${count} ${count === 1 ? 'archivo' : 'archivos'}`;
    },
    getMaxFilesErrorText(count) {
      return `No se pueden seleccionar más de ${count} ${
        count === 1 ? 'archivo' : 'archivos'
      }. Elimine archivos antes de actualizar.`;
    },
    getErrorText(message) {
      return message;
    },
    doneButtonText: 'Listo',
    clearAllButtonText: 'Limpiar todo',
    extensionNotAllowedText: 'Extensión no permitida',
    browseFilesText: 'Buscar archivos',
    dropFilesText: 'Arrastre los archivos aquí o',
    pauseButtonText: 'Pausa',
    resumeButtonText: 'Reanudar',
    uploadSuccessfulText: 'Carga exitosa',
    getPausedText(percentage) {
      return `Pausado: ${percentage}%`;
    },
  },
};

export const StorageManageri18nExample = () => {
  const [language, setLanguage] = React.useState('en');
  return (
    <>
      <ToggleButtonGroup
        value={language}
        isExclusive
        onChange={(value) => setLanguage(value)}
      >
        <ToggleButton value="en">En</ToggleButton>
        <ToggleButton value="es">Es</ToggleButton>
      </ToggleButtonGroup>
      <StorageManager
        acceptedFileTypes={['image/*']}
        accessLevel="guest"
        maxFileCount={1}
        displayText={dictionary[language]}
      />
    </>
  );
};

import * as React from 'react';
import {
  Card,
  Button,
  Flex,
  Text,
  Divider,
  Image,
  Loader,
  Icon,
} from '@aws-amplify/ui-react';
import { StorageManager } from '@aws-amplify/ui-react-storage';

export const StorageManagerComponentOverridesExample = () => {
  return (
    <StorageManager
      acceptedFileTypes={['image/*']}
      accessLevel="guest"
      maxFileCount={100}
      components={{
        Container({ children }) {
          return <Card variation="elevated">{children}</Card>;
        },
        DropZone({ children, displayText, inDropZone, ...rest }) {
          return (
            <Flex
              alignItems="center"
              direction="column"
              padding="medium"
              backgroundColor={inDropZone ? 'primary.10' : ''}
              {...rest}
            >
              <Text>Drop files here</Text>
              <Divider size="small" label="or" maxWidth="10rem" />
              {children}
            </Flex>
          );
        },
        FilePicker({ onClick }) {
          return (
            <Button variation="primary" onClick={onClick}>
              Browse Files
            </Button>
          );
        },
        FileList({ files, onCancelUpload, onDeleteUpload }) {
          return (
            <Flex direction="row">
              {files.map(({ file, key, progress, id, status, uploadTask }) => (
                <Flex
                  key={key}
                  justifyContent="center"
                  alignItems="center"
                  width="5rem"
                  height="5rem"
                  position="relative"
                >
                  <Image
                    borderRadius="small"
                    height="100%"
                    objectFit="cover"
                    src={URL.createObjectURL(file)}
                    alt={key}
                  />
                  {progress < 100 ? (
                    <Loader
                      position="absolute"
                      size="large"
                      percentage={progress}
                      isDeterminate
                      isPercentageTextHidden
                    />
                  ) : null}

                  <Button
                    opacity="50"
                    borderRadius="xxl"
                    backgroundColor="background.primary"
                    position="absolute"
                    variation="link"
                    size="small"
                    onClick={() => {
                      if (status === 'uploading') {
                        onCancelUpload({ id, uploadTask });
                      } else {
                        onDeleteUpload({ id });
                      }
                    }}
                  >
                    <Icon
                      fontSize="large"
                      color="font.error"
                      viewBox={{ width: 512, height: 512 }}
                      paths={[
                        {
                          d: 'M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z',
                          strokeWidth: '32',
                          fill: 'none',
                          strokeMiterlimit: '10',
                          stroke: 'currentColor',
                        },
                        {
                          d: 'M320 320L192 192m0 128l128-128',
                          strokeWidth: '32',
                          fill: 'none',
                          strokeLinecap: 'round',
                          stroke: 'currentColor',
                        },
                      ]}
                    />
                  </Button>
                </Flex>
              ))}
            </Flex>
          );
        },
      }}
    />
  );
};

import * as React from 'react';
import { Button } from '@aws-amplify/ui-react';
import { StorageManager } from '@aws-amplify/ui-react-storage';

export const StorageManagerHandleExample = () => {
  const ref = React.useRef(null);

  return (
    <>
      <StorageManager
        acceptedFileTypes={['image/*']}
        accessLevel="guest"
        maxFileCount={3}
        ref={ref}
      />
      <Button onClick={() => ref.current.clearFiles()}>Clear Files</Button>
    </>
  );
};

import { ThemeProvider } from '@aws-amplify/ui-react';
import { StorageManager } from '@aws-amplify/ui-react-storage';

const theme = {
  name: 'my-theme',
  tokens: {
    borderWidths: {
      small: '2px',
    },
    components: {
      storagemanager: {
        dropzone: {
          borderColor: '{colors.primary.60}',
        },
      },
    },
  },
};

export const StorageManagerThemeExample = () => {
  return (
    <ThemeProvider theme={theme}>
      <StorageManager
        acceptedFileTypes={['image/*']}
        accessLevel="guest"
        maxFileCount={5}
      />
    </ThemeProvider>
  );
};