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

   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";
   8
   9 interface ImageUploadFormProps {
  10   uploadTitle: string;
  11   imageSrc: Option<string>;
  12   onUpload(url: string): any;
  13   onRemove(): any;
  14   rounded?: boolean;
  15 }
  16
  17 interface ImageUploadFormState {
  18   loading: boolean;
  19 }
  20
  21 export class ImageUploadForm extends Component<
  22   ImageUploadFormProps,
  23   ImageUploadFormState
  24 > {
  25   private id = `image-upload-form-${randomStr()}`;
  26   private emptyState: ImageUploadFormState = {
  27     loading: false,
  28   };
  29
  30   constructor(props: any, context: any) {
  31     super(props, context);
  32     this.state = this.emptyState;
  33   }
  34
  35   render() {
  36     return (
  37       <form className="d-inline">
  38         <label
  39           htmlFor={this.id}
  40           className="pointer text-muted small font-weight-bold"
  41         >
  42           {this.props.imageSrc.match({
  43             some: imageSrc => (
  44               <span className="d-inline-block position-relative">
  45                 <img
  46                   src={imageSrc}
  47                   height={this.props.rounded ? 60 : ""}
  48                   width={this.props.rounded ? 60 : ""}
  49                   className={`img-fluid ${
  50                     this.props.rounded ? "rounded-circle" : ""
  51                   }`}
  52                 />
  53                 <a
  54                   onClick={linkEvent(this, this.handleRemoveImage)}
  55                   aria-label={i18n.t("remove")}
  56                 >
  57                   <Icon icon="x" classes="mini-overlay" />
  58                 </a>
  59               </span>
  60             ),
  61             none: (
  62               <span className="btn btn-secondary">
  63                 {this.props.uploadTitle}
  64               </span>
  65             ),
  66           })}
  67         </label>
  68         <input
  69           id={this.id}
  70           type="file"
  71           accept="image/*,video/*"
  72           name={this.id}
  73           className="d-none"
  74           disabled={UserService.Instance.myUserInfo.isNone()}
  75           onChange={linkEvent(this, this.handleImageUpload)}
  76         />
  77       </form>
  78     );
  79   }
  80
  81   handleImageUpload(i: ImageUploadForm, event: any) {
  82     event.preventDefault();
  83     let file = event.target.files[0];
  84     const formData = new FormData();
  85     formData.append("images[]", file);
  86
  87     i.setState({ loading: true });
  88
  89     fetch(pictrsUri, {
  90       method: "POST",
  91       body: formData,
  92     })
  93       .then(res => res.json())
  94       .then(res => {
  95         console.log("pictrs upload:");
  96         console.log(res);
  97         if (res.msg == "ok") {
  98           let hash = res.files[0].file;
  99           let url = `${pictrsUri}/${hash}`;
 100           i.setState({ loading: false });
 101           i.props.onUpload(url);
 102         } else {
 103           i.setState({ loading: false });
 104           toast(JSON.stringify(res), "danger");
 105         }
 106       })
 107       .catch(error => {
 108         i.setState({ loading: false });
 109         console.error(error);
 110         toast(error, "danger");
 111       });
 112   }
 113
 114   handleRemoveImage(i: ImageUploadForm, event: any) {
 115     event.preventDefault();
 116     i.setState({ loading: true });
 117     i.props.onRemove();
 118   }
 119 }