Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

fix(console): update SSO connector logo uploader file types (#4980)

Browse source
This commit is contained in:
Darcy Ye 2023-11-28 11:41:41 +08:00 committed by GitHub
parent 2ede63c446
commit 63b795ff50
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/console/src/pages/EnterpriseSsoDetails/Settings/LogosUploader/index.tsx
View file

@ -1,3 +1,4 @@
import type { AllowedUploadMimeType } from '@logto/schemas';
import classNames from 'classnames'; import classNames from 'classnames';
import { useState } from 'react'; import { useState } from 'react';
import { Controller, useFormContext } from 'react-hook-form'; import { Controller, useFormContext } from 'react-hook-form';
@ -10,13 +11,15 @@ import type { FormType } from '../index.js';
import * as styles from './index.module.scss'; import * as styles from './index.module.scss';
const allowedMimeTypes: AllowedUploadMimeType[] = ['image/png', 'image/jpeg', 'image/svg+xml']; // Only allow `svg`, `png`, `jpg` and `jpeg` files.
function LogosUploader() { function LogosUploader() {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const [uploadLogoError, setUploadLogoError] = useState<string>(); const [uploadLogoError, setUploadLogoError] = useState<string>();
const [uploadDarkLogoError, setUploadDarkLogoError] = useState<string>(); const [uploadDarkLogoError, setUploadDarkLogoError] = useState<string>();
const { control } = useFormContext<FormType>(); const { control } = useFormContext<FormType>();
const { description } = useImageMimeTypes(); const { description } = useImageMimeTypes(allowedMimeTypes);
return ( return (
<div className={styles.container}> <div className={styles.container}>
@ -31,6 +34,7 @@ function LogosUploader() {
className={styles.frame} className={styles.frame}
value={value ?? ''} value={value ?? ''}
actionDescription={t('enterprise_sso_details.branding_logo_context')} actionDescription={t('enterprise_sso_details.branding_logo_context')}
allowedMimeTypes={allowedMimeTypes}
onCompleted={onChange} onCompleted={onChange}
onUploadErrorChange={setUploadLogoError} onUploadErrorChange={setUploadLogoError}
onDelete={() => { onDelete={() => {
@ -50,6 +54,7 @@ function LogosUploader() {
className={styles.frameDark} className={styles.frameDark}
value={value ?? ''} value={value ?? ''}
actionDescription={t('enterprise_sso_details.branding_dark_logo_context')} actionDescription={t('enterprise_sso_details.branding_dark_logo_context')}
allowedMimeTypes={allowedMimeTypes}
onCompleted={onChange} onCompleted={onChange}
onUploadErrorChange={setUploadDarkLogoError} onUploadErrorChange={setUploadDarkLogoError}
onDelete={() => { onDelete={() => {