1 import { Component, linkEvent } from 'inferno';
2 import { UserService } from '../services';
3 import { toast, randomStr } from '../utils';
5 interface ImageUploadFormProps {
8 onUpload(url: string): any;
13 interface ImageUploadFormState {
17 export class ImageUploadForm extends Component<
21 private id = `image-upload-form-${randomStr()}`;
22 private emptyState: ImageUploadFormState = {
26 constructor(props: any, context: any) {
27 super(props, context);
28 this.state = this.emptyState;
33 <form class="d-inline">
36 class="pointer ml-4 text-muted small font-weight-bold"
38 {!this.props.imageSrc ? (
39 <span class="btn btn-secondary">{this.props.uploadTitle}</span>
41 <span class="d-inline-block position-relative">
43 src={this.props.imageSrc}
44 height={this.props.rounded ? 60 : ''}
45 width={this.props.rounded ? 60 : ''}
46 className={`img-fluid ${
47 this.props.rounded ? 'rounded-circle' : ''
50 <a onClick={linkEvent(this, this.handleRemoveImage)}>
51 <svg class="icon mini-overlay">
52 <use xlinkHref="#icon-x"></use>
61 accept="image/*,video/*"
64 disabled={!UserService.Instance.user}
65 onChange={linkEvent(this, this.handleImageUpload)}
71 handleImageUpload(i: ImageUploadForm, event: any) {
72 event.preventDefault();
73 let file = event.target.files[0];
74 const imageUploadUrl = `/pictrs/image`;
75 const formData = new FormData();
76 formData.append('images[]', file);
78 i.state.loading = true;
81 fetch(imageUploadUrl, {
85 .then(res => res.json())
87 console.log('pictrs upload:');
89 if (res.msg == 'ok') {
90 let hash = res.files[0].file;
91 let url = `${window.location.origin}/pictrs/image/${hash}`;
92 i.state.loading = false;
94 i.props.onUpload(url);
96 i.state.loading = false;
98 toast(JSON.stringify(res), 'danger');
102 i.state.loading = false;
104 toast(error, 'danger');
108 handleRemoveImage(i: ImageUploadForm, event: any) {
109 event.preventDefault();
110 i.state.loading = true;