Once you've uploaded files to Supabase Storage, you'll often need to retrieve them. This section covers how to download and access those files, whether you're working in a web application, a mobile app, or even a server-side script.
Supabase provides a straightforward way to get a temporary, publicly accessible URL for any file stored in your buckets. This URL can be used directly in your application to display images, play audio, or download any other file type. It's important to note that these URLs are typically signed and may have an expiration, depending on your security configurations.
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY'
const supabase = createClient(supabaseUrl, supabaseAnonKey)
async function getFileUrl(bucketName, filePath) {
const { data, error } = await supabase.storage
.from(bucketName)
.getPublicUrl(filePath)
if (error) {
console.error('Error getting public URL:', error)
return null
}
return data.publicUrl
}
// Example usage:
const imageUrl = await getFileUrl('my-bucket', 'images/profile.png')
console.log('Public Image URL:', imageUrl)The getPublicUrl() method is your primary tool for generating these download links. You provide the name of the bucket where the file resides and the specific path to the file within that bucket. The function then returns an object containing the publicUrl property, which is the URL you'll use to access the file.
For more programmatic access, especially if you need to process the file content directly (e.g., to read an image as binary data or parse a text file), you can use the download() method. This method fetches the file content as a Blob, which can then be further manipulated by your application.
async function downloadFileContent(bucketName, filePath) {
const { data, error } = await supabase.storage
.from(bucketName)
.download(filePath)
if (error) {
console.error('Error downloading file:', error)
return null
}
// data is a Blob object
return data
}
// Example usage:
const fileBlob = await downloadFileContent('my-bucket', 'documents/report.pdf')
if (fileBlob) {
// You can now create a temporary URL for the blob to open it
const url = URL.createObjectURL(fileBlob)
console.log('Blob content available, temporary URL:', url)
// You can then use this URL to display the PDF or trigger a download
// window.open(url)
}The download() method returns a Blob object. In a web browser context, you can then use URL.createObjectURL() to generate a temporary URL that can be used to display the content in an <img> tag, open it in a new tab, or trigger a download using an <a> tag with the download attribute.
When working with downloaded file content, particularly images, you might want to display them directly in your UI. Here's how you can use the Blob obtained from download() to set an image source.
// Assuming you have an <img> element with id 'myImage'
const imgElement = document.getElementById('myImage')
async function displayImage(bucketName, filePath) {
const fileBlob = await downloadFileContent(bucketName, filePath)
if (fileBlob && imgElement) {
const url = URL.createObjectURL(fileBlob)
imgElement.src = url
// It's good practice to revoke the object URL when it's no longer needed
// For example, after the image has loaded or when the component unmounts
// setTimeout(() => URL.revokeObjectURL(url), 60000); // Revoke after 60 seconds
}
}
// Example usage:
displayImage('my-bucket', 'images/user-avatar.jpg')Remember to manage the lifecycle of object URLs. Calling URL.revokeObjectURL(url) when the URL is no longer needed helps free up memory. For dynamically loaded images, consider revoking the previous URL before setting a new one.
graph TD
A[User Request to Access File] --> B{Supabase SDK Call}
B --> C[getPublicUrl() or download()]
C --> D{Supabase Storage API}
D -- Returns File URL or Blob --> E{Supabase SDK}
E -- Returns Data --> F[Application Code]
F -- Displays File (e.g., img tag) or Processes Blob