const handleDownload = async (fileKey, fileName) => { try { // 1. Fetch the pre-signed URL from your API const response = await fetch(`/api/get-presigned-url?key=${fileKey}`); const { url } = await response.json(); // 2. Trigger browser download const link = document.createElement('a'); link.href = url; link.setAttribute('download', fileName); // Suggests a filename document.body.appendChild(link); link.click(); link.parentNode.removeChild(link); } catch (error) { console.error("Download failed:", error); } }; Use code with caution. Method 2: Downloading via AWS Amplify
import { S3Client, GetObjectCommand } from "@aws-sdk/client-s3"; import { getSignedUrl } from "@aws-sdk/s3-request-presigner"; const s3Client = new S3Client({ region: "your-region" }); export const getDownloadUrl = async (fileKey) => { const command = new GetObjectCommand({ Bucket: "your-bucket-name", Key: fileKey, }); // URL expires in 60 seconds return await getSignedUrl(s3Client, command, { expiresIn: 60 }); }; Use code with caution. 2. Frontend Implementation (React)
If your project uses AWS Amplify, the process is simplified with the downloadData utility. javascript how to download file from s3 bucket using react js
import { downloadData } from 'aws-amplify/storage'; const downloadFile = async (path) => { try { const result = await downloadData({ path: path, options: { onProgress: (event) => { console.log(`Loaded: ${event.transferredBytes}/${event.totalBytes}`); } } }).result; // Create a Blob and trigger download const blob = await result.body.blob(); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'downloaded-file.pdf'; a.click(); } catch (error) { console.error('Error downloading file:', error); } } Use code with caution. Key Considerations for S3 Downloads
Once your backend provides the URL, you can trigger a download in React by creating a temporary anchor element. javascript const handleDownload = async (fileKey, fileName) => {
A pre-signed URL gives users temporary access to a specific private object in your bucket without requiring them to have AWS credentials. 1. Backend Implementation (Node.js)
Downloading files from an Amazon S3 bucket in a React application is a common requirement for modern web apps. Whether you are serving private documents or public assets, there are two primary ways to handle this: (most secure and recommended) or Fetching data as a Blob via the AWS SDK . Method 1: Using Pre-signed URLs (Recommended) Method 2: Downloading via AWS Amplify import {
How to Download Files from an Amazon S3 Bucket Using React.js