Skip to content

Commit 4ff106a

Browse files
authored
fix(clerk-js): Fix AvatarUploader error handling (#7357)
1 parent 91e3727 commit 4ff106a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+156
-4
lines changed

.changeset/brown-hats-feel.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@clerk/clerk-js': patch
3+
---
4+
5+
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

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
import React from 'react';
22

33
import type { LocalizationKey } from '../customizables';
4-
import { Button, Col, descriptors, Flex, localizationKeys, SimpleButton, Text } from '../customizables';
4+
import {
5+
Button,
6+
Col,
7+
descriptors,
8+
Flex,
9+
localizationKeys,
10+
SimpleButton,
11+
Text,
12+
useLocalizations,
13+
} from '../customizables';
514
import { handleError } from '../utils/errorHandler';
615
import { useCardState } from './contexts';
716

@@ -27,9 +36,9 @@ const SUPPORTED_MIME_TYPES = Object.freeze(['image/png', 'image/jpeg', 'image/gi
2736

2837
const validType = (f: File | DataTransferItem) => SUPPORTED_MIME_TYPES.includes(f.type);
2938
const validSize = (f: File) => f.size <= MAX_SIZE_BYTES;
30-
const validFile = (f: File) => validType(f) && validSize(f);
3139

3240
export const AvatarUploader = (props: AvatarUploaderProps) => {
41+
const { t } = useLocalizations();
3342
const [showUpload, setShowUpload] = React.useState(false);
3443
const [objectUrl, setObjectUrl] = React.useState<string>();
3544
const card = useCardState();
@@ -64,9 +73,21 @@ export const AvatarUploader = (props: AvatarUploaderProps) => {
6473
};
6574

6675
const upload = async (f: File | undefined) => {
67-
if (f && validFile(f)) {
68-
await handleFileDrop(f);
76+
if (!f) {
77+
return;
6978
}
79+
80+
if (!validType(f)) {
81+
card.setError(t(localizationKeys('unstable__errors.avatar_file_type_invalid')));
82+
return;
83+
}
84+
85+
if (!validSize(f)) {
86+
card.setError(t(localizationKeys('unstable__errors.avatar_file_size_exceeded')));
87+
return;
88+
}
89+
90+
await handleFileDrop(f);
7091
};
7192

7293
const previewElement = objectUrl

packages/localizations/src/ar-SA.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -874,6 +874,8 @@ export const arSA: LocalizationResource = {
874874
},
875875
unstable__errors: {
876876
already_a_member_in_organization: undefined,
877+
avatar_file_size_exceeded: 'حجم الملف يتجاوز الحد الأقصى البالغ 10 ميغابايت. يرجى اختيار ملف أصغر.',
878+
avatar_file_type_invalid: 'نوع الملف غير مدعوم. يرجى تحميل صورة بصيغة JPG أو PNG أو GIF أو WEBP.',
877879
captcha_invalid:
878880
'لا يمكن تسجيل الحساب بسبب مشاكل تحقق أمنية. الرجاء تحديث الصفحة للمحاولة مرة أخرى أو تواصل معنا للمزيد من المساعدة',
879881
captcha_unavailable:

packages/localizations/src/be-BY.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -882,6 +882,9 @@ export const beBY: LocalizationResource = {
882882
},
883883
unstable__errors: {
884884
already_a_member_in_organization: 'Вы ўжо з’яўляецеся членам гэтай арганізацыі.',
885+
avatar_file_size_exceeded: 'Памер файла перавышае максімальны ліміт 10 МБ. Калі ласка, абярыце меншы файл.',
886+
avatar_file_type_invalid:
887+
'Тып файла не падтрымліваецца. Калі ласка, загрузіце малюнак у фармаце JPG, PNG, GIF або WEBP.',
885888
captcha_invalid:
886889
'Рэгістрацыя не ўдалася з-за памылак бяспекі. Калі ласка, абнавіце старонку, каб паспрабаваць яшчэ раз, або звяжыцеся са службай падтрымкі для атрымання дапамогі.',
887890
captcha_unavailable:

packages/localizations/src/bg-BG.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -878,6 +878,9 @@ export const bgBG: LocalizationResource = {
878878
},
879879
unstable__errors: {
880880
already_a_member_in_organization: 'Вие вече сте член на тази организация.',
881+
avatar_file_size_exceeded: 'Размерът на файла надвишава максималния лимит от 10 MB. Моля, изберете по-малък файл.',
882+
avatar_file_type_invalid:
883+
'Типът на файла не се поддържа. Моля, качете изображение във формат JPG, PNG, GIF или WEBP.',
881884
captcha_invalid: undefined,
882885
captcha_unavailable: undefined,
883886
form_code_incorrect: 'Невалиден код. Моля, опитайте отново.',

packages/localizations/src/bn-IN.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -882,6 +882,8 @@ export const bnIN: LocalizationResource = {
882882
},
883883
unstable__errors: {
884884
already_a_member_in_organization: '{{email}} ইতিমধ্যে সংগঠনের একজন সদস্য।',
885+
avatar_file_size_exceeded: 'ফাইলের আকার সর্বোচ্চ ১০ এমবি সীমা অতিক্রম করেছে। দয়া করে একটি ছোট ফাইল নির্বাচন করুন।',
886+
avatar_file_type_invalid: 'ফাইলের ধরন সমর্থিত নয়। দয়া করে JPG, PNG, GIF বা WEBP ছবি আপলোড করুন।',
885887
captcha_invalid:
886888
'নিরাপত্তা যাচাইকরণ ব্যর্থ হওয়ার কারণে সাইন আপ ব্যর্থ হয়েছে। আবার চেষ্টা করতে দয়া করে পৃষ্ঠাটি রিফ্রেশ করুন বা আরও সাহায্যের জন্য সাপোর্টের সাথে যোগাযোগ করুন।',
887889
captcha_unavailable:

packages/localizations/src/ca-ES.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -877,6 +877,9 @@ export const caES: LocalizationResource = {
877877
},
878878
unstable__errors: {
879879
already_a_member_in_organization: undefined,
880+
avatar_file_size_exceeded:
881+
'La mida del fitxer supera el límit màxim de 10 MB. Si us plau, tria un fitxer més petit.',
882+
avatar_file_type_invalid: 'El tipus de fitxer no és compatible. Si us plau, puja una imatge JPG, PNG, GIF o WEBP.',
880883
captcha_invalid:
881884
"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.",
882885
captcha_unavailable:

packages/localizations/src/cs-CZ.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -888,6 +888,9 @@ export const csCZ: LocalizationResource = {
888888
},
889889
unstable__errors: {
890890
already_a_member_in_organization: '{{email}} je již členem organizace.',
891+
avatar_file_size_exceeded: 'Velikost souboru přesahuje maximální limit 10 MB. Vyberte prosím menší soubor.',
892+
avatar_file_type_invalid:
893+
'Typ souboru není podporován. Nahrajte prosím obrázek ve formátu JPG, PNG, GIF nebo WEBP.',
891894
captcha_invalid:
892895
'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.',
893896
captcha_unavailable:

packages/localizations/src/da-DK.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -875,6 +875,8 @@ export const daDK: LocalizationResource = {
875875
},
876876
unstable__errors: {
877877
already_a_member_in_organization: undefined,
878+
avatar_file_size_exceeded: 'Filstørrelsen overskrider den maksimale grænse på 10 MB. Vælg venligst en mindre fil.',
879+
avatar_file_type_invalid: 'Filtypen understøttes ikke. Upload venligst et JPG-, PNG-, GIF- eller WEBP-billede.',
878880
captcha_invalid:
879881
'Tilmelding mislykkedes på grund af fejlede sikkerhedsvalideringer. Opdater siden for at prøve igen, eller kontakt support for yderligere assistance.',
880882
captcha_unavailable:

packages/localizations/src/de-DE.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -892,6 +892,10 @@ export const deDE: LocalizationResource = {
892892
},
893893
unstable__errors: {
894894
already_a_member_in_organization: 'Sie sind bereits Mitglied in dieser Organisation.',
895+
avatar_file_size_exceeded:
896+
'Die Dateigröße überschreitet das Maximum von 10 MB. Bitte wählen Sie eine kleinere Datei.',
897+
avatar_file_type_invalid:
898+
'Dateityp wird nicht unterstützt. Bitte laden Sie ein JPG-, PNG-, GIF- oder WEBP-Bild hoch.',
895899
captcha_invalid:
896900
'Anmeldung aufgrund fehlgeschlagener Sicherheitsüberprüfung nicht erfolgreich. Bitte versuchen Sie es erneut oder kontaktieren Sie uns für weitere Unterstützung.',
897901
captcha_unavailable:

0 commit comments

Comments
 (0)