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.