FileUploader

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

export const App = () => {
  return (
    <FileUploader
      acceptedFileTypes={['image/*']}
      path="public/"
      maxFileCount={1}
      isResumable
    />
  );
};

<FileUploader
  acceptedFileTypes={['image/*']}
  path={({ identityId }) => `protected/${identityId}/`}
  maxFileCount={1}
  isResumable
/>

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

export const App = () => {
  return (
    <FileUploader
      acceptedFileTypes={['image/*']}
      path="public/"
      autoUpload={false}
      maxFileCount={1}
      isResumable
    />
  );
};

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

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

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

export const App = () => {
  return (
    <FileUploader
      acceptedFileTypes={['image/*']}
      bucket="my-bucket"
      path="public/"
      maxFileCount={1}
    />
  );
};

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

export const App = () => {
  return (
    <FileUploader
      acceptedFileTypes={['image/*']}
      bucket={{
        bucketName: 'my-bucket-xxxxxxxx',
        region: 'us-west-2',
      }}
      path="public/"
      maxFileCount={1}
    />
  );
};

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

export const App = () => {
  return (
    <FileUploader
      acceptedFileTypes={['image/*', '.zip', '.mp4']}
      path="public/"
      maxFileCount={10}
      isResumable
    />
  );
};

import { FileUploader } 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 App = () => {
  return (
    <FileUploader
      acceptedFileTypes={['image/*']}
      path="public/"
      maxFileCount={1}
      processFile={processFile}
    />
  );
};

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

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

  return (
    <>
      <FileUploader
        acceptedFileTypes={['image/*']}
        path={({ identityId }) => `private/${identityId}/`}
        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 { FileUploader } from '@aws-amplify/ui-react-storage';

export const App = () => {
  return (
    <FileUploader
      path="public/images/"
      acceptedFileTypes={['image/*']}
      maxFileCount={1}
    />
  );
};

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

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

export function App() {
  return (
    <FileUploader
      acceptedFileTypes={['image/*']}
      path="public/"
      maxFileCount={3}
      showThumbnails={true}
      processFile={processFile}
    />
  );
}

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

export const App = () => {
  return (
    <FileUploader
      acceptedFileTypes={['image/*']}
      path="public/"
      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 { FileUploader } 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 App = () => {
  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>
      <FileUploader
        acceptedFileTypes={['image/*']}
        path="public/"
        maxFileCount={1}
        displayText={dictionary[language]}
      />
    </>
  );
};

import * as React from 'react';

import { FileUploader } from '@aws-amplify/ui-react-storage';
import {
  Card,
  Button,
  Flex,
  Text,
  Divider,
  Image,
  Loader,
  Icon,
} from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

export default function App() {
  return (
    <FileUploader
      acceptedFileTypes={['image/*']}
      path="public/"
      maxFileCount={100}
      components={{
        Container({ children }) {
          return <Card variation="elevated">{children}</Card>;
        },
        // DropZone({ children, inDropZone, onDragEnter, onDragLeave, onDragStart, onDragOver, onDrop }) {
        DropZone({ children, 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 }) =>
                !file ? null : (
                  <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 ? null : (
                      <Loader
                        position="absolute"
                        size="large"
                        percentage={progress}
                        isDeterminate
                        isPercentageTextHidden
                      />
                    )}

                    <Button
                      opacity="50"
                      borderRadius="xxl"
                      backgroundColor="background.primary"
                      position="absolute"
                      variation="link"
                      size="small"
                      onClick={() => {
                        if (uploadTask && 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 { FileUploader } from '@aws-amplify/ui-react-storage';

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

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

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

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

export const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <FileUploader
        acceptedFileTypes={['image/*']}
        path="public/"
        maxFileCount={5}
      />
    </ThemeProvider>
  );
};