fix(admin): return presignedUrl from from-url endpoint and update image preview after fetch
- images.ts: import getImageUrl from storage service, call after fetchImageFromUrl and include presignedUrl in response - $itemId.tsx: update handleFetchFromUrl to use presignedUrl and dominantColor from response, set imageUrl in form state so ImageUpload component shows preview immediately
This commit is contained in:
@@ -161,13 +161,17 @@ function AdminItemEditPage() {
|
|||||||
setFetchingImage(true);
|
setFetchingImage(true);
|
||||||
setFetchError(null);
|
setFetchError(null);
|
||||||
try {
|
try {
|
||||||
const result = await apiPost<{ filename: string; sourceUrl: string }>(
|
const result = await apiPost<{
|
||||||
"/api/images/from-url",
|
filename: string;
|
||||||
{ url: fetchUrl.trim() },
|
sourceUrl: string;
|
||||||
);
|
presignedUrl: string;
|
||||||
|
dominantColor: string | null;
|
||||||
|
}>("/api/images/from-url", { url: fetchUrl.trim() });
|
||||||
setForm((prev) => ({
|
setForm((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
imageFilename: result.filename,
|
imageFilename: result.filename,
|
||||||
|
imageUrl: result.presignedUrl,
|
||||||
|
dominantColor: result.dominantColor ?? "",
|
||||||
imageSourceUrl: fetchUrl.trim(),
|
imageSourceUrl: fetchUrl.trim(),
|
||||||
}));
|
}));
|
||||||
setFetchUrl("");
|
setFetchUrl("");
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import {
|
|||||||
extractDominantColor,
|
extractDominantColor,
|
||||||
fetchImageFromUrl,
|
fetchImageFromUrl,
|
||||||
} from "../services/image.service";
|
} from "../services/image.service";
|
||||||
import { uploadImage } from "../services/storage.service";
|
import { getImageUrl, uploadImage } from "../services/storage.service";
|
||||||
|
|
||||||
const ALLOWED_TYPES = ["image/jpeg", "image/png", "image/webp"];
|
const ALLOWED_TYPES = ["image/jpeg", "image/png", "image/webp"];
|
||||||
const MAX_SIZE = 5 * 1024 * 1024; // 5MB
|
const MAX_SIZE = 5 * 1024 * 1024; // 5MB
|
||||||
@@ -19,7 +19,8 @@ app.post("/from-url", zValidator("json", fromUrlSchema), async (c) => {
|
|||||||
const { url } = c.req.valid("json");
|
const { url } = c.req.valid("json");
|
||||||
try {
|
try {
|
||||||
const result = await fetchImageFromUrl(url);
|
const result = await fetchImageFromUrl(url);
|
||||||
return c.json(result, 201);
|
const presignedUrl = await getImageUrl(result.filename);
|
||||||
|
return c.json({ ...result, presignedUrl }, 201);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
const message = (err as Error).message;
|
const message = (err as Error).message;
|
||||||
// Known validation errors from the service
|
// Known validation errors from the service
|
||||||
|
|||||||
Reference in New Issue
Block a user