fix(clerk-js): Fix AvatarUploader error handling (#7357)

Author: jigar-clerk

.changeset/brown-hats-feel.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Improve error handling for invalid avatar file uploads. Previously, avatar images which exceeded the max file size limit of 10MB did not return an error within the Avatar upload component so the user was unaware why their upload did not work.

packages/clerk-js/src/ui/elements/AvatarUploader.tsx

@@ -1,7 +1,16 @@
 import React from 'react';
 
 import type { LocalizationKey } from '../customizables';
-import { Button, Col, descriptors, Flex, localizationKeys, SimpleButton, Text } from '../customizables';
+import {
+  Button,
+  Col,
+  descriptors,
+  Flex,
+  localizationKeys,
+  SimpleButton,
+  Text,
+  useLocalizations,
+} from '../customizables';
 import { handleError } from '../utils/errorHandler';
 import { useCardState } from './contexts';
 
@@ -27,9 +36,9 @@ const SUPPORTED_MIME_TYPES = Object.freeze(['image/png', 'image/jpeg', 'image/gi
 
 const validType = (f: File | DataTransferItem) => SUPPORTED_MIME_TYPES.includes(f.type);
 const validSize = (f: File) => f.size <= MAX_SIZE_BYTES;
-const validFile = (f: File) => validType(f) && validSize(f);
 
 export const AvatarUploader = (props: AvatarUploaderProps) => {
+  const { t } = useLocalizations();
   const [showUpload, setShowUpload] = React.useState(false);
   const [objectUrl, setObjectUrl] = React.useState<string>();
   const card = useCardState();
@@ -64,9 +73,21 @@ export const AvatarUploader = (props: AvatarUploaderProps) => {
   };
 
   const upload = async (f: File | undefined) => {
-    if (f && validFile(f)) {
-      await handleFileDrop(f);
+    if (!f) {
+      return;
     }
+
+    if (!validType(f)) {
+      card.setError(t(localizationKeys('unstable__errors.avatar_file_type_invalid')));
+      return;
+    }
+
+    if (!validSize(f)) {
+      card.setError(t(localizationKeys('unstable__errors.avatar_file_size_exceeded')));
+      return;
+    }
+
+    await handleFileDrop(f);
   };
 
   const previewElement = objectUrl

packages/localizations/src/ar-SA.ts

@@ -874,6 +874,8 @@ export const arSA: LocalizationResource = {
   },
   unstable__errors: {
     already_a_member_in_organization: undefined,
+    avatar_file_size_exceeded: 'حجم الملف يتجاوز الحد الأقصى البالغ 10 ميغابايت. يرجى اختيار ملف أصغر.',
+    avatar_file_type_invalid: 'نوع الملف غير مدعوم. يرجى تحميل صورة بصيغة JPG أو PNG أو GIF أو WEBP.',
     captcha_invalid:
       'لا يمكن تسجيل الحساب بسبب مشاكل تحقق أمنية. الرجاء تحديث الصفحة للمحاولة مرة أخرى أو تواصل معنا للمزيد من المساعدة',
     captcha_unavailable:

packages/localizations/src/be-BY.ts

@@ -882,6 +882,9 @@ export const beBY: LocalizationResource = {
   },
   unstable__errors: {
     already_a_member_in_organization: 'Вы ўжо з’яўляецеся членам гэтай арганізацыі.',
+    avatar_file_size_exceeded: 'Памер файла перавышае максімальны ліміт 10 МБ. Калі ласка, абярыце меншы файл.',
+    avatar_file_type_invalid:
+      'Тып файла не падтрымліваецца. Калі ласка, загрузіце малюнак у фармаце JPG, PNG, GIF або WEBP.',
     captcha_invalid:
       'Рэгістрацыя не ўдалася з-за памылак бяспекі. Калі ласка, абнавіце старонку, каб паспрабаваць яшчэ раз, або звяжыцеся са службай падтрымкі для атрымання дапамогі.',
     captcha_unavailable:

packages/localizations/src/bg-BG.ts

@@ -878,6 +878,9 @@ export const bgBG: LocalizationResource = {
   },
   unstable__errors: {
     already_a_member_in_organization: 'Вие вече сте член на тази организация.',
+    avatar_file_size_exceeded: 'Размерът на файла надвишава максималния лимит от 10 MB. Моля, изберете по-малък файл.',
+    avatar_file_type_invalid:
+      'Типът на файла не се поддържа. Моля, качете изображение във формат JPG, PNG, GIF или WEBP.',
     captcha_invalid: undefined,
     captcha_unavailable: undefined,
     form_code_incorrect: 'Невалиден код. Моля, опитайте отново.',

packages/localizations/src/bn-IN.ts

@@ -882,6 +882,8 @@ export const bnIN: LocalizationResource = {
   },
   unstable__errors: {
     already_a_member_in_organization: '{{email}} ইতিমধ্যে সংগঠনের একজন সদস্য।',
+    avatar_file_size_exceeded: 'ফাইলের আকার সর্বোচ্চ ১০ এমবি সীমা অতিক্রম করেছে। দয়া করে একটি ছোট ফাইল নির্বাচন করুন।',
+    avatar_file_type_invalid: 'ফাইলের ধরন সমর্থিত নয়। দয়া করে JPG, PNG, GIF বা WEBP ছবি আপলোড করুন।',
     captcha_invalid:
       'নিরাপত্তা যাচাইকরণ ব্যর্থ হওয়ার কারণে সাইন আপ ব্যর্থ হয়েছে। আবার চেষ্টা করতে দয়া করে পৃষ্ঠাটি রিফ্রেশ করুন বা আরও সাহায্যের জন্য সাপোর্টের সাথে যোগাযোগ করুন।',
     captcha_unavailable:

packages/localizations/src/ca-ES.ts

@@ -877,6 +877,9 @@ export const caES: LocalizationResource = {
   },
   unstable__errors: {
     already_a_member_in_organization: undefined,
+    avatar_file_size_exceeded:
+      'La mida del fitxer supera el límit màxim de 10 MB. Si us plau, tria un fitxer més petit.',
+    avatar_file_type_invalid: 'El tipus de fitxer no és compatible. Si us plau, puja una imatge JPG, PNG, GIF o WEBP.',
     captcha_invalid:
       "El registre no ha estat exitós a causa de validacions de seguretat fallides. Si us plau, actualitza la pàgina per tornar-ho a intentar o posa't en contacte amb el suport per obtenir més assistència.",
     captcha_unavailable:

packages/localizations/src/cs-CZ.ts

@@ -888,6 +888,9 @@ export const csCZ: LocalizationResource = {
   },
   unstable__errors: {
     already_a_member_in_organization: '{{email}} je již členem organizace.',
+    avatar_file_size_exceeded: 'Velikost souboru přesahuje maximální limit 10 MB. Vyberte prosím menší soubor.',
+    avatar_file_type_invalid:
+      'Typ souboru není podporován. Nahrajte prosím obrázek ve formátu JPG, PNG, GIF nebo WEBP.',
     captcha_invalid:
       'Registrace neúspěšná kvůli neúspěšným bezpečnostním validacím. Prosím, obnovte stránku a zkuste to znovu nebo kontaktujte podporu.',
     captcha_unavailable:

packages/localizations/src/da-DK.ts

@@ -875,6 +875,8 @@ export const daDK: LocalizationResource = {
   },
   unstable__errors: {
     already_a_member_in_organization: undefined,
+    avatar_file_size_exceeded: 'Filstørrelsen overskrider den maksimale grænse på 10 MB. Vælg venligst en mindre fil.',
+    avatar_file_type_invalid: 'Filtypen understøttes ikke. Upload venligst et JPG-, PNG-, GIF- eller WEBP-billede.',
     captcha_invalid:
       'Tilmelding mislykkedes på grund af fejlede sikkerhedsvalideringer. Opdater siden for at prøve igen, eller kontakt support for yderligere assistance.',
     captcha_unavailable:

packages/localizations/src/de-DE.ts

@@ -892,6 +892,10 @@ export const deDE: LocalizationResource = {
   },
   unstable__errors: {
     already_a_member_in_organization: 'Sie sind bereits Mitglied in dieser Organisation.',
+    avatar_file_size_exceeded:
+      'Die Dateigröße überschreitet das Maximum von 10 MB. Bitte wählen Sie eine kleinere Datei.',
+    avatar_file_type_invalid:
+      'Dateityp wird nicht unterstützt. Bitte laden Sie ein JPG-, PNG-, GIF- oder WEBP-Bild hoch.',
     captcha_invalid:
       'Anmeldung aufgrund fehlgeschlagener Sicherheitsüberprüfung nicht erfolgreich. Bitte versuchen Sie es erneut oder kontaktieren Sie uns für weitere Unterstützung.',
     captcha_unavailable: