#How we implement AWS S3 in astro using reactjs?

3 messages · Page 1 of 1 (latest)

formal horizon
#

How we implment AWS S3 in astro using reactjs?
Can you provide me step by step process

dry iron
#

Well first off. What are you trying to accomplish?

long veldt
#

Here is a slimmed down example of one of my actions that uploads to S3, hopefully that can give you some guidance

import { defineAction, ActionError } from 'astro:actions';
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';

export const server = {
  s3Upload: defineAction({
    accept: 'json',
    input: z.object({
      key: z.string(),
      cardId: z.string(),
    }),
    handler: async (input) => {
      // Initialize your S3 client
      const s3Client = new S3Client({
        region: 'us-east-1',
        credentials: {
          accessKeyId: import.meta.env.S3_ACCESS_KEY,
          secretAccessKey: import.meta.env.S3_SECRET_KEY,
        },
      });
      
      // This request is to an external service not related to S3 so I've removed most of it for clarity in this example
      const request = new Request()

      // Here I am just taking the response I got from the aforementioned external service request and turning it into an image, not related to S3
      await fetch(request).then(async (res) => {
        const data = await res.json();
        const base64Data = data.img.replace(/^data:image\/png;base64,/, '');
        const buffer = Buffer.from(base64Data, 'base64')

        // This is the code for actually sending it to the bucket
        const command = new PutObjectCommand({
          Bucket: 'dawnforge',
          Key: input.key,
          Body: buffer,
          ContentType: 'image/png',
        });

        await s3Client.send(command);
      });
    },
  }),
}

Hope that helps at all