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

   1 import { randomStr } from "@utils/helpers";
   2 import { Component, linkEvent } from "inferno";
   3 import { HttpService, I18NextService, UserService } from "../../services";
   4 import { toast } from "../../toast";
   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="image-upload-form 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               {/* TODO: Create "Current Iamge" translation for alt text */}
  43               <img
  44                 alt=""
  45                 src={this.props.imageSrc}
  46                 height={this.props.rounded ? 60 : ""}
  47                 width={this.props.rounded ? 60 : ""}
  48                 className={`img-fluid ${
  49                   this.props.rounded ? "rounded-circle" : ""
  50                 }`}
  51               />
  52               <button
  53                 className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent text-white"
  54                 type="button"
  55                 onClick={linkEvent(this, this.handleRemoveImage)}
  56                 aria-label={I18NextService.i18n.t("remove")}
  57               >
  58                 <Icon icon="x" classes="mini-overlay" />
  59               </button>
  60             </span>
  61           ) : (
  62             <span className="btn btn-secondary">{this.props.uploadTitle}</span>
  63           )}
  64         </label>
  65         <input
  66           id={this.id}
  67           type="file"
  68           accept="image/*,video/*"
  69           name={this.id}
  70           className="d-none"
  71           disabled={!UserService.Instance.myUserInfo}
  72           onChange={linkEvent(this, this.handleImageUpload)}
  73         />
  74       </form>
  75     );
  76   }
  77
  78   handleImageUpload(i: ImageUploadForm, event: any) {
  79     event.preventDefault();
  80     const image = event.target.files[0] as File;
  81
  82     i.setState({ loading: true });
  83
  84     HttpService.client.uploadImage({ image }).then(res => {
  85       console.log("pictrs upload:");
  86       console.log(res);
  87       if (res.state === "success") {
  88         if (res.data.msg === "ok") {
  89           i.props.onUpload(res.data.url as string);
  90         } else {
  91           toast(JSON.stringify(res), "danger");
  92         }
  93       } else if (res.state === "failed") {
  94         console.error(res.msg);
  95         toast(res.msg, "danger");
  96       }
  97
  98       i.setState({ loading: false });
  99     });
 100   }
 101
 102   handleRemoveImage(i: ImageUploadForm, event: any) {
 103     event.preventDefault();
 104     i.setState({ loading: true });
 105     i.props.onRemove();
 106   }
 107 }