fix: don't paste file anyways if too large

This commit is contained in:
Paul Makles 2022-04-09 19:02:10 +01:00
parent b2f4411850
commit 56f59d132b

View file

@ -20,33 +20,39 @@ type BehaviourType =
| { behaviour: "ask"; onChange: (file: File) => void } | { behaviour: "ask"; onChange: (file: File) => void }
| { behaviour: "upload"; onUpload: (id: string) => Promise<void> } | { behaviour: "upload"; onUpload: (id: string) => Promise<void> }
| { | {
behaviour: "multi"; behaviour: "multi";
onChange: (files: File[]) => void; onChange: (files: File[]) => void;
append?: (files: File[]) => void; append?: (files: File[]) => void;
} };
type StyleType = type StyleType =
| { | {
style: "icon" | "banner"; style: "icon" | "banner";
width?: number; width?: number;
height?: number; height?: number;
previewURL?: string; previewURL?: string;
defaultPreview?: string; defaultPreview?: string;
desaturateDefault?: boolean desaturateDefault?: boolean;
} }
| { | {
style: "attachment"; style: "attachment";
attached: boolean; attached: boolean;
uploading: boolean; uploading: boolean;
cancel: () => void; cancel: () => void;
size?: number; size?: number;
} };
type Props = BehaviourType & StyleType & { type Props = BehaviourType &
fileType: "backgrounds" | "icons" | "avatars" | "attachments" | "banners"; StyleType & {
maxFileSize: number; fileType:
remove: () => Promise<void>; | "backgrounds"
} | "icons"
| "avatars"
| "attachments"
| "banners";
maxFileSize: number;
remove: () => Promise<void>;
};
export async function uploadFile( export async function uploadFile(
autumnURL: string, autumnURL: string,
@ -80,6 +86,7 @@ export function grabFiles(
input.onchange = async (e) => { input.onchange = async (e) => {
const files = (e.currentTarget as HTMLInputElement)?.files; const files = (e.currentTarget as HTMLInputElement)?.files;
if (!files) return; if (!files) return;
for (const file of files) { for (const file of files) {
if (file.size > maxFileSize) { if (file.size > maxFileSize) {
return tooLarge(); return tooLarge();
@ -167,6 +174,7 @@ export function FileUploader(props: Props) {
id: "error", id: "error",
error: "FileTooLarge", error: "FileTooLarge",
}); });
continue;
} }
files.push(blob); files.push(blob);
@ -195,6 +203,7 @@ export function FileUploader(props: Props) {
for (const item of dropped) { for (const item of dropped) {
if (item.size > props.maxFileSize) { if (item.size > props.maxFileSize) {
openScreen({ id: "error", error: "FileTooLarge" }); openScreen({ id: "error", error: "FileTooLarge" });
continue;
} }
files.push(item); files.push(item);
@ -226,14 +235,19 @@ export function FileUploader(props: Props) {
})} })}
data-uploading={uploading}> data-uploading={uploading}>
<div <div
className={classNames(styles.image, props.desaturateDefault && previewURL == null && styles.desaturate)} className={classNames(
styles.image,
props.desaturateDefault &&
previewURL == null &&
styles.desaturate,
)}
style={{ style={{
backgroundImage: backgroundImage:
style === "icon" style === "icon"
? `url('${previewURL ?? defaultPreview}')` ? `url('${previewURL ?? defaultPreview}')`
: previewURL : previewURL
? `linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('${previewURL}')` ? `linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('${previewURL}')`
: "none", : "none",
width, width,
height, height,
}} }}