1 import { Option } from "@sniptt/monads";
2 import { Component, linkEvent } from "inferno";
3 import { pictrsUri } from "../../env";
4 import { i18n } from "../../i18next";
5 import { UserService } from "../../services";
6 import { randomStr, toast } from "../../utils";
7 import { Icon } from "./icon";
9 interface ImageUploadFormProps {
11 imageSrc: Option<string>;
12 onUpload(url: string): any;
17 interface ImageUploadFormState {
21 export class ImageUploadForm extends Component<
25 private id = `image-upload-form-${randomStr()}`;
26 private emptyState: ImageUploadFormState = {
30 constructor(props: any, context: any) {
31 super(props, context);
32 this.state = this.emptyState;
37 <form class="d-inline">
40 class="pointer text-muted small font-weight-bold"
42 {this.props.imageSrc.match({
44 <span class="d-inline-block position-relative">
47 height={this.props.rounded ? 60 : ""}
48 width={this.props.rounded ? 60 : ""}
49 className={`img-fluid ${
50 this.props.rounded ? "rounded-circle" : ""
54 onClick={linkEvent(this, this.handleRemoveImage)}
55 aria-label={i18n.t("remove")}
57 <Icon icon="x" classes="mini-overlay" />
62 <span class="btn btn-secondary">{this.props.uploadTitle}</span>
69 accept="image/*,video/*"
72 disabled={UserService.Instance.myUserInfo.isNone()}
73 onChange={linkEvent(this, this.handleImageUpload)}
79 handleImageUpload(i: ImageUploadForm, event: any) {
80 event.preventDefault();
81 let file = event.target.files[0];
82 const formData = new FormData();
83 formData.append("images[]", file);
85 i.state.loading = true;
92 .then(res => res.json())
94 console.log("pictrs upload:");
96 if (res.msg == "ok") {
97 let hash = res.files[0].file;
98 let url = `${pictrsUri}/${hash}`;
99 i.state.loading = false;
101 i.props.onUpload(url);
103 i.state.loading = false;
105 toast(JSON.stringify(res), "danger");
109 i.state.loading = false;
111 console.error(error);
112 toast(error, "danger");
116 handleRemoveImage(i: ImageUploadForm, event: any) {
117 event.preventDefault();
118 i.state.loading = true;