🐛 Add custom validation for max size error

Signed-off-by: ibolton336 <ibolton@redhat.com>
konveyor · Oct 11, 2023 · 1359290 · 1359290
1 parent 7ce28d2
commit 1359290
Showing 1 changed file with 73 additions and 46 deletions.
diff --git a/client/src/app/pages/migration-targets/components/custom-target-form.tsx b/client/src/app/pages/migration-targets/components/custom-target-form.tsx
@@ -71,11 +71,12 @@ export const CustomTargetForm: React.FC<CustomTargetFormProps> = ({
   const { pushNotification } = useContext(NotificationsContext);
   const { t } = useTranslation();
   const [target, setTarget] = useState(initialTarget);
+  const [imageRejectedError, setImageRejectedError] = useState<string | null>(
+    null
+  );
 
   const [filename, setFilename] = React.useState("default.png");
 
-  const [isImageFileRejected, setIsImageFileRejected] = useState(false);
-
   const repositoryTypeOptions: OptionWithValue<string>[] = [
     {
       value: "git",
@@ -408,52 +409,72 @@ export const CustomTargetForm: React.FC<CustomTargetFormProps> = ({
         fieldId="custom-migration-target-upload-image"
         helperText="Upload a png or jpeg file (Max size: 1 MB)"
         renderInput={({ field: { onChange, name }, fieldState: { error } }) => (
-          <FileUpload
-            id="custom-migration-target-upload-image"
-            name={name}
-            value={filename}
-            filename={filename}
-            filenamePlaceholder="Drag and drop a file or upload one"
-            dropzoneProps={{
-              accept: {
-                "image/png": [".png"],
-                "image/jpeg": [".jpeg", ".jpg"],
-              },
-              maxSize: 1000000,
-              onDropRejected: (event) => {
-                const currentFile = event[0];
-                if (currentFile.file.size > 1000000) {
-                  methods.setError("imageID", {
-                    type: "custom",
-                    message: "Max image file size of 1 MB exceeded.",
-                  });
+          <>
+            {imageRejectedError && (
+              <Alert
+                variant="danger"
+                isInline
+                className={spacing.mbMd}
+                title={imageRejectedError}
+                actionClose={
+                  <AlertActionCloseButton
+                    onClose={() => {
+                      onChange(null);
+                      setFilename("default.png");
+                      setValue("imageID", null);
+                      setImageRejectedError(null);
+                    }}
+                  />
                 }
-                setIsImageFileRejected(true);
-              },
-            }}
-            validated={isImageFileRejected || error ? "error" : "default"}
-            onFileInputChange={async (_, file) => {
-              handleFileUpload(file)
-                .then((res) => {
-                  setValue("imageID", res.id);
-                  setFocus("imageID");
-                  clearErrors("imageID");
-                  trigger("imageID");
-                })
-                .catch((err) => {
-                  setValue("imageID", null);
-                });
-            }}
-            onClearClick={() => {
-              onChange(0);
-              setFilename("default.png");
-              setValue("imageID", null);
-              setIsImageFileRejected(false);
-            }}
-            browseButtonText="Upload"
-          />
+              />
+            )}
+            <FileUpload
+              id="custom-migration-target-upload-image"
+              name={name}
+              value={filename}
+              filename={filename}
+              filenamePlaceholder="Drag and drop a file or upload one"
+              dropzoneProps={{
+                accept: {
+                  "image/png": [".png"],
+                  "image/jpeg": [".jpeg", ".jpg"],
+                },
+                maxSize: 1000000,
+                onDropRejected: (event) => {
+                  const currentFile = event[0];
+                  if (currentFile.file.size > 1000000) {
+                    setImageRejectedError(
+                      "Max image file size of 1 MB exceeded."
+                    );
+                  }
+                  setFilename(currentFile.file.name);
+                },
+              }}
+              validated={"default"}
+              onFileInputChange={async (_, file) => {
+                handleFileUpload(file)
+                  .then((res) => {
+                    setValue("imageID", res.id);
+                    setFocus("imageID");
+                    clearErrors("imageID");
+                    trigger("imageID");
+                  })
+                  .catch((err) => {
+                    setValue("imageID", null);
+                  });
+              }}
+              onClearClick={() => {
+                setImageRejectedError(null);
+                onChange(null);
+                setFilename("default.png");
+                setValue("imageID", null);
+              }}
+              browseButtonText="Upload"
+            />
+          </>
         )}
       />
+
       <HookFormPFGroupController
         control={control}
         name="rulesKind"
@@ -617,7 +638,13 @@ export const CustomTargetForm: React.FC<CustomTargetFormProps> = ({
           aria-label="submit"
           id="submit"
           variant={ButtonVariant.primary}
-          isDisabled={!isValid || isSubmitting || isValidating || !isDirty}
+          isDisabled={
+            !isValid ||
+            isSubmitting ||
+            isValidating ||
+            !isDirty ||
+            !!imageRejectedError
+          }
         >
           {!target ? t("actions.create") : t("actions.save")}
         </Button>