a tool for shared writing and social publishing
pass through animated images
Jared Pereira
(Apr 8, 2026, 9:14 AM EDT)
195dcfa8
9980796e
+27
-5
+27
-5
src/utils/addImage.ts
+27
-5
src/utils/addImage.ts
···
16
16
) {
17
17
let client = supabaseBrowserClient();
18
18
let cache = await caches.open("minilink-user-assets");
19
-
let fileID = v7();
19
+
let isAnimated = isAnimatedFormat(file.type);
20
+
let fileID = v7() + (isAnimated ? "." + file.name.split(".").pop() : "");
20
21
let url = client.storage.from("minilink-user-assets").getPublicUrl(fileID)
21
22
.data.publicUrl;
22
-
// Re-encode through canvas to bake EXIF orientation into pixel data.
23
-
// iPhone photos have EXIF rotation metadata that browsers respect, but
24
-
// Supabase's image transformation pipeline strips without applying.
25
-
let { blob: uploadBlob, width, height } = await normalizeOrientation(file);
23
+
24
+
let uploadBlob: Blob;
25
+
let width: number;
26
+
let height: number;
27
+
if (isAnimated) {
28
+
// Skip re-encoding for animated formats (GIF, APNG, animated WebP)
29
+
// to preserve animation frames
30
+
uploadBlob = file;
31
+
let bitmap = await createImageBitmap(file);
32
+
width = bitmap.width;
33
+
height = bitmap.height;
34
+
bitmap.close();
35
+
} else {
36
+
// Re-encode through canvas to bake EXIF orientation into pixel data.
37
+
// iPhone photos have EXIF rotation metadata that browsers respect, but
38
+
// Supabase's image transformation pipeline strips without applying.
39
+
let normalized = await normalizeOrientation(file);
40
+
uploadBlob = normalized.blob;
41
+
width = normalized.width;
42
+
height = normalized.height;
43
+
}
26
44
27
45
await cache.put(
28
46
new URL(url + "?local"),
···
97
115
rgbaToThumbHash(imageData.width, imageData.height, imageData.data),
98
116
);
99
117
return thumbHash;
118
+
}
119
+
120
+
function isAnimatedFormat(mimeType: string): boolean {
121
+
return mimeType === "image/gif" || mimeType === "image/apng";
100
122
}
101
123
102
124
async function normalizeOrientation(