Corrige un décalage Content-Type/extension à l'upload d'images sur le Mur (Safari/iPhone)
Build and deploy / deploy (push) Successful in 36s

canvas.toBlob demandait du WebP en dur, mais un navigateur qui ne sait pas l'encoder (Safari, historiquement) retombe silencieusement sur du PNG — le fichier était quand même uploadé étiqueté "webp". L'extension et le Content-Type suivent maintenant le type réel du blob. Remplace aussi le message générique "Une erreur est survenue" par des messages distincts par étape (compression/upload/validation serveur), avec le détail technique loggé en console pour diagnostiquer plus vite la prochaine fois.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Valentin ROBIN
2026-08-25 19:33:36 +02:00
parent 6922d33e39
commit 3aa2ea451c
+19 -6
View File
@@ -308,20 +308,30 @@ export function MurView({
if (imageFile) { if (imageFile) {
try { try {
const blob = await resizeImageToBlob(imageFile); const blob = await resizeImageToBlob(imageFile);
const path = `${crypto.randomUUID()}.webp`; // L'extension/le Content-Type suivent le type RÉEL du blob rendu par
// canvas.toBlob (pas "image/webp" en dur) : certains navigateurs
// (Safari notamment, webp encodé via canvas longtemps mal supporté)
// retombent silencieusement sur du PNG malgré le type demandé —
// uploader ce PNG sous une étiquette "webp" trompeuse pouvait faire
// échouer des vérifications en aval qui, elles, regardent le vrai
// contenu (l'optimiseur d'image de next/image par exemple).
const extension = blob.type === "image/png" ? "png" : blob.type === "image/jpeg" ? "jpg" : "webp";
const path = `${crypto.randomUUID()}.${extension}`;
const { error: uploadError } = await supabase.storage const { error: uploadError } = await supabase.storage
.from("wall-images") .from("wall-images")
.upload(path, blob, { contentType: "image/webp" }); .upload(path, blob, { contentType: blob.type || "image/webp" });
if (uploadError) { if (uploadError) {
setPosting(false); setPosting(false);
setError("Impossible d'envoyer l'image, réessaie."); console.error("Échec de l'envoi de l'image sur le Mur :", uploadError);
setError(`Envoi de l'image impossible (${uploadError.message}). Réessaie.`);
return; return;
} }
const { data: publicUrlData } = supabase.storage.from("wall-images").getPublicUrl(path); const { data: publicUrlData } = supabase.storage.from("wall-images").getPublicUrl(path);
imageUrl = publicUrlData.publicUrl; imageUrl = publicUrlData.publicUrl;
} catch { } catch (err) {
setPosting(false); setPosting(false);
setError("Impossible de traiter l'image, réessaie."); console.error("Échec du traitement de l'image sur le Mur :", err);
setError("Traitement de l'image impossible (format non supporté ?) — réessaie sans image ou avec une autre photo.");
return; return;
} }
} }
@@ -333,12 +343,15 @@ export function MurView({
setPosting(false); setPosting(false);
if (rpcError) { if (rpcError) {
console.error("Échec de post_wall_note :", rpcError);
setError( setError(
rpcError.message.includes("already posted") rpcError.message.includes("already posted")
? "Tu as déjà publié une note aujourd'hui." ? "Tu as déjà publié une note aujourd'hui."
: rpcError.message.includes("wall full") : rpcError.message.includes("wall full")
? "Le mur est déjà complet pour aujourd'hui." ? "Le mur est déjà complet pour aujourd'hui."
: "Une erreur est survenue, réessaie.", : rpcError.message.includes("image invalide")
? "L'image n'a pas pu être validée côté serveur — réessaie sans image ou avec une autre photo."
: `Publication impossible (${rpcError.message}). Réessaie.`,
); );
refetch(); refetch();
return; return;