Amplify has re-imagined the way frontend developers build fullstack applications. Develop and deploy without the hassle.

Page updated Jul 11, 2024

Download files

Storage Image React UI Component

You can easily display images in your app by using the cloud-connected Storage Image React UI component. This component fetches images securely from your storage resource and displays it on the web page.

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" />;

Learn more about how you can further customize the UI component by referring to the Storage Image documentation.

To further customize your in-app experience, you can use the getUrl or downloadData API from the Amplify Library for Storage.

Note: Refer to the Transfer Acceleration documentation to learn how to enable transfer acceleration for storage APIs.

Get or download file from a URL

With the getUrl API, you can get a presigned URL which is valid for 900 seconds or 15 minutes by default. You can use this URL to create a download link for users to click on. The expiresAt property is a Date object that represents the time at which the URL will expire.

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);

Inside your template or JSX code, you can use the url property to create a link to the file:

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

This function does not check if the file exists by default. As result, the signed URL may fail if the file to be downloaded does not exist.

More getUrl options

useAccelerateEndpointbooleanWhether to use accelerate endpoint.

Read more at Transfer Acceleration
validateObjectExistencebooleanWhether to head object to make sure the object existence before downloading. Defaults to false
expiresInnumberNumber of seconds till the URL expires.

The expiration time of the presigned url is dependent on the session and will max out at 1 hour.

Download to a file

Use the downloadData API to download the file locally.

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) => {
// 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

Get the text value of downloaded File

You can get the value of file in any of the three formats: blob, json, or text. You can call the respective method on the body property to consume the set data in the respective format.

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

Monitor download progress

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}%`);

Cancel download

import { downloadData, isCancelError } from 'aws-amplify/storage';
const downloadTask = downloadData({ path: "/album/2024/1.jpg" });
try {
await downloadTask.result;
} catch (error) {
if (isCancelError(error)) {
// Handle error thrown by task cancellation.

More download options

OptionTypeDescriptionReference Links
useAccelerateEndpointbooleanWhether to use accelerate endpoint.Transfer Acceleration
bytesRange{ start: number; end:number; }bytes range parameter to download a part of the file.
onProgresscallbackCallback function tracking the upload/download progress.

Frequently Asked Questions