From e3bfc67d7b8565658517a16ef52af635cab9b761 Mon Sep 17 00:00:00 2001
From: Oscar Kilhed <oscar.kilhed@grafana.com>
Date: Mon, 30 Jan 2023 12:17:30 +0100
Subject: [PATCH] FileDropzone: Display max file size (#62334)

---
 .../components/FileDropzone/FileDropzone.tsx  | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx b/packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx
index 76f3ed99f74..228c013282f 100644
--- a/packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx
+++ b/packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx
@@ -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)};
     `,