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">
38 className="pointer text-muted small font-weight-bold"
40 {this.props.imageSrc ? (
41 <span className="d-inline-block position-relative">
42 {/* TODO: Create "Current Iamge" translation for alt text */}
45 src={this.props.imageSrc}
46 height={this.props.rounded ? 60 : ""}
47 width={this.props.rounded ? 60 : ""}
48 className={`img-fluid ${
49 this.props.rounded ? "rounded-circle" : ""
53 className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent"
55 onClick={linkEvent(this, this.handleRemoveImage)}
56 aria-label={I18NextService.i18n.t("remove")}
58 <Icon icon="x" classes="mini-overlay" />
62 <span className="btn btn-secondary">{this.props.uploadTitle}</span>
68 accept="image/*,video/*"
71 disabled={!UserService.Instance.myUserInfo}
72 onChange={linkEvent(this, this.handleImageUpload)}
78 handleImageUpload(i: ImageUploadForm, event: any) {
79 event.preventDefault();
80 const image = event.target.files[0] as File;
82 i.setState({ loading: true });
84 HttpService.client.uploadImage({ image }).then(res => {
85 console.log("pictrs upload:");
87 if (res.state === "success") {
88 if (res.data.msg === "ok") {
89 i.props.onUpload(res.data.url as string);
91 toast(JSON.stringify(res), "danger");
93 } else if (res.state === "failed") {
94 console.error(res.msg);
95 toast(res.msg, "danger");
98 i.setState({ loading: false });
102 handleRemoveImage(i: ImageUploadForm, event: any) {
103 event.preventDefault();
104 i.setState({ loading: true });