1 import { Component, linkEvent } from "inferno";
2 import { pictrsUri } from "../env";
3 import { UserService } from "../services";
4 import { toast, randomStr } from "../utils";
5 import { i18n } from "../i18next";
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 class="d-inline">
39 class="pointer ml-4 text-muted small font-weight-bold"
41 {!this.props.imageSrc ? (
42 <span class="btn btn-secondary">{this.props.uploadTitle}</span>
44 <span class="d-inline-block position-relative">
46 src={this.props.imageSrc}
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" />
65 accept="image/*,video/*"
68 disabled={!UserService.Instance.localUserView}
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.state.loading = true;
88 .then(res => res.json())
90 console.log("pictrs upload:");
92 if (res.msg == "ok") {
93 let hash = res.files[0].file;
94 let url = `${pictrsUri}/${hash}`;
95 i.state.loading = false;
97 i.props.onUpload(url);
99 i.state.loading = false;
101 toast(JSON.stringify(res), "danger");
105 i.state.loading = false;
107 toast(error, "danger");
111 handleRemoveImage(i: ImageUploadForm, event: any) {
112 event.preventDefault();
113 i.state.loading = true;