finished adding image upload feature

public/index.html

@@ -35,5 +35,6 @@
 
  To begin the development, run `npm start` or `yarn start`.
  To create a production bundle, use `npm run build` or `yarn build`.
- --></body>
+ -->
+ </body>
 </html>

src/index.tsx

@@ -65,6 +65,7 @@ const App = () => {
 
  useEffect(() => {
  loginRef.current();
+
  }, []);
 
  const loginErrorBanner = error ? (

src/sections/Host/index.tsx

@@ -1,18 +1,71 @@
-import React from 'react';
-import { Layout, Typography, Form, Input, InputNumber, Radio, Upload } from 'antd'
+import React, { useState } from 'react';
+import { Layout, Typography, Form, Input, InputNumber, Radio, Upload, Button } from 'antd'
+import { UploadChangeParam } from 'antd/lib/upload'
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
 import { Link } from 'react-router-dom';
 import { BankOutlined, HomeOutlined } from '@ant-design/icons'
 import useViewerState from '../../lib/context/useViewerState';
 import { ListingType } from '../../lib/graphql/globalTypes';
-import { iconColor } from '../../lib/utils';
+import { iconColor, displayErrorMessage } from '../../lib/utils';
 
 const { Content } = Layout;
 const { Text, Title } = Typography;
 const { Item } = Form;
 
-export const Host = () => {
 
+declare global {
+ interface Window { placeSearch: any; }
+}
+
+const beforeImageUpload = (file: File) => {
+ const fileIsValidImage = file.type === "image/jpeg" || file.type === "image/png";
+ const fileIsValidSize = file.size / 1024 / 1024 < 1;
+
+ if (!fileIsValidImage) {
+ displayErrorMessage("You're only able to upload valid JPG or PNG files!");
+ return false;
+ }
+
+ if (!fileIsValidSize) {
+ displayErrorMessage(
+ "You're only able to upload valid image files of under 1MB in size!"
+ );
+ return false;
+ }
+
+ return fileIsValidImage && fileIsValidSize;
+};
+
+const getBase64Value = (image: File | Blob, callback: (imageBase64Value: string) => void) => {
+ const reader = new FileReader();
+ reader.readAsDataURL(image);
+
+ reader.onload = () => {
+ callback(reader.result as string)
+ }
+}
+
+export const Host = () => {
  const { viewer } = useViewerState();
+ const [imageLoading, setImageLoading] = useState(false);
+ const [imageBase64Value, setImageBase64Value] = useState<string | null>(null);
+
+ const handleImageUpload = (info: UploadChangeParam) => {
+ const { file } = info;
+
+ if (file.status === "uploading") {
+ setImageLoading(true);
+ return
+ }
+
+ if (file.status === "done" && file.originFileObj) {
+ getBase64Value(file.originFileObj, imageBase64Value => {
+ setImageBase64Value(imageBase64Value);
+ setImageLoading(false);
+ })
+ }
+ }
+
 
  if (!viewer.id || !viewer.hasWallet) {
  return (
@@ -87,13 +140,26 @@ export const Host = () => {
  extra="Images have to be under 1MB in size and of type JPG or PNG"
  >
  <div className="host__form-image-upload">
- <Upload name="image" listType="picture-card" showUploadList={true} />
+ <Upload name="image" listType="picture-card" showUploadList={true} action="https://www.mocky.io/v2/5cc8019d300000980a055e76" beforeUpload={beforeImageUpload} onChange={handleImageUpload}>
+ {imageBase64Value ? (
+ <img src={imageBase64Value} alt="Listing" />
+ ) : (
+ <div>
+ {imageLoading ? <LoadingOutlined /> : <PlusOutlined />}
+ <div className="ant-upload-text">Upload</div>
+ </div>
+ )}
+ </Upload>
  </div>
  </Item>
 
  <Item label="Price" extra="Per day price of your Listing">
  <InputNumber min={0} placeholder="120" />
  </Item>
+
+ <Item>
+ <Button type="primary">Submit</Button>
+ </Item>
  </Form>
  </Content>