Mapping Amplify Storage.get()

user_15667632 0
Viewed 274

Hellow everyone. I am trying to get single URL from S3 Bucket This work perfect

const [imageURL, setImageURL] = useState("");
  const {
    title,
    content,
    imagePath, //This imagePath is the S3 key
  } = article.article;

  useEffect(() => {
    const getImage = async () => {
      try {
        const imageAccessURL = await Storage.get(imagePath);

        setImageURL(imageAccessURL);//That's how I can get the URL

      } catch (error) {
        console.error("error accessing the Image from s3", error);
        setImageURL("");
      }
    };
    getImage();
  }, [imagePath]);

Right now I am trying to get list URL from S3 Bucket when in mapping.

export default function ArticleComponent() {

  const handleImage = async (imagePath) => {

    try {
      const imageAccessURL = await Storage.get(imagePath);

      return imageAccessURL; //I don't know how to apply states or any other methods

    } catch (error) {

      console.error("error accessing the Image from s3", error);
    }
  };

const renderList = articles.map((article) => {
    const {
      id,
      content,
      title,
      imagePath,
    } = article;

    return (
      <Paper className={classes.paper} key={id} elevation={5}>

        <img src={handleImage(imagePath)} alt="" /> //I want get URL here 

      </Paper>
    );
  });

return (
    <Box>

        {renderList}

    </Box>
)

but at the end, in the <img src={handleImage(imagePath)} alt="" /> It will return object promise. the articles include list of article and the imagePath is the key of S3 bucket. must use this await Storage.get(key) to get the real access URL, Single one can use useState, but for mapping, I don't have any idea to do it.

Hope someone can help! Thanks

reactjs amazon-s3
1 Answers

Finally I found the solution. Use Promise.all

  const {
    imageKeys //This imagePath is the S3 key
  } = article.article;

  const [imgKeyFromServer, setImgKeyFromServer] = useState([]);

  useEffect(() => {
    const getImage = async () => {
      try {
        setImgKeyFromServer([]);
        const imageAccessURL = await Promise.all(
          Array.from(imageKeys).map((key) =>
            Storage.get(key, {
              level: "public"
            })
          )
        );
        setImgKeyFromServer((url) => url.concat(imageAccessURL));
      } catch (error) {
        console.error("error accessing the Image from s3", error);
        setImgKeyFromServer([]);
      }
    };
    console.log("imageKeys", imageKeys);
    if (imageKeys) {
      getImage();
    }
  }, [imageKeys]);

Thats can get all URLS from the S3 storage.

user_156676320
Related