From 500e9c3bbc6304dfc48365959a4329518bb8abf1 Mon Sep 17 00:00:00 2001 From: Philipp Schmitt Date: Tue, 12 Nov 2024 14:53:57 +0100 Subject: [PATCH 1/3] BA-1776 [FE] restrict upload to files <15 MB, always display input element --- .../components/Dropzone/index.tsx | 34 ++++++++++++------- 1 file changed, 21 insertions(+), 13 deletions(-) diff --git a/packages/design-system/components/Dropzone/index.tsx b/packages/design-system/components/Dropzone/index.tsx index 13d9f53c..e05a250e 100644 --- a/packages/design-system/components/Dropzone/index.tsx +++ b/packages/design-system/components/Dropzone/index.tsx @@ -1,6 +1,6 @@ -import { FC, useState } from 'react' +import React, { FC, useState } from 'react' -import { getImageString } from '@baseapp-frontend/utils' +import { getImageString, useNotification } from '@baseapp-frontend/utils' import { Box, Button, Card, Typography } from '@mui/material' import { useDropzone } from 'react-dropzone' @@ -24,11 +24,16 @@ const Dropzone: FC = ({ DropzoneOptions, }) => { const [files, setFiles] = useState(storedImg) + const { sendToast } = useNotification() const { open, getRootProps, getInputProps, isFocused, isDragAccept, isDragReject } = useDropzone({ accept, onDrop: async (acceptedFiles: any) => { if (acceptedFiles.length === 0) return + if (acceptedFiles[0].size > 15 * 1024 * 1024) { + sendToast('This file is too large (max 15 MB).', { type: 'error' }) + return + } const imgString = await getImageString(acceptedFiles[0]) if (!imgString) return setFiles(imgString) @@ -45,20 +50,23 @@ const Dropzone: FC = ({ const renderContent = () => { if (files) return ( - - - preview - - + <> + + + + preview + + + ) return ( -
+
{isDragReject ? ( From c9c25f404c4101206f01250a057930b1bb45ab8f Mon Sep 17 00:00:00 2001 From: Philipp Schmitt Date: Tue, 19 Nov 2024 11:25:16 -0500 Subject: [PATCH 2/3] BA-1776 make maximum file size configurable --- packages/design-system/components/Dropzone/index.tsx | 7 ++++--- packages/design-system/components/Dropzone/types.ts | 1 + 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/design-system/components/Dropzone/index.tsx b/packages/design-system/components/Dropzone/index.tsx index e05a250e..4448cbfe 100644 --- a/packages/design-system/components/Dropzone/index.tsx +++ b/packages/design-system/components/Dropzone/index.tsx @@ -20,7 +20,8 @@ const Dropzone: FC = ({ onSelect, onRemove, actionText = 'Upload Image', - subTitle = 'Max. File Size: 15MB', + maxFileSize = 15, + subTitle = `Max. File Size: ${maxFileSize}MB`, DropzoneOptions, }) => { const [files, setFiles] = useState(storedImg) @@ -30,8 +31,8 @@ const Dropzone: FC = ({ accept, onDrop: async (acceptedFiles: any) => { if (acceptedFiles.length === 0) return - if (acceptedFiles[0].size > 15 * 1024 * 1024) { - sendToast('This file is too large (max 15 MB).', { type: 'error' }) + if (acceptedFiles[0].size > maxFileSize * 1024 * 1024) { + sendToast(`This file is too large (max ${maxFileSize} MB).`, { type: 'error' }) return } const imgString = await getImageString(acceptedFiles[0]) diff --git a/packages/design-system/components/Dropzone/types.ts b/packages/design-system/components/Dropzone/types.ts index b46a7207..b1ed0b89 100644 --- a/packages/design-system/components/Dropzone/types.ts +++ b/packages/design-system/components/Dropzone/types.ts @@ -15,5 +15,6 @@ export interface DropzoneProps { onRemove: () => void actionText?: string subTitle?: string + maxFileSize?: number DropzoneOptions?: Partial } From ecfdced0cb33b648c9928c36d7c7fb38ef8d9514 Mon Sep 17 00:00:00 2001 From: Philipp Schmitt Date: Tue, 19 Nov 2024 11:31:28 -0500 Subject: [PATCH 3/3] BA-1776 package versioning --- packages/components/CHANGELOG.md | 7 +++++++ packages/components/package.json | 2 +- packages/design-system/CHANGELOG.md | 6 ++++++ packages/design-system/package.json | 2 +- 4 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index c6f605cb..07b6a706 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,12 @@ # @baseapp-frontend/components +## 0.0.17 + +### Patch Changes + +Updated dependencies + - @baseapp-frontend/design-system@0.0.17 + ## 0.0.16 ### Patch Changes diff --git a/packages/components/package.json b/packages/components/package.json index 5d6bc9b1..91d6dc64 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,7 +1,7 @@ { "name": "@baseapp-frontend/components", "description": "BaseApp components modules such as comments, notifications, messages, and more.", - "version": "0.0.16", + "version": "0.0.17", "main": "./index.ts", "types": "dist/index.d.ts", "sideEffects": false, diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md index 453b542c..7ef1c6c7 100644 --- a/packages/design-system/CHANGELOG.md +++ b/packages/design-system/CHANGELOG.md @@ -1,5 +1,11 @@ # @baseapp-frontend/design-system +## 0.0.18 + +### Patch Changes + +- Impose file size limits on Dropzones + ## 0.0.17 ### Patch Changes diff --git a/packages/design-system/package.json b/packages/design-system/package.json index c9b0dfaa..aa9a5dfe 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -1,7 +1,7 @@ { "name": "@baseapp-frontend/design-system", "description": "Design System components and configurations.", - "version": "0.0.17", + "version": "0.0.18", "main": "./index.ts", "types": "dist/index.d.ts", "sideEffects": false,