Upload files

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

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

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

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

const file = document.getElementById("file");
const upload = document.getElementById("upload");

upload.addEventListener("click", () => {
  const fileReader = new FileReader();
  fileReader.readAsArrayBuffer(file.files[0]);

  fileReader.onload = async (event) => {
    console.log("Complete File read successfully!", event.target.result);
    try {
      await uploadData({
                data: event.target.result,
                path: file.files[0].name
            });
    } catch (e) {
      console.log("error", e);
    }
  };
});

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,
  }).result;
  console.log('Succeeded: ', result);
} catch (error) {
  console.log('Error : ', error);
}

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

const result = await uploadData({
  path: 'album/2024/1.jpg',
  data: file,
  options: {
Copy highlighted code example
    // Specify a target bucket using name assigned in Amplify Backend
    bucket: 'assignedNameInAmplifyBackend'
  }
}).result;

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

const result = await uploadData({
  path: 'album/2024/1.jpg',
  data: file,
  options: {
Copy highlighted code example
    // Alternatively, provide bucket name from console and associated region
    bucket: {
      bucketName: 'bucket-name-from-console',
      region: 'us-east-2'
    }
  }
}).result;

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
  }
}

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

const result = await uploadData({
  path: 'album/2024/1.jpg',
  data: file,
  options: {
    metadata: {
      customKey: 'customValue',
    },
  },
});

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

const result = await uploadData({
  path: 'album/2024/1.jpg',
  data: file,
  options: {
    // content-type header to be used when downloading
    contentType: "image/jpeg",
    // configure how object is presented
    contentDisposition: "attachment",
    // whether to use accelerate endpoint
    useAccelerateEndpoint: true,
    // the account ID that owns requested bucket
    expectedBucketOwner: "123456789012",
    // whether to check if an object with the same key already exists before completing the upload
    preventOverwrite: true,
    // whether to compute the checksum for the data to be uploaded, so the S3 can verify the data integrity
    checksumAlgorithm: "crc-32", // only 'crc-32' is supported currently
  },
});