1 import { randomStr } from "@utils/helpers";
2 import { Component, linkEvent } from "inferno";
3 import { HttpService, I18NextService, UserService } from "../../services";
4 import { toast } from "../../toast";
5 import { Icon } from "./icon";
7 interface ImageUploadFormProps {
10 onUpload(url: string): any;
15 interface ImageUploadFormState {
19 export class ImageUploadForm extends Component<
23 private id = `image-upload-form-${randomStr()}`;
24 private emptyState: ImageUploadFormState = {
28 constructor(props: any, context: any) {
29 super(props, context);
30 this.state = this.emptyState;
35 <form className="image-upload-form d-inline">
36 {this.props.imageSrc && (
37 <span className="d-inline-block position-relative">
38 {/* TODO: Create "Current Iamge" translation for alt text */}
41 src={this.props.imageSrc}
42 height={this.props.rounded ? 60 : ""}
43 width={this.props.rounded ? 60 : ""}
44 className={`img-fluid ${
45 this.props.rounded ? "rounded-circle" : ""
49 className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent text-white"
51 onClick={linkEvent(this, this.handleRemoveImage)}
52 aria-label={I18NextService.i18n.t("remove")}
54 <Icon icon="x" classes="mini-overlay" />
61 accept="image/*,video/*"
64 disabled={!UserService.Instance.myUserInfo}
65 onChange={linkEvent(this, this.handleImageUpload)}
71 handleImageUpload(i: ImageUploadForm, event: any) {
72 event.preventDefault();
73 const image = event.target.files[0] as File;
75 i.setState({ loading: true });
77 HttpService.client.uploadImage({ image }).then(res => {
78 console.log("pictrs upload:");
80 if (res.state === "success") {
81 if (res.data.msg === "ok") {
82 i.props.onUpload(res.data.url as string);
84 toast(JSON.stringify(res), "danger");
86 } else if (res.state === "failed") {
87 console.error(res.msg);
88 toast(res.msg, "danger");
91 i.setState({ loading: false });
95 handleRemoveImage(i: ImageUploadForm, event: any) {
96 event.preventDefault();
97 i.setState({ loading: true });