src/shared/components/common/image-upload-form.tsx

   1 import { Component, linkEvent } from "inferno";
   2 import { i18n } from "../../i18next";
   3 import { HttpService, UserService } from "../../services";
   4 import { randomStr, toast } from "../../utils";
   5 import { Icon } from "./icon";
   6
   7 interface ImageUploadFormProps {
   8   uploadTitle: string;
   9   imageSrc?: string;
  10   onUpload(url: string): any;
  11   onRemove(): any;
  12   rounded?: boolean;
  13 }
  14
  15 interface ImageUploadFormState {
  16   loading: boolean;
  17 }
  18
  19 export class ImageUploadForm extends Component<
  20   ImageUploadFormProps,
  21   ImageUploadFormState
  22 > {
  23   private id = `image-upload-form-${randomStr()}`;
  24   private emptyState: ImageUploadFormState = {
  25     loading: false,
  26   };
  27
  28   constructor(props: any, context: any) {
  29     super(props, context);
  30     this.state = this.emptyState;
  31   }
  32
  33   render() {
  34     return (
  35       <form className="d-inline">
  36         <label
  37           htmlFor={this.id}
  38           className="pointer text-muted small font-weight-bold"
  39         >
  40           {this.props.imageSrc ? (
  41             <span className="d-inline-block position-relative">
  42               <img
  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" : ""
  48                 }`}
  49               />
  50               <a
  51                 onClick={linkEvent(this, this.handleRemoveImage)}
  52                 aria-label={i18n.t("remove")}
  53               >
  54                 <Icon icon="x" classes="mini-overlay" />
  55               </a>
  56             </span>
  57           ) : (
  58             <span className="btn btn-secondary">{this.props.uploadTitle}</span>
  59           )}
  60         </label>
  61         <input
  62           id={this.id}
  63           type="file"
  64           accept="image/*,video/*"
  65           name={this.id}
  66           className="d-none"
  67           disabled={!UserService.Instance.myUserInfo}
  68           onChange={linkEvent(this, this.handleImageUpload)}
  69         />
  70       </form>
  71     );
  72   }
  73
  74   handleImageUpload(i: ImageUploadForm, event: any) {
  75     event.preventDefault();
  76     const image = event.target.files[0] as File;
  77
  78     i.setState({ loading: true });
  79
  80     HttpService.client.uploadImage({ image }).then(res => {
  81       console.log("pictrs upload:");
  82       console.log(res);
  83       if (res.state === "success") {
  84         if (res.data.msg === "ok") {
  85           i.props.onUpload(res.data.url as string);
  86         } else {
  87           toast(JSON.stringify(res), "danger");
  88         }
  89       } else if (res.state === "failed") {
  90         console.error(res.msg);
  91         toast(res.msg, "danger");
  92       }
  93
  94       i.setState({ loading: false });
  95     });
  96   }
  97
  98   handleRemoveImage(i: ImageUploadForm, event: any) {
  99     event.preventDefault();
 100     i.setState({ loading: true });
 101     i.props.onRemove();
 102   }
 103 }