Download files

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

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

export const DefaultStorageImageExample = () => {
  return <StorageImage alt="cat" path="your-path/cat.jpg" />;
};

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

const linkToStorageFile = await getUrl({
  path: "album/2024/1.jpg",
  // Alternatively, path: ({identityId}) => `album/{identityId}/1.jpg`
});
console.log('signed URL: ', linkToStorageFile.url);
console.log('URL expires at: ', linkToStorageFile.expiresAt);

<a href={linkToStorageFile.url.toString()} target="_blank" rel="noreferrer">
  {fileName} 
</a>

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

const linkToStorageFile = await getUrl({
  path: "album/2024/1.jpg",
  options: {
    // specify a target bucket using name assigned in Amplify Backend
    bucket: 'assignedNameInAmplifyBackend',
    // ensure object exists before getting url
    validateObjectExistence: true, 
    // url expiration time in seconds.
    expiresIn: 300,
    // whether to use accelerate endpoint
    useAccelerateEndpoint: true,
    // The account ID that owns the requested bucket.
    expectedBucketOwner: '123456789012',
  }
});

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

// Downloads file content to memory
const { body, eTag } = await downloadData({
  path: "album/2024/1.jpg"
}).result;

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

try {
  const downloadResult = await downloadData({
    path: "album/2024/1.jpg"
  }).result;
  const text = await downloadResult.body.text();
  // Alternatively, you can use `downloadResult.body.blob()`
  // or `downloadResult.body.json()` get read body in Blob or JSON format.
  console.log('Succeed: ', text);
} catch (error) {
  console.log('Error : ', error);
}

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

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

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

const result = await downloadData({
  path: 'album/2024/1.jpg',
  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 { downloadData } from 'aws-amplify/storage';

// Download a file from S3 bucket
const { body, eTag } = await downloadData(
  {
    path: 'album/2024/1.jpg',
    options: {
      onProgress: (progress) {
        console.log(`Download progress: ${(progress.transferredBytes/progress.totalBytes) * 100}%`);
      }
    }
  }
).result;

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

const downloadTask = downloadData({ path: 'album/2024/1.jpg' });
downloadTask.cancel();
try {
  await downloadTask.result;
} catch (error) {
  if (isCancelError(error)) {
    // Handle error thrown by task cancellation.
  }
}

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

// Downloads file content to memory
const { body, eTag } = await downloadData({
  path: "album/2024/1.jpg",
  options: {
    // optional bytes range parameter to download a part of the file, the 2nd MB of the file in this example
    bytesRange: {
      start: 1024,
      end: 2048
    },
    useAccelerateEndpoint: true,
  }
}).result;