Block upload if size exceeds capacity

packages/common-components/src/FileInput/FileInput.tsx

@@ -51,6 +51,9 @@ const useStyles = makeStyles(({ constants, palette, overrides }: ITheme) =>
     },
     error: {
       color: palette.error.main,
+      backgroundColor: palette.additional["gray"][3],
+      paddingLeft: 40,
+      paddingBottom: 4,
       ...overrides?.FileInput?.error
     },
     item: {

packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx

@@ -26,7 +26,7 @@ import { parseFileContentResponse } from "../../../Utils/Helpers"
 import getFilesFromDataTransferItems from "../../../Utils/getFilesFromDataTransferItems"
 
 const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
-  const { downloadFile, uploadFiles, buckets } = useFiles()
+  const { downloadFile, uploadFiles, buckets, storageSummary } = useFiles()
   const { accountRestricted } = useFilesApi()
   const { filesApiClient } = useFilesApi()
   const { addToast } = useToasts()
@@ -169,12 +169,23 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
       return
     }
 
+    const availableStorage = storageSummary?.available_storage || 0
+    const uploadSize = files?.reduce((total: number, file: File) => total += file.size, 0) || 0
+
+    if (uploadSize > availableStorage) {
+      addToast({
+        type: "error",
+        title: t`Upload size exceeds plan capacity`,
+        subtitle: t`Please select fewer files to upload`
+      })
+      return
+    }
     const flattenedFiles = await getFilesFromDataTransferItems(fileItems)
     const paths = [...new Set(flattenedFiles.map(f => f.filepath))]
     paths.forEach(p => {
       uploadFiles(bucket, flattenedFiles.filter(f => f.filepath === p), getPathWithFile(path, p))
     })
