platform(images): create image uploader

Author: juliantellez

packages/frontend/ui/src/components/ImageUploader/Dropzone.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Box, Text } from "@radix-ui/themes";
+
+export function DropZone({ onFiles }: { onFiles: (fl: FileList | null) => void }) {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [active, setActive] = React.useState(false);
+
+  React.useEffect(() => {
+    const el = ref.current!;
+    const prevent = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); };
+    const onEnter = (e: DragEvent) => { prevent(e); setActive(true); };
+    const onOver = (e: DragEvent) => { prevent(e); setActive(true); };
+    const onLeave = (e: DragEvent) => { prevent(e); setActive(false); };
+    const onDrop = (e: DragEvent) => {
+      prevent(e); setActive(false);
+      const dt = e.dataTransfer;
+      onFiles(dt?.files ?? null);
+    };
+    el.addEventListener("dragenter", onEnter);
+    el.addEventListener("dragover", onOver);
+    el.addEventListener("dragleave", onLeave);
+    el.addEventListener("drop", onDrop);
+    return () => {
+      el.removeEventListener("dragenter", onEnter);
+      el.removeEventListener("dragover", onOver);
+      el.removeEventListener("dragleave", onLeave);
+      el.removeEventListener("drop", onDrop);
+    };
+  }, [onFiles]);
+
+  return (
+    <Box
+      ref={ref}
+      style={{
+        border: `2px dashed #FF3366`,
+        background: active ? "rgba(255,51,102,0.06)" : "transparent",
+        borderRadius: 16,
+        padding: 24,
+        textAlign: "center",
+        margin: "10px",
+      }}
+    >
+      <Text size="2" color="gray">
+        Arrastra tus imágenes aquí o usa <Text weight="bold" color="crimson">Seleccionar archivos</Text>
+      </Text>
+    </Box>
+  );
+}

packages/frontend/ui/src/components/ImageUploader/Row.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { Box, Button, Card, Flex, Progress, Text } from "@radix-ui/themes";
+import { ItemState, UploadItem } from "./types";
+import { formatBytes } from "./utils";
+
+function labelForState(s: ItemState) {
+  switch (s) {
+    case "QUEUED": return "En cola";
+    case "SIGNING": return "Solicitando URL…";
+    case "UPLOADING": return "Subiendo…";
+    case "PROCESSING": return "Procesando…";
+    case "DONE": return "Listo";
+    case "ERROR": return "Error";
+    case "CANCELED": return "Cancelado";
+    default: return s;
+  }
+}
+
+export function ItemRow({ item, onCancel }: { item: UploadItem; onCancel: () => void }) {
+  const stateColor: Record<ItemState, "gray" | "crimson" | "green" | "amber" | "red"> = {
+    QUEUED: "gray",
+    SIGNING: "amber",
+    UPLOADING: "crimson",
+    PROCESSING: "amber",
+    DONE: "green",
+    ERROR: "red",
+    CANCELED: "gray",
+  };
+
+  const humanSpeed = item.speedBps ? formatBytes(item.speedBps) + "/s" : "";
+  const humanEta = item.etaSec ? `${item.etaSec}s` : "";
+
+  return (
+    <Card className="my-3">
+      <Flex align="center" gap="3">
+        <img
+          src={item.previewUrl}
+          alt={item.file.name}
+          style={{ width: 56, height: 56, objectFit: "cover", borderRadius: 12, border: "1px solid #eee" }}
+        />
+        <Box style={{ flex: 1 }}>
+          <Flex justify="between" align="center">
+            <Text weight="bold">{item.file.name}</Text>
+            <Text color="gray">{formatBytes(item.file.size)}</Text>
+          </Flex>
+          <Progress value={item.progress} color={stateColor[item.state]} mt="2" />
+          <Flex justify="between" mt="1">
+            <Text size="1" color="gray">
+              {labelForState(item.state)} {item.message ? `· ${item.message}` : ""}
+            </Text>
+            <Text size="1" color="gray">
+              {item.state === "UPLOADING" && (humanSpeed || humanEta) ? `${humanSpeed} · ${humanEta}` : ""}
+            </Text>
+          </Flex>
+        </Box>
+        <Flex direction="column" gap="2">
+          {(item.state === "UPLOADING" || item.state === "SIGNING") && (
+            <Button color="red" variant="soft" onClick={onCancel}>Cancelar</Button>
+          )}
+          {item.state === "DONE" && item.urls?.Optimised && (
+            <a href={item.urls.Optimised} target="_blank" rel="noreferrer">
+              <Button variant="soft">Ver</Button>
+            </a>
+          )}
+        </Flex>
+      </Flex>
+    </Card>
+  );
+}

packages/frontend/ui/src/components/ImageUploader/api.ts

@@ -0,0 +1,59 @@
+import { UploadItem, UploadUrlResponse } from "./types";
+
+export const getPresignedUrl = async(input: {
+    url: string,
+    item: UploadItem,
+    OwnerId: string,
+    OwnerType: string,
+    token: string,
+}) => {
+    try {
+        const response = await fetch(input.url, {
+            method: "POST",
+            headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${input.token}`,
+            },
+            body: JSON.stringify({
+                OwnerId: input.OwnerId,
+                OwnerType: input.OwnerType,
+                ContentType: input.item.file.type,
+            }),
+        });
+
+        if (!response.ok) {
+            throw new Error(`Failed to get upload URL (${response.status})`);
+        }
+
+        const data = (await response.json()) as UploadUrlResponse;
+        return data
+    } catch (error) {
+        throw new Error(`Failed to get upload URL (${JSON.stringify(error)})`);
+    }
+}
+
+export const resizeImage = async(input: {
+    url: string,
+    key: string,
+    token: string,
+}) => {
+    try {
+        const response = await fetch(input.url, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${input.token}`,
+            },
+            body: JSON.stringify({ key: input.key }),
+        });
+
+         if (!response.ok) {
+            throw new Error(`Failed to resize Image (${response.status})`);
+        }
+
+        const data = (await response.json()) as Omit<UploadUrlResponse, "PresignedUrl">;
+        return data
+    } catch (error) {
+        throw new Error(`Failed to resize Image (${JSON.stringify(error)})`);
+    }
+}