IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

FileDropzone: Display max file size (#62334)

Browse Source
This commit is contained in:
Oscar Kilhed 2023-01-30 12:17:30 +01:00 committed by GitHub
parent 0bfdc42ffe
commit e3bfc67d7b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx
View File

@ -61,6 +61,8 @@ export function FileDropzone({ options, children, readAs, onLoad, fileListRender
const [files, setFiles] = useState<DropzoneFile[]>([]);
const [fileErrors, setErrorMessages] = useState<FileError[]>([]);
const formattedSize = getValueFormat('decbytes')(options?.maxSize ? options?.maxSize : 0);
const setFileProperty = useCallback(
(customFile: DropzoneFile, action: (customFileToModify: DropzoneFile) => void) => {
setFiles((oldFiles) => {
@ -189,7 +191,6 @@ export function FileDropzone({ options, children, readAs, onLoad, fileListRender
{errors.map((error) => {
switch (error.code) {
case ErrorCode.FileTooLarge:
const formattedSize = getValueFormat('decbytes')(options?.maxSize!);
return (
<div key={error.message + error.code}>
File is larger than {formattedValueToString(formattedSize)}
@ -215,9 +216,18 @@ export function FileDropzone({ options, children, readAs, onLoad, fileListRender
{children ?? <FileDropzoneDefaultChildren primaryText={getPrimaryText(files, options)} />}
</div>
{fileErrors.length > 0 && renderErrorMessages(fileErrors)}
{options?.accept && (
<small className={cx(styles.small, styles.acceptMargin)}>{getAcceptedFileTypeText(options.accept)}</small>
)}
<div className={styles.acceptContainer}>
{options?.accept && (
<small className={cx(styles.small, styles.acceptMargin, styles.acceptedFiles)}>
{getAcceptedFileTypeText(options.accept)}
</small>
)}
{options?.maxSize && (
<small className={cx(styles.small, styles.acceptMargin)}>{`Max file size: ${formattedValueToString(
formattedSize
)}`}</small>
)}
</div>
{fileList}
</div>
);
@ -319,6 +329,12 @@ function getStyles(theme: GrafanaTheme2, isDragActive?: boolean) {
flex-direction: column;
align-items: center;
`,
acceptContainer: css`
display: flex;
`,
acceptedFiles: css`
flex-grow: 1;
`,
acceptMargin: css`
margin: ${theme.spacing(2, 0, 1)};
`,