Merge branch 'main' into fix/fix-badges-spacing-componentize

[lemmy-ui.git] / src / shared / components / common / image-upload-form.tsx

diff --git a/src/shared/components/common/image-upload-form.tsx b/src/shared/components/common/image-upload-form.tsx
index 3f40693adb773ef85553bd6c968a496e5426bf0f..890f47f2f36b3cb925f5451fe2df8ae6a2364362 100644 (file)
--- a/src/shared/components/common/image-upload-form.tsx
+++ b/src/shared/components/common/image-upload-form.tsx
@@ -1,4 +1,5 @@
 import { randomStr } from "@utils/helpers";
+import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
 import { HttpService, I18NextService, UserService } from "../../services";
 import { toast } from "../../toast";
@@ -34,16 +35,17 @@ export class ImageUploadForm extends Component<
     return (
       <form className="image-upload-form d-inline">
         {this.props.imageSrc && (
-          <span className="d-inline-block position-relative">
+          <span className="d-inline-block position-relative mb-2">
             {/* TODO: Create "Current Iamge" translation for alt text */}
             <img
               alt=""
               src={this.props.imageSrc}
               height={this.props.rounded ? 60 : ""}
               width={this.props.rounded ? 60 : ""}
-              className={`img-fluid ${
-                this.props.rounded ? "rounded-circle" : ""
-              }`}
+              className={classNames({
+                "rounded-circle object-fit-cover": this.props.rounded,
+                "img-fluid": !this.props.rounded,
+              })}
             />
             <button
               className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent text-white"
@@ -80,6 +82,8 @@ export class ImageUploadForm extends Component<
       if (res.state === "success") {
         if (res.data.msg === "ok") {
           i.props.onUpload(res.data.url as string);
+        } else if (res.data.msg === "too_large") {
+          toast(I18NextService.i18n.t("upload_too_large"), "danger");
         } else {
           toast(JSON.stringify(res), "danger");
         }