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`
  options: {
    validateObjectExistence?: false,  // defaults to false
    expiresIn?: 20 // validity of the URL, in seconds. defaults to 900 (15 minutes) and maxes at 3600 (1 hour)
    useAccelerateEndpoint: true; // Whether to use accelerate endpoint.
  },
});
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 { downloadData } from 'aws-amplify/storage';

// Downloads file content to memory
const { body, eTag } = await downloadData({
  path: "/album/2024/1.jpg",
  options: {
    // optional progress callback
    onProgress: (event) => {
      console.log(event.transferredBytes);
    }
    // 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
    }
  }
}).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';

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