1 import { Component, linkEvent } from "inferno";
2 import { pictrsUri } from "../../env";
3 import { i18n } from "../../i18next";
4 import { UserService } from "../../services";
5 import { randomStr, toast } from "../../utils";
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="d-inline">
39 className="pointer text-muted small font-weight-bold"
41 {this.props.imageSrc ? (
42 <span className="d-inline-block position-relative">
44 src={this.props.imageSrc}
45 height={this.props.rounded ? 60 : ""}
46 width={this.props.rounded ? 60 : ""}
47 className={`img-fluid ${
48 this.props.rounded ? "rounded-circle" : ""
52 onClick={linkEvent(this, this.handleRemoveImage)}
53 aria-label={i18n.t("remove")}
55 <Icon icon="x" classes="mini-overlay" />
59 <span className="btn btn-secondary">{this.props.uploadTitle}</span>
65 accept="image/*,video/*"
68 disabled={!UserService.Instance.myUserInfo}
69 onChange={linkEvent(this, this.handleImageUpload)}
75 handleImageUpload(i: ImageUploadForm, event: any) {
76 event.preventDefault();
77 let file = event.target.files[0];
78 const formData = new FormData();
79 formData.append("images[]", file);
81 i.setState({ loading: true });
87 .then(res => res.json())
89 console.log("pictrs upload:");
91 if (res.msg == "ok") {
92 let hash = res.files[0].file;
93 let url = `${pictrsUri}/${hash}`;
94 i.setState({ loading: false });
95 i.props.onUpload(url);
97 i.setState({ loading: false });
98 toast(JSON.stringify(res), "danger");
102 i.setState({ loading: false });
103 console.error(error);
104 toast(error, "danger");
108 handleRemoveImage(i: ImageUploadForm, event: any) {
109 event.preventDefault();
110 i.setState({ loading: true });