-  }, [uploadFiles, bucket, accountRestricted, addToast])
+  }, [bucket, accountRestricted, storageSummary, addToast, uploadFiles])
 
   const viewFolder = useCallback((cid: string) => {
     const fileSystemItem = pathContents.find(f => f.cid === cid)

packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx

@@ -43,7 +43,7 @@ const useStyles = makeStyles(({ constants, palette }: CSFTheme) =>
   }))
 
 const SharedFileBrowser = () => {
-  const { downloadFile, uploadFiles, buckets, getStorageSummary, refreshBuckets } = useFiles()
+  const { downloadFile, uploadFiles, buckets, getStorageSummary, refreshBuckets, storageSummary } = useFiles()
   const { filesApiClient, accountRestricted } = useFilesApi()
   const classes = useStyles()
   const { addToast } = useToasts()
@@ -201,20 +201,31 @@ const SharedFileBrowser = () => {
 
   const handleUploadOnDrop = useCallback(async (files: File[], fileItems: DataTransferItemList, path: string) => {
     if (!bucket) return
-    if (accountRestricted) {
+    if (accountRestricted && bucket.permission === "owner") {
       addToast({
         type:"error",
         title: t`Uploads disabled`,
         subtitle: t`Your account is restricted. Until you've settled up, you can't upload any new content.`
       })
       return
     }
+    const availableStorage = storageSummary?.available_storage || 0
+    const uploadSize = files?.reduce((total: number, file: File) => total += file.size, 0) || 0
+
+    if (bucket.permission === "owner" && uploadSize > availableStorage) {
+      addToast({
+        type: "error",
+        title: t`Upload size exceeds plan capacity`,
+        subtitle: t`Please select fewer files to upload`
+      })
+      return
+    }
     const flattenedFiles = await getFilesFromDataTransferItems(fileItems)
     const paths = [...new Set(flattenedFiles.map(f => f.filepath))]
     paths.forEach(p => {
       uploadFiles(bucket, flattenedFiles.filter(f => f.filepath === p), getPathWithFile(path, p))
     })
-  }, [uploadFiles, bucket, accountRestricted, addToast])
+  }, [bucket, accountRestricted, storageSummary, addToast, uploadFiles])
 
   const bulkOperations: IBulkOperations = useMemo(() => ({
     [CONTENT_TYPES.Directory]: ["download", "move", "delete", "share"],

packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx

@@ -1,7 +1,7 @@
 import { Button, FileInput } from "@chainsafe/common-components"
 import { useFiles } from "../../../Contexts/FilesContext"
 import { createStyles, makeStyles } from "@chainsafe/common-theme"
-import React, { useCallback, useState } from "react"
+import React, { useCallback, useMemo, useState } from "react"
 import { Formik, Form } from "formik"
 import { array, object } from "yup"
 import CustomModal from "../../Elements/CustomModal"
@@ -83,15 +83,27 @@ const UploadFileModule = ({ modalOpen, close }: IUploadFileModuleProps) => {
   const [isDoneDisabled, setIsDoneDisabled] = useState(true)
   const { uploadFiles } = useFiles()
   const { currentPath, refreshContents, bucket } = useFileBrowser()
+  const { storageSummary } = useFiles()
 
-  const UploadSchema = object().shape({ files: array().required(t`Please select a file to upload`) })
+  const UploadSchema = useMemo(() => object().shape({
+    files: array().required(t`Please select a file to upload`)
+      .test("Upload Size",
+        t`Upload size exceeds plan capacity`,
+        (files) => {
+          const isOwner = bucket?.permission === "owner"
+          const availableStorage = storageSummary?.available_storage || 0
+          const uploadSize = files?.reduce((total: number, file: File) => total += file.size, 0) || 0
+          return !(isOwner && uploadSize > availableStorage)
+        })
+  }), [bucket, storageSummary])
 
   const onFileNumberChange = useCallback((filesNumber: number) => {
     setIsDoneDisabled(filesNumber === 0)
   }, [])
 
   const onSubmit = useCallback(async (values: {files: Array<File & {path: string}>}, helpers) => {
     if (!bucket) return
+
     helpers.setSubmitting(true)
     try {
       close()
@@ -106,7 +118,7 @@ const UploadFileModule = ({ modalOpen, close }: IUploadFileModuleProps) => {
       console.error(error)
     }
     helpers.setSubmitting(false)
-  }, [close, currentPath, uploadFiles, refreshContents, bucket])
+  }, [bucket, close, refreshContents, uploadFiles, currentPath])
 
   return (
     <CustomModal
@@ -122,49 +134,51 @@ const UploadFileModule = ({ modalOpen, close }: IUploadFileModuleProps) => {
         validationSchema={UploadSchema}
         onSubmit={onSubmit}
       >
-        <Form
-          data-cy="form-upload-file"
-          className={classes.root}
-        >
-          <FileInput
-            multiple={true}
-            className={classes.input}
-            classNames={{
-              closeIcon: classes.closeIcon,
-              filelist: classes.fileList,
-              item: classes.item,
-              addFiles: classes.addFiles
-            }}
-            label={t`Click or drag to upload files`}
-            moreFilesLabel={t`Add more files`}
-            maxSize={2 * 1024 ** 3}
-            name="files"
-            onFileNumberChange={onFileNumberChange}
-            testId="fileUpload"
-          />
-          <footer className={classes.footer}>
-            <Button
-              testId="cancel-upload"
-              onClick={close}
-              size="medium"
-              className={classes.cancelButton}
-              variant="outline"
-              type="reset"
-            >
-              <Trans>Cancel</Trans>
-            </Button>
-            <Button
-              testId="start-upload"
-              size="medium"
-              type="submit"
-              variant="primary"
-              className={clsx(classes.okButton, "wide")}
-              disabled={isDoneDisabled}
-            >
-              <Trans>Start Upload</Trans>
-            </Button>
-          </footer>
-        </Form>
+        {({ isValid }) => (
+          <Form
+            data-cy="form-upload-file"
+            className={classes.root}
+          >
+            <FileInput
+              multiple={true}
+              className={classes.input}
+              classNames={{
+                closeIcon: classes.closeIcon,
+                filelist: classes.fileList,
+                item: classes.item,
+                addFiles: classes.addFiles
+              }}
+              label={t`Click or drag to upload files`}
+              moreFilesLabel={t`Add more files`}
+              maxSize={2 * 1024 ** 3}
+              name="files"
+              onFileNumberChange={onFileNumberChange}
+              testId="fileUpload"
+            />
+            <footer className={classes.footer}>
+              <Button
+                testId="cancel-upload"
+                onClick={close}
+                size="medium"
+                className={classes.cancelButton}
+                variant="outline"
+                type="reset"
+              >
+                <Trans>Cancel</Trans>
+              </Button>
+              <Button
+                testId="start-upload"
+                size="medium"
+                type="submit"
+                variant="primary"
+                className={clsx(classes.okButton, "wide")}
+                disabled={isDoneDisabled || !isValid}
+              >
+                <Trans>Start Upload</Trans>
+              </Button>
+            </footer>
+          </Form>
+        )}
       </Formik>
     </CustomModal>
   )

packages/files-ui/src/locales/de/messages.po

@@ -697,6 +697,9 @@ msgstr "Bitte geben Sie ein Passwort an"
 msgid "Please select a file to upload"
 msgstr "Bitte wählen Sie eine Datei zum Hochladen"
 
+msgid "Please select fewer files to upload"
+msgstr ""
+
 msgid "Preview"
 msgstr "Vorschau"
 
@@ -1033,6 +1036,9 @@ msgstr ""
 msgid "Upload"
 msgstr ""
 
+msgid "Upload size exceeds plan capacity"
+msgstr ""
+
 msgid "Uploads cancelled"
 msgstr ""
 

packages/files-ui/src/locales/en/messages.po

@@ -700,6 +700,9 @@ msgstr "Please provide a password"
 msgid "Please select a file to upload"
 msgstr "Please select a file to upload"
 
+msgid "Please select fewer files to upload"
+msgstr "Please select fewer files to upload"
+
 msgid "Preview"
 msgstr "Preview"
 
@@ -1036,6 +1039,9 @@ msgstr "Update your credit card"
 msgid "Upload"
 msgstr "Upload"
 
+msgid "Upload size exceeds plan capacity"
+msgstr "Upload size exceeds plan capacity"
+
 msgid "Uploads cancelled"
 msgstr "Uploads cancelled"
 

packages/files-ui/src/locales/es/messages.po

@@ -701,6 +701,9 @@ msgstr "Por favor ingrese una contraseña"
 msgid "Please select a file to upload"
 msgstr ""
 
+msgid "Please select fewer files to upload"
+msgstr ""
+
 msgid "Preview"
 msgstr "Avance"
 
@@ -1037,6 +1040,9 @@ msgstr ""
 msgid "Upload"
 msgstr ""
 
+msgid "Upload size exceeds plan capacity"
+msgstr ""
+
 msgid "Uploads cancelled"
 msgstr ""
 

packages/files-ui/src/locales/fr/messages.po

@@ -701,6 +701,9 @@ msgstr "Merci de donner un mot de passe"
 msgid "Please select a file to upload"
 msgstr "Merci de sélectionner un fichier à téléverser"
 
+msgid "Please select fewer files to upload"
+msgstr ""
+
 msgid "Preview"
 msgstr "Aperçu"
 
@@ -1037,6 +1040,9 @@ msgstr "Mettre à jour votre carte de crédit"
 msgid "Upload"
 msgstr "Téléverser"
 
+msgid "Upload size exceeds plan capacity"
+msgstr ""
+
 msgid "Uploads cancelled"
 msgstr "Téléversements annulés"
 

packages/files-ui/src/locales/no/messages.po

@@ -697,6 +697,9 @@ msgstr "Angi et passord"
 msgid "Please select a file to upload"
 msgstr "Velg en fil å laste opp"
 
+msgid "Please select fewer files to upload"
+msgstr ""
+
 msgid "Preview"
 msgstr "Forhåndsvis"
 
@@ -1033,6 +1036,9 @@ msgstr ""
 msgid "Upload"
 msgstr ""
 
+msgid "Upload size exceeds plan capacity"
+msgstr ""
+
 msgid "Uploads cancelled"
 msgstr ""