Using public s3 URL from Storage.get

[Dongw1126]

Is this related to a new or existing framework?

No response

Is this related to a new or existing API?

Storage

Is this related to another service?

S3

Describe the feature you'd like to request

I want to get only public object URL when I use Storage.get.
Currently, I receive only signed URL.

I'm going to use S3 as an image storage that all users can write and read.
However, because of the signed URL, the URL changes every time users refresh, so image caching doesn't work and resources are wasted.

Describe the solution you'd like

I'd like to get a public object URL without signature from Storage.get.
I wish amplify would provide an option for public objects.

Describe alternatives you've considered

It would be nice if the signed URL doesn't change on every refresh.

Additional context

No response

Is this something that you'd be interested in working on?

• 👋 I may be able to implement this feature request
• ⚠️ This feature might incur a breaking change

[jamesaucode]

related to #960

[mdarche]

Having the exact same issue. I've tried to use the image URL directly but I regularly get 403s unless the entire bucket is public

[stocaaro]

related to #6935

[ilia-luk]

same here.

[kimfucious]

It's been a while, @nadetastic.

Any progress on this?

[abdallahshaban557]

Hi @kimfucious - we are working on this feature, and have identified a couple of options for moving forward. We will provide updates on this ticket when we have timelines figured out!

[kimfucious]

Hi @abdallahshaban557,

Thanks for the follow up.

Something to consider:

As it stands, we need to do a const s3Url = await Storage.get(imageKey) to get the URL for an image in storage.

As far as I can tell, there is no way for the browser to cache these, which results in unnecessary fetches. I could be wrong.

I wound up creating a caching mechanism to deal with this, but--to be blunt--we really shouldn't have to jump through such hoops.

I'll share it here, in case someone comes across this thread and might find use for it.

import React, { createContext, useContext, useEffect } from "react";
import { Storage } from "aws-amplify";
import chalk from "chalk";
import config from "../../config/config.json"

const isDebug = config.site.IS_DEBUG;
const isDev = process.env.NODE_ENV === "development";

interface ImageCacheContextType {
    getImageWithCache: (id: string, imageUrl: string) => Promise<string>;
}

const ImageCacheContext = createContext<ImageCacheContextType | null>(null);

export const useImageCache = (): ImageCacheContextType => {
    const context = useContext(ImageCacheContext);
    if (!context) {
        throw new Error(
            "useImageCache must be used within an ImageCacheProvider"
        );
    }
    return context;
};

interface ImageCacheProviderProps {
    children: React.ReactNode;
}

const imageCache: Record<string, string> = {};

export default function ImageCacheProvider({
    children,
}: ImageCacheProviderProps): JSX.Element {
    async function getImageWithCache(
        id: string,
        imageKey: string
    ): Promise<string> {
        if (imageCache[id]) {
            if (isDebug || isDev) {
                console.log(chalk.green("Image cache hit!"));
            }
            return imageCache[id];
        } else {
            if (isDebug || isDev) {
            console.log(chalk.yellow("Image cache miss!"));
            }
            const s3Url = await Storage.get(imageKey);
            const response = await fetch(s3Url);
            const blob = await response.blob();
            const objectUrl = URL.createObjectURL(blob);
            imageCache[id] = objectUrl;
            return objectUrl;
        }
    }

    useEffect(() => {
        return () => {
            for (const id in imageCache) {
                if (imageCache.hasOwnProperty(id)) {
                    URL.revokeObjectURL(imageCache[id]);
                }
            }
        };
    }, []);

    const contextValue: ImageCacheContextType = {
        getImageWithCache,
    };

    return (
        <ImageCacheContext.Provider value={contextValue}>
            {children}
        </ImageCacheContext.Provider>
    );
}

I look forward to a solution that allows us to store a non-expiring URLs somewhere.

[abdallahshaban557]

Hi @kimfucious - As part of enabling this, we are also considering providing you with an ability to cache all your content behind a CDN such as Cloudfront. So we are thinking of it as well!