1 import { randomStr } from "@utils/helpers";
2 import classNames from "classnames";
3 import { Component, linkEvent } from "inferno";
4 import { HttpService, I18NextService, UserService } from "../../services";
5 import { toast } from "../../toast";
6 import { Icon } from "./icon";
8 interface ImageUploadFormProps {
11 onUpload(url: string): any;
16 interface ImageUploadFormState {
20 export class ImageUploadForm extends Component<
24 private id = `image-upload-form-${randomStr()}`;
25 private emptyState: ImageUploadFormState = {
29 constructor(props: any, context: any) {
30 super(props, context);
31 this.state = this.emptyState;
36 <form className="image-upload-form d-inline">
37 {this.props.imageSrc && (
38 <span className="d-inline-block position-relative mb-2">
39 {/* TODO: Create "Current Iamge" translation for alt text */}
42 src={this.props.imageSrc}
43 height={this.props.rounded ? 60 : ""}
44 width={this.props.rounded ? 60 : ""}
45 className={classNames("img-fluid", {
46 "rounded-circle ratio ratio-1x1 object-fit-cover":
51 className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent text-white"
53 onClick={linkEvent(this, this.handleRemoveImage)}
54 aria-label={I18NextService.i18n.t("remove")}
56 <Icon icon="x" classes="mini-overlay" />
63 accept="image/*,video/*"
64 className="small form-control"
66 disabled={!UserService.Instance.myUserInfo}
67 onChange={linkEvent(this, this.handleImageUpload)}
73 handleImageUpload(i: ImageUploadForm, event: any) {
74 event.preventDefault();
75 const image = event.target.files[0] as File;
77 i.setState({ loading: true });
79 HttpService.client.uploadImage({ image }).then(res => {
80 console.log("pictrs upload:");
82 if (res.state === "success") {
83 if (res.data.msg === "ok") {
84 i.props.onUpload(res.data.url as string);
85 } else if (res.data.msg === "too_large") {
86 toast(I18NextService.i18n.t("upload_too_large"), "danger");
88 toast(JSON.stringify(res), "danger");
90 } else if (res.state === "failed") {
91 console.error(res.msg);
92 toast(res.msg, "danger");
95 i.setState({ loading: false });
99 handleRemoveImage(i: ImageUploadForm, event: any) {
100 event.preventDefault();
101 i.setState({ loading: true });