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 a090bc8948a29dea1e9cf12dc2869fede501c13d..890f47f2f36b3cb925f5451fe2df8ae6a2364362 100644 (file)
--- a/src/shared/components/common/image-upload-form.tsx
+++ b/src/shared/components/common/image-upload-form.tsx
@@ -1,13 +1,13 @@
+import { randomStr } from "@utils/helpers";
+import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
-import { pictrsUri } from "../../env";
-import { i18n } from "../../i18next";
-import { UserService } from "../../services";
-import { randomStr, toast } from "../../utils";
+import { HttpService, I18NextService, UserService } from "../../services";
+import { toast } from "../../toast";
 import { Icon } from "./icon";
 
 interface ImageUploadFormProps {
   uploadTitle: string;
-  imageSrc: string;
+  imageSrc?: string;
   onUpload(url: string): any;
   onRemove(): any;
   rounded?: boolean;
@@ -33,38 +33,36 @@ export class ImageUploadForm extends Component<
 
   render() {
     return (
-      <form class="d-inline">
-        <label
-          htmlFor={this.id}
-          class="pointer ml-4 text-muted small font-weight-bold"
-        >
-          {!this.props.imageSrc ? (
-            <span class="btn btn-secondary">{this.props.uploadTitle}</span>
-          ) : (
-            <span class="d-inline-block position-relative">
-              <img
-                src={this.props.imageSrc}
-                height={this.props.rounded ? 60 : ""}
-                width={this.props.rounded ? 60 : ""}
-                className={`img-fluid ${
-                  this.props.rounded ? "rounded-circle" : ""
-                }`}
-              />
-              <a
-                onClick={linkEvent(this, this.handleRemoveImage)}
-                aria-label={i18n.t("remove")}
-              >
-                <Icon icon="x" classes="mini-overlay" />
-              </a>
-            </span>
-          )}
-        </label>
+      <form className="image-upload-form d-inline">
+        {this.props.imageSrc && (
+          <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={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"
+              type="button"
+              onClick={linkEvent(this, this.handleRemoveImage)}
+              aria-label={I18NextService.i18n.t("remove")}
+            >
+              <Icon icon="x" classes="mini-overlay" />
+            </button>
+          </span>
+        )}
         <input
           id={this.id}
           type="file"
           accept="image/*,video/*"
+          className="small form-control"
           name={this.id}
-          class="d-none"
           disabled={!UserService.Instance.myUserInfo}
           onChange={linkEvent(this, this.handleImageUpload)}
         />
@@ -74,44 +72,33 @@ export class ImageUploadForm extends Component<
 
   handleImageUpload(i: ImageUploadForm, event: any) {
     event.preventDefault();
-    let file = event.target.files[0];
-    const formData = new FormData();
-    formData.append("images[]", file);
+    const image = event.target.files[0] as File;
 
-    i.state.loading = true;
-    i.setState(i.state);
+    i.setState({ loading: true });
 
-    fetch(pictrsUri, {
-      method: "POST",
-      body: formData,
-    })
-      .then(res => res.json())
-      .then(res => {
-        console.log("pictrs upload:");
-        console.log(res);
-        if (res.msg == "ok") {
-          let hash = res.files[0].file;
-          let url = `${pictrsUri}/${hash}`;
-          i.state.loading = false;
-          i.setState(i.state);
-          i.props.onUpload(url);
+    HttpService.client.uploadImage({ image }).then(res => {
+      console.log("pictrs upload:");
+      console.log(res);
+      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 {
-          i.state.loading = false;
-          i.setState(i.state);
           toast(JSON.stringify(res), "danger");
         }
-      })
-      .catch(error => {
-        i.state.loading = false;
-        i.setState(i.state);
-        toast(error, "danger");
-      });
+      } else if (res.state === "failed") {
+        console.error(res.msg);
+        toast(res.msg, "danger");
+      }
+
+      i.setState({ loading: false });
+    });
   }
 
   handleRemoveImage(i: ImageUploadForm, event: any) {
     event.preventDefault();
-    i.state.loading = true;
-    i.setState(i.state);
+    i.setState({ loading: true });
     i.props.onRemove();
   }
 }