Hébergement d’images S3 pour ton shop React Router 7

1
AWS_ACCESS_KEY_ID=AKIAXXXXXXX
2
AWS_SECRET_ACCESS_KEY=xxxxxxxxxxxxxxxx
3
AWS_REGION=eu-west-3         # Paris
4
AWS_S3_BUCKET_NAME=shop-router

1
{
2
  "Version": "2012-10-17",
3
  "Statement": [
4
    {
5
      "Sid": "PublicRead",
6
      "Effect": "Allow",
7
      "Principal": "*",
8
      "Action": "s3:GetObject",
9
      "Resource": "arn:aws:s3:::shop-router/*"
10
    },
11
    {
12
      "Sid": "AppWriteDelete",
13
      "Effect": "Allow",
14
      "Principal": { "AWS": "arn:aws:iam::123456789012:user/shop-router-image-manager" },
15
      "Action": [
16
        "s3:PutObject",
17
        "s3:DeleteObject",
18
        "s3:ListBucket"
19
      ],
20
      "Resource": [
21
        "arn:aws:s3:::shop-router",
22
        "arn:aws:s3:::shop-router/*"
23
      ]
24
    }
25
  ]
26
}

1
npm i @aws-sdk/client-s3

1
import {
2
  S3Client,
3
  PutObjectCommand,
4
  DeleteObjectCommand,
5
  ListObjectsV2Command,
6
} from "@aws-sdk/client-s3";
7

8
const s3 = new S3Client({
9
  region: process.env.AWS_REGION,
10
  credentials: {
11
    accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
12
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
13
  },
14
});
15

16
const BUCKET = process.env.AWS_S3_BUCKET_NAME!;
17

18
// Upload ------------------------------------------------
19
export async function uploadFile({ file, key }: { file: File; key: string }) {
20
  await s3.send(
21
    new PutObjectCommand({
22
      Bucket: BUCKET,
23
      Key: key,
24
      Body: Buffer.from(await file.arrayBuffer()),
25
      ContentType: file.type,
26
      CacheControl: "public,max-age=31536000,immutable",
27
    }),
28
  );
29
  return `https://${BUCKET}.s3.${process.env.AWS_REGION}.amazonaws.com/${key}`;
30
}
31

32
// Delete -----------------------------------------------
33
export const deleteFile = (key: string) =>
34
  s3.send(new DeleteObjectCommand({ Bucket: BUCKET, Key: key }));
35

36
// List -------------------------------------------------
37
export async function listObjects(prefix = "library/") {
38
  const { Contents } = await s3.send(
39
    new ListObjectsV2Command({ Bucket: BUCKET, Prefix: prefix }),
40
  );
41
  return (
42
    Contents?.filter((o) => o.Key)
43
      .map((o) => ({
44
        key: o.Key!,
45
        url: `https://${BUCKET}.s3.${process.env.AWS_REGION}.amazonaws.com/${o.Key}`,
46
        size: o.Size ?? 0,
47
        lastModified: o.LastModified ?? new Date(),
48
      })) ?? []
49
  );
50
}
51

52
// Helper clé unique ------------------------------------
53
export const makeKey = (fileName: string, folder = "library") =>
54
  `${folder}/${Date.now()}_${fileName.replace(/[^a-z0-9.\-]/gi, "_")}`;

1
export async function loader() {
2
  return data({ images: await listObjects() });
3
}

1
import { parseFormData } from "@mjackson/form-data-parser";
2

3
export const LibrarySchema = z.discriminatedUnion("intent", [
4
  z.object({
5
    intent: z.literal("upload"),
6
    files: z
7
      .array(z.instanceof(File))
8
      .min(1)
9
      .max(10)
10
      .refine((arr) => arr.every((f) => f.type.startsWith("image/")), "images only")
11
      .refine((arr) => arr.every((f) => f.size < 10 * 1024 * 1024), "< 10 Mo"),
12
  }),
13
  z.object({
14
    intent: z.literal("delete"),
15
    key: z.string().min(1),
16
  }),
17
]);
18

19
export async function action({ request }: ActionFunctionArgs) {
20
  const formData = await parseFormData(request);
21
  const submission = LibrarySchema.safeParse(Object.fromEntries(formData));
22

23
  if (!submission.success)
24
    return badRequest(submission.error.flatten());
25

26
  if (submission.data.intent === "upload") {
27
    await Promise.all(
28
      submission.data.files.map((file) =>
29
        uploadFile({ file, key: makeKey(file.name) }),
30
      ),
31
    );
32
  } else {
33
    await deleteFile(submission.data.key);
34
  }
35

36
  return redirect("/admin/library");
37
}

1
export default function Library() {
2
  const { images } = useLoaderData<typeof loader>();
3
  const navigation = useNavigation();
4
  const uploading = navigation.state === "submitting";
5

6
  return (
7
    <section className="space-y-8">
8
      {/* formulaire d’upload */}
9
      <Form method="post" encType="multipart/form-data" className="flex gap-4">
10
        <input type="hidden" name="intent" value="upload" />
11
        <input
12
          type="file"
13
          name="files"
14
          accept="image/*"
15
          multiple
16
          className="file:mr-4"
17
        />
18
        <Button type="submit" disabled={uploading} isLoading={uploading}>
19
          {uploading ? "Upload..." : "Uploader"}
20
        </Button>
21
      </Form>
22

23
      {/* grille d’images */}
24
      <ul className="grid gap-6 grid-cols-[repeat(auto-fill,minmax(160px,1fr))]">
25
        {images.map((img) => (
26
          <li key={img.key} className="group relative">
27
            <img
28
              src={img.url}
29
              alt={img.key}
30
              className="aspect-[4/3] w-full object-cover rounded-lg shadow"
31
            />
32
            <fetcher.Form method="post" className="absolute top-2 right-2">
33
              <input type="hidden" name="intent" value="delete" />
34
              <input type="hidden" name="key" value={img.key} />
35
              <Button
36
                size="icon"
37
                variant="destructive"
38
                className="opacity-0 group-hover:opacity-100"
39
              >
40
                <Trash2 className="size-4" />
41
              </Button>
42
            </fetcher.Form>
43
          </li>
44
        ))}
45
      </ul>
46
    </section>
47
  );
48
}

1
model Product {
2
  id       String   @id @default(uuid())
3
  name     String
4
  /* … */
5
  images   Image[]  @relation("ProductImages")
6
}
7

8
model Image {
9
  id        String    @id @default(uuid())
10
  url       String    @unique
11
  alt       String?
12
  products  Product[] @relation("ProductImages")
13
}

1
npx prisma migrate dev --name m2m-product-images

1
export async function linkImagesToProduct({
2
  productId,
3
  imageUrls,
4
}: {
5
  productId: string;
6
  imageUrls: string[];
7
}) {
8
  const connects = await Promise.all(
9
    imageUrls.map(async (url) => {
10
      const image =
11
        (await prisma.image.findUnique({ where: { url } })) ??
12
        (await prisma.image.create({ data: { url } }));
13
      return { id: image.id };
14
    }),
15
  );
16
  await prisma.product.update({
17
    where: { id: productId },
18
    data: { images: { connect: connects } },
19
  });
20
  return { linkedCount: connects.length };
21
}

1
// Bouton qui ouvre un <Dialog> avec la grid S3 et renvoie onConfirm(imageUrls[])

1
case "link-images":
2
  await linkImagesToProduct(submission.value);
3
  return data({ success: "Images liées !" });