Upload files

npm add @aws-amplify/ui-react-storage aws-amplify

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

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

import React from 'react';
import { uploadData } from 'aws-amplify/storage';

function App() {
    const [file, setFile] = React.useState();

    const handleChange = (event: any) => {
        setFile(event.target.files[0]);
    };

    return (
        <div>
            <input type="file" onChange={handleChange} />
            <button
                onClick={() =>
                    uploadData({
                        path: `photos/${file.name}`,
                        data: file,
                    })
                }
            >
                Upload
            </button>
        </div>
    );
}

import { uploadData } from 'aws-amplify/storage';

try {
  const result = await uploadData({
    path: "album/2024/1.jpg",
    // Alternatively, path: ({identityId}) => `album/{identityId}/1.jpg`
    data: file,
    options: {
      onProgress // Optional progress callback.
    }
  }).result;
  console.log('Succeeded: ', result);
} catch (error) {
  console.log('Error : ', error);
}

import { uploadData } from 'aws-amplify/storage';

const monitorUpload = async () => {
  try {
    const result = await uploadData({
      path: "album/2024/1.jpg",
      // Alternatively, path: ({identityId}) => `album/{identityId}/1.jpg`
      data: file,
      options: {
        onProgress: ({ transferredBytes, totalBytes }) => {
          if (totalBytes) {
            console.log(
              `Upload progress ${Math.round(
                (transferredBytes / totalBytes) * 100
              )} %`
            );
          }
        },
      },
    }).result;
    console.log("Path from Response: ", result.path);
  } catch (error) {
    console.log("Error : ", error);
  }
}

import { uploadData, isCancelError } from 'aws-amplify/storage';

// Pause, resume, and cancel a task
const uploadTask = uploadData({ path, data: file });
//...
uploadTask.pause();
//...
uploadTask.resume();
//...
uploadTask.cancel();
//...
try {
  await uploadTask.result;
} catch (error) {
  if (isCancelError(error)) {
    // Handle error thrown by task cancellation
  }
}