Convert AWS Amplify's V6 getUrl() output to V5 Storage.get() presigned url string

18 Views Asked by At

I am upgrading my project to the latest version and noticed that AWS Amplify (aws-amplify/storage) also got upgraded from v5 to v6. I used Storage.get(img.key) back then to obtain a pre-signed URL, which now changed to getUrl(img.key). Now, the problem lies in the response they give, which used to be a string, but now they return a URL object.

As per page https://docs.amplify.aws/nextjs/build-a-backend/storage/storage-v5-to-v6-migration-guide/

This was v5's response:

// download: false
string // presigned URL

And this is v6's response now:

GetUrlOutput {
  url: URL;
  expiresAt: Date;
}

This is how I attempt to display the image:


// Get Image
import { useState, useEffect } from "react";
import { uploadData, getUrl, remove } from "aws-amplify/storage";

export default function useImage(img) {
  const [photo, setPhoto] = useState({ uri: null });
  const getImage = async () => {
    if (img) {
      try {
        const imageURL = await getUrl(img.key);
        setPhoto({
          uri: imageURL,  // this is where the error occurs, because imageURL is now an object instead of string
        });
      } catch (e) {
        console.log(e);
      }
    }
  };
  useEffect(() => {
    getImage();
  }, []);

  return { photo, setPhoto };
}

// Display the Image
import { Image } from "@aws-amplify/ui-react";
import useImage from "./useImage";

const ImageView = ({ image }) => {
  const { photo } = useImage(image); // this calls the above code

  return (
    <Image
      alt={image.key}
      src={photo.uri}
    />
  );
};

export default Carousel;

How can I convert this v6's URL object into the old v5's pre-signed string URL? Thanks.

0

There are 0 best solutions below