mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-29 03:29:03 +03:00
Code Issues Projects Releases Packages Wiki Activity

Filesize limit for logoupload (#2522)

Browse source 
* add readable byts helper function

* adjust wording for logo upload

* limit file size to 2 MB

* remove log

Co-authored-by: Gabe Kangas <gabek@real-ity.com>
This commit is contained in:
André Rusakow 2022-12-29 00:41:49 +01:00 committed by GitHub
parent 3819335090
commit 05c8ce223b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
web/components/config/EditLogo.tsx
View file

@ -18,7 +18,12 @@ import {
} from '../../utils/input-statuses'; } from '../../utils/input-statuses';
import { NEXT_PUBLIC_API_HOST } from '../../utils/apis'; import { NEXT_PUBLIC_API_HOST } from '../../utils/apis';
import { ACCEPTED_IMAGE_TYPES, getBase64 } from '../../utils/images'; import {
ACCEPTED_IMAGE_TYPES,
getBase64,
MAX_IMAGE_FILESIZE,
readableBytes,
} from '../../utils/images';
export const EditLogo: FC = () => { export const EditLogo: FC = () => {
const [logoUrl, setlogoUrl] = useState(null); const [logoUrl, setlogoUrl] = useState(null);
@ -47,6 +52,14 @@ export const EditLogo: FC = () => {
// eslint-disable-next-line consistent-return // eslint-disable-next-line consistent-return
return new Promise<void>((res, rej) => { return new Promise<void>((res, rej) => {
if (file.size > MAX_IMAGE_FILESIZE) {
const msg = `File size is too big: ${readableBytes(file.size)}`;
setSubmitStatus(createInputStatus(STATUS_ERROR, `There was an error: ${msg}`));
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
setLoading(false);
// eslint-disable-next-line no-promise-executor-return
return rej();
}
if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) { if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
const msg = `File type is not supported: ${file.type}`; const msg = `File type is not supported: ${file.type}`;
setSubmitStatus(createInputStatus(STATUS_ERROR, `There was an error: ${msg}`)); setSubmitStatus(createInputStatus(STATUS_ERROR, `There was an error: ${msg}`));

2
web/utils/config-constants.tsx
View file

@ -111,7 +111,7 @@ export const TEXTFIELD_PROPS_LOGO = {
maxLength: 255, maxLength: 255,
placeholder: '/img/mylogo.png', placeholder: '/img/mylogo.png',
label: 'Logo', label: 'Logo',
tip: 'Upload your logo if you have one. We recommend that you use a square image that is at least 256x256. SVGs are discouraged as they cannot be displayed on all social media platforms.', tip: 'Upload your logo if you have one (max size 2 MB). We recommend that you use a square image that is at least 256x256. SVGs are discouraged as they cannot be displayed on all social media platforms.',
}; };
export const TEXTFIELD_PROPS_ADMIN_PASSWORD = { export const TEXTFIELD_PROPS_ADMIN_PASSWORD = {
apiPath: API_STREAM_KEY, apiPath: API_STREAM_KEY,

11
web/utils/images.ts
View file

@ -1,3 +1,6 @@
import { RcFile } from 'antd/lib/upload';
export const MAX_IMAGE_FILESIZE = 2097152;
export const ACCEPTED_IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/gif']; export const ACCEPTED_IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/gif'];
export function getBase64(img: File | Blob, callback: (imageUrl: string | ArrayBuffer) => void) { export function getBase64(img: File | Blob, callback: (imageUrl: string | ArrayBuffer) => void) {
@ -5,3 +8,11 @@ export function getBase64(img: File | Blob, callback: (imageUrl: string | ArrayB
reader.addEventListener('load', () => callback(reader.result)); reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img); reader.readAsDataURL(img);
} }
export function readableBytes(bytes: number): string {
const index = Math.floor(Math.log(bytes) / Math.log(1024));
const SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const size = Number((bytes / Math.pow(1024, index)).toFixed(2)) * 1;
return `${size} ${SIZE_UNITS[index]}`;
}