@ant-design/icons#UploadOutlined JavaScript Examples

render() {
    return (
      <Upload onChange={this.handleChange} fileList={this.state.fileList} beforeUpload={()=>false}>
        <Button>
          <UploadOutlined /> 点击上传
        </Button>
      </Upload>
    );
  }

AvatarView = ({ avatar }) => (
  <Fragment>
    <div className={styles.avatar_title}>头像</div>
    <div className={styles.avatar}>
      <img src={avatar} alt="avatar" />
    </div>
    <Upload showUploadList={false}>
      <div className={styles.button_view}>
        <Button>
          <UploadOutlined />
          更换头像
        </Button>
      </div>
    </Upload>
  </Fragment>
)

render() {
    const { value } = this.props;
    const props = {
      name: 'file',
      fileList: value,
      action: this.state.OSSData.host,
      onChange: this.onChange,
      onRemove: this.onRemove,
      data: this.getExtraData,
      beforeUpload: this.beforeUpload,
    };
    return (
      <Upload {...props}>
        <Button icon={<UploadOutlined />}>Click to Upload</Button>
      </Upload>
    );
  }

Uploader = () => {
  const props = {
    beforeUpload: file => {
      if (file.type !== 'image/png') {
        message.error(`${file.name} is not a png file`);
      }
      return file.type === 'image/png' ? true : Upload.LIST_IGNORE;
    },
    onChange: info => {
      console.log(info.fileList);
    },
  };
  return (
    <Upload {...props}>
      <Button icon={<UploadOutlined />}>Upload png only</Button>
    </Upload>
  );
}

render() {
    const { uploading, fileList } = this.state;
    const props = {
      onRemove: file => {
        this.setState(state => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: file => {
        this.setState(state => ({
          fileList: [...state.fileList, file],
        }));
        return false;
      },
      fileList,
    };

    return (
      <>
        <Upload {...props}>
          <Button icon={<UploadOutlined />}>Select File</Button>
        </Upload>
        <Button
          type="primary"
          onClick={this.handleUpload}
          disabled={fileList.length === 0}
          loading={uploading}
          style={{ marginTop: 16 }}
        >
          {uploading ? 'Uploading' : 'Start Upload'}
        </Button>
      </>
    );
  }

storiesOf('antd/upload', module).add('picture-style', () => 
  <>
    <Upload
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      listType="picture"
      defaultFileList={[...fileList]}
    >
      <Button icon={<UploadOutlined />}>Upload</Button>
    </Upload>
    <br />
    <br />
    <Upload
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      listType="picture"
      defaultFileList={[...fileList]}
      className="upload-list-inline"
    >
      <Button icon={<UploadOutlined />}>Upload</Button>
    </Upload>
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>If uploaded file is a picture, the thumbnail can be shown. <code>IE8/9</code> do not support local thumbnail show. Please use <code>thumbUrl</code> instead.</p></>) } });

storiesOf('antd/upload', module).add('max-count', () => 
  <Space direction="vertical" style={{ width: '100%' }} size="large">
    <Upload
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      listType="picture"
      maxCount={1}
    >
      <Button icon={<UploadOutlined />}>Upload (Max: 1)</Button>
    </Upload>
    <Upload
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      listType="picture"
      maxCount={3}
      multiple
    >
      <Button icon={<UploadOutlined />}>Upload (Max: 3)</Button>
    </Upload>
  </Space>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Limit files with <code>maxCount</code>. Will replace current one when <code>maxCount</code> is <code>1</code>.</p></>) } });

render() {
    const props = {
      action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
      onChange: this.handleChange,
      multiple: true,
    };
    return (
      <Upload {...props} fileList={this.state.fileList}>
        <Button icon={<UploadOutlined />}>Upload</Button>
      </Upload>
    );
  }

function SpaceDemo() {
  return (
    <Space>
      Space
      <Button type="primary">Button</Button>
      <Upload>
        <Button>
          <UploadOutlined /> Click to Upload
        </Button>
      </Upload>
      <Popconfirm title="Are you sure delete this task?" okText="Yes" cancelText="No">
        <Button>Confirm</Button>
      </Popconfirm>
    </Space>
  );
}

render() {
    return (
      <Layout>
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1" icon={<UserOutlined />}>
              nav 1
            </Menu.Item>
            <Menu.Item key="2" icon={<VideoCameraOutlined />}>
              nav 2
            </Menu.Item>
            <Menu.Item key="3" icon={<UploadOutlined />}>
              nav 3
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: this.toggle,
            })}
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
            }}
          >
            Content
          </Content>
        </Layout>
      </Layout>
    );
  }

render() {

        return (
            <div>
                <Row>
                    <Col span={4}>
                        <Input addonBefore="模型编号" />
                    </Col>
                    <Col span={4}>
                        <Upload>
                            <span style={{ marginLeft: 50 }}>特征参数：</span><Button icon={<UploadOutlined />}>上传</Button>
                        </Upload>
                    </Col>
                </Row>
                <Row style={{ marginTop: 30 }}>
                    <Col span={4}>
                        <Input addonBefore="模型名称" />
                    </Col>
                    <Col span={4}>
                        <Button type="primary" style={{ marginLeft: 50 }}><SearchOutlined />搜索</Button>
                    </Col>
                </Row>
                <Row style={{ marginTop: 30 }}>
                    <Col span={8}>
                        <div className="searchResultList">
                            搜索结果
                        </div>
                    </Col>
                </Row>
            </div >
        )
    }

render() {
    return (
      <div>
        <h5 className="mb-3">
          <strong>Basic</strong>
        </h5>
        <div className="mb-5">
          <Upload {...props}>
            <Button>
              <UploadOutlined /> Click to Upload
            </Button>
          </Upload>
        </div>
        <h5 className="mb-3">
          <strong>Drag & Drop</strong>
        </h5>
        <div className="mb-5">
          <Dragger {...props}>
            <p className="ant-upload-drag-icon">
              <InboxOutlined />
            </p>
            <p className="ant-upload-text">Click or drag file to this area to upload</p>
            <p className="ant-upload-hint">
              Support for a single or bulk upload. Strictly prohibit from uploading company data or
              other band files
            </p>
          </Dragger>
        </div>
      </div>
    )
  }

UploadChallengesForm = (props) => {
    const [form] = Form.useForm();
    const [fileList, updateFileList] = useState([])
    const [editLoading, updateEditLoading] = useState(false)

    return (
        <Form
            form={form}
            onFinish={async (values) => {
                updateEditLoading(true)
                let fileData = await fileList[0].originFileObj.text()
                try {
                    JSON.parse(fileData)
                }
                catch (e) {
                    console.error(e)
                    message.error("Invalid json.")
                    updateEditLoading(false)
                    return false
                }

                await fetch(window.ipAddress + "/v1/challenge/upload", {
                    method: 'post',
                    headers: { 'Content-Type': 'application/json', "Authorization": window.IRSCTFToken },
                    body: JSON.stringify({
                        "challenges": fileData
                    })
                }).then((results) => {
                    return results.json(); //return data in JSON (since its JSON data)
                }).then((data) => {
                    if (data.success === true) {
                        message.success({ content: "Uploaded challenges successfully" })
                        props.closeUploadChallenges()
                        props.handleRefresh()
                    }
                    else if (data.error === "failed-insert") {
                        message.warn("Some challenges already exist and were not inserted. Please delete the challenges to insert from the backup.", 3)
                        message.warn("The challenges are: [" + data.failedInsert.join(" ,") + "]", 5)
                    }
                    else {
                        message.error({ content: "Oops. Unknown error" })
                    }
                }).catch((error) => {
                    console.log(error)
                    message.error({ content: "Oops. There was an issue connecting with the server" });
                })

                updateEditLoading(false)
            }}
        >
            <Form.Item
                name="challenges"
            >

                <Dragger
                    fileList={fileList}
                    disabled={editLoading}
                    accept=".json"
                    maxCount={1}
                    onChange={(file) => {
                        updateFileList(file.fileList)
                    }}
                    beforeUpload={(file) => {
                        return false
                    }}>
                    <h4>Drag and drop a challenge backup file (.json) to upload challenge(s).</h4>
                </Dragger>
            </Form.Item>
            <span>Please note that hint purchases and solves are <b>not brought over</b> as this is equivalent to "creating a new challenge from a backup"</span>

            <Button icon={<UploadOutlined/>} type="primary" htmlType="submit" style={{ marginBottom: "1.5vh", marginTop: "3vh" }} loading={editLoading}>Upload Challenge(s)</Button>

        </Form>
    );
}

DragSortingUpload = () => {
  const [fileList, setFileList] = useState([
    {
      uid: '-1',
      name: 'image1.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },
    {
      uid: '-2',
      name: 'image2.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },
    {
      uid: '-3',
      name: 'image3.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },
    {
      uid: '-4',
      name: 'image4.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },
    {
      uid: '-5',
      name: 'image.png',
      status: 'error',
    },
  ]);

  const moveRow = useCallback(
    (dragIndex, hoverIndex) => {
      const dragRow = fileList[dragIndex];
      setFileList(
        update(fileList, {
          $splice: [
            [dragIndex, 1],
            [hoverIndex, 0, dragRow],
          ],
        }),
      );
    },
    [fileList],
  );

  const onChange = ({ fileList: newFileList }) => {
    setFileList(newFileList);
  };

  return (
    <DndProvider backend={HTML5Backend}>
      <Upload
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        fileList={fileList}
        onChange={onChange}
        itemRender={(originNode, file, currFileList) => (
          <DragableUploadListItem
            originNode={originNode}
            file={file}
            fileList={currFileList}
            moveRow={moveRow}
          />
        )}
      >
        <Button icon={<UploadOutlined />}>Click to Upload</Button>
      </Upload>
    </DndProvider>
  );
}

export default function Backup({
  serverConfig,
  resetServerConfig,
  saveServerConfig,
  updateVersion,
  updateStaus,
}) {
  const save = () => {
    var blob = new Blob([JSON.stringify(serverConfig)], {
      type: "text/plain;charset=utf-8",
    });
    saveAs(
      blob,
      `network-rc-config-backgup-${dayjs().format("YYYYMMDDTHHmmss")}.json`
    );
  };
  const load = (file) => {
    var reader = new FileReader();
    reader.onload = function (e) {
      if (reader.result) {
        saveServerConfig(JSON.parse(reader.result));
      }
    };
    reader.onerror = function (e) {
      console.error(e);
      message.error("读取备份错误");
    };

    reader.readAsText(file);
    return false;
  };
  return (
    <Form {...layout}>
      <Form.Item>
        <Space>
          <Button icon={<DownloadOutlined />} type="primary" onClick={save}>
            备份当前设置
          </Button>
          <Upload accept=".json" beforeUpload={load} showUploadList={false}>
            <Button icon={<UploadOutlined />}>恢复已保存的设置</Button>
          </Upload>

          <Button icon={<ReloadOutlined />} danger onClick={resetServerConfig}>
            恢复默认设置（所有设置）
          </Button>
        </Space>
      </Form.Item>

      <Form.Item >
        <Button
          onClick={(e) => {
            e.preventDefault();
            updateVersion();
          }}
          loading={updateStaus ? true : false}
        >
          {updateStaus || "更新版本"}
        </Button>
      </Form.Item>
    </Form>
  );
}

render() {
        const onFinish = values => {
            console.log('Received values of form: ', values);
        };
        return (
            <Card title="机构索引上传">
                <Form name="complex-form" onFinish={onFinish} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} style={{ width: 900 }}>
                    <Row>
                        <Col span={12}>
                            <Form.Item label="字段0">
                                <Input style={{ width: 240 }} />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="字段1">
                                <Input style={{ width: 240 }} />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <Form.Item label="字段2">
                                <Input style={{ width: 240 }} />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="字段3">
                                <Input style={{ width: 240 }} />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <Form.Item label="字段4">
                                <Input style={{ width: 240 }} />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="字段5">
                                <Input style={{ width: 240 }} />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <Form.Item label="字段6">
                                <Input style={{ width: 240 }} />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="数据地址">
                                <Input style={{ width: 240 }} />
                            </Form.Item>

                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <Form.Item label="证书">
                                <Upload>
                                    <Button icon={<UploadOutlined />} style={{ width: 240 }}>上传</Button>
                                </Upload>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <a style={{ fontSize: 18, marginLeft: 160 }}>+添加更多</a>
                        </Col>
                    </Row>
                    <Row>
                        <Form.Item>
                            <Col span={12}>
                                <Button type="primary" style={{ width: 150, marginLeft: 400 }}>提交</Button>
                            </Col>
                        </Form.Item>
                    </Row>
                </Form>
            </Card>
        )
    }

storiesOf('antd/upload', module).add('directory', () => 
  <Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" directory>
    <Button icon={<UploadOutlined />}>Upload Directory</Button>
  </Upload>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>You can select and upload a whole directory.</p></>) } });

storiesOf('antd/upload', module).add('upload-custom-action-icon', () => 
  <Upload {...props}>
    <Button icon={<UploadOutlined />}>Upload</Button>
  </Upload>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Use <code>showUploadList</code> for custom action icons of files.</p></>) } });

storiesOf('antd/upload', module).add('transform-file', () => 
  <>
    <Upload {...props}>
      <Button icon={<UploadOutlined />}>Upload</Button>
    </Upload>
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Use <code>beforeUpload</code> for transform file before request such as add a watermark.</p></>) } });

storiesOf('antd/upload', module).add('preview-file', () => 
  <Upload {...props}>
    <Button icon={<UploadOutlined />}>Upload</Button>
  </Upload>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Customize local preview. Can handle with non-image format files such as video.</p></>) } });

storiesOf('antd/layout', module).add('responsive', () => 
  <Layout>
    <Sider
      breakpoint="lg"
      collapsedWidth="0"
      onBreakpoint={broken => {
        console.log(broken);
      }}
      onCollapse={(collapsed, type) => {
        console.log(collapsed, type);
      }}
    >
      <div className="logo" />
      <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
        <Menu.Item key="1" icon={<UserOutlined />}>
          nav 1
        </Menu.Item>
        <Menu.Item key="2" icon={<VideoCameraOutlined />}>
          nav 2
        </Menu.Item>
        <Menu.Item key="3" icon={<UploadOutlined />}>
          nav 3
        </Menu.Item>
        <Menu.Item key="4" icon={<UserOutlined />}>
          nav 4
        </Menu.Item>
      </Menu>
    </Sider>
    <Layout>
      <Header className="site-layout-sub-header-background" style={{ padding: 0 }} />
      <Content style={{ margin: '24px 16px 0' }}>
        <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
          content
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
    </Layout>
  </Layout>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Layout.Sider supports responsive layout.</p>
<blockquote>
  <p>Note: You can get a responsive layout by setting <code>breakpoint</code>, the Sider will collapse to the width of <code>collapsedWidth</code> when window width is below the <code>breakpoint</code>. And a special trigger will appear if the <code>collapsedWidth</code> is set to 0.</p>
</blockquote></>) } });

storiesOf('antd/upload', module).add('defaultFileList', () => 
  <Upload {...props}>
    <Button icon={<UploadOutlined />}>Upload</Button>
  </Upload>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Use <code>defaultFileList</code> for uploaded files when page init.</p></>) } });

storiesOf('antd/upload', module).add('basic', () => 
  <Upload {...props}>
    <Button icon={<UploadOutlined />}>Click to Upload</Button>
  </Upload>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Classic mode. File selection dialog pops up when upload button is clicked.</p></>) } });

storiesOf('antd/upload', module).add('customize-progress-bar', () => 
  <Upload {...props}>
    <Button icon={<UploadOutlined />}>Click to Upload</Button>
  </Upload>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Use <code>progress</code> for customize progress bar.</p></>) } });

AddCertificate = props => {
	const [isLoading, setIsLoading] = useState(false);
	const [isSubmitBtnLoading, setIsSubmitBtnLoading] = useState(false);
	const [eventID, setEventId] = useState(null);
	const [isShown, setIsShown] = useState(false);
	const [events, setEvents] = useState([]);
	const [formData, setFormData] = useState(null);
	const [form] = Form.useForm();

	useEffect(() => {
		(async () => {
			setIsLoading(true);
			try {
				const { data } = await getEventsService();
				setEvents(data);
				console.log(data);
				setIsLoading(false);
			} catch (err) {
				_notification("warning", "Error", err.message);
			}
		})();
	}, []);

	const uploadprops = {
		name: "file",
		action: "https://www.api.dsckiet.com/dev",
		headers: {
			authorization: "authorization-text"
		},
		// beforeUpload(file) {
		// 	const isJpgOrPng =
		// 		file.type === "image/jpeg" || file.type === "image/png";
		// 	if (!isJpgOrPng) {
		// 		message.error("You can only upload JPG/PNG file!");
		// 	}
		// 	console.log(file);
		// 	const isLt2M = file.size / 1024 / 1024 < 5;
		// 	if (!isLt2M) {
		// 		message.error("Image must smaller than 2MB!");
		// 	}
		// 	return isJpgOrPng && isLt2M;
		// },
		onChange(info) {
			if (info.file.status === "uploading") {
			}
			if (info.file.status === "done") {
				console.log(info.file, info.fileList);

				message.success(`${info.file.name} file uploaded successfully`);
			} else if (info.file.status === "error") {
				console.log(info.file, info.fileList);

				message.error(`${info.file.name} file upload failed.`);
			}
		}
	};

	const fontprops = {
		name: "file",
		action: "https://www.api.dsckiet.com/dev",
		headers: {
			authorization: "authorization-text"
		},
		onChange(info) {
			if (info.file.status !== "uploading") {
			}
			if (info.file.status === "done") {
				message.success(`${info.file.name} file uploaded successfully`);
			} else if (info.file.status === "error") {
				console.log(info.file, info.fileList);

				message.error(`${info.file.name} file upload failed.`);
			}
		}
	};

	const handlePreview = async values => {
		setIsLoading(true);

		try {
			const formDataa = new FormData();
			formDataa.append("name", values.name);
			formDataa.append("x", values.x);
			formDataa.append("y", values.y);
			formDataa.append("size", values.size);
			formDataa.append("red", values.red);
			formDataa.append("green", values.green);
			formDataa.append("blue", values.blue);
			formDataa.append("pdffile", values.pdffile.file.originFileObj);
			formDataa.append("fontfile", values.fontfile.file.originFileObj);

			await previewCertificateService(formDataa);
			setFormData(formDataa);
			setIsShown(true);
			setIsLoading(false);
		} catch (error) {
			_notification("error", "Error", error.message);
			setIsLoading(false);
		}
	};

	const handleSubmit = async () => {
		setIsSubmitBtnLoading(true);
		try {
			const res = await addCertificateService(formData, eventID);
			if (res.message === "success") {
				_notification("success", "Success", "Certificate Saved");
				setTimeout(() => {
					window.location.reload();
				}, 200);
			} else {
				_notification("error", "Error", res.message);
			}
			setIsSubmitBtnLoading(false);
		} catch (error) {
			_notification("error", "Error", error.message);
			setIsSubmitBtnLoading(false);
		}
	};

	const handleChange = value => {
		console.log(value);
		setEventId(value);
	};

	return (
		<>
			<PageTitle title="Certificate" bgColor="#F4B400" />

			<Wrapper>
				<Col span={12}>
					<CustomizeCard bordered={false}>
						<Heading>
							Preview Certificate
							<Divider style={{ marginTop: "10px" }} />
						</Heading>
						<Form
							onFinish={handlePreview}
							layout="vertical"
							form={form}
						>
							<Row>
								<Col
									span={12}
									style={{ height: "100% !important" }}
								>
									<Form.Item
										label="Upload Pdf"
										name="pdffile"
										rules={[
											{
												required: true,
												message:
													"Please select pdf file"
											}
										]}
									>
										<Upload {...uploadprops}>
											<p>Click to upload</p>
										</Upload>
									</Form.Item>
								</Col>
								<Col span={12}>
									<Form.Item
										label="Name"
										name="name"
										rules={[
											{
												required: true,
												message: "Please input name!"
											}
										]}
									>
										<Input type="text" placeholder="Name" />
									</Form.Item>
									<Row gutter={24}>
										<Col span={12}>
											<Form.Item
												label="X-axis"
												name="x"
												rules={[
													{
														required: true,
														message:
															"Please input x-axis!"
													}
												]}
											>
												<Input
													type="number"
													placeholder="X"
												/>
											</Form.Item>
										</Col>
										<Col span={12}>
											<Form.Item
												label="Y-axis"
												name="y"
												rules={[
													{
														required: true,
														message:
															"Please input y-axis!"
													}
												]}
											>
												<Input
													type="number"
													placeholder="Y"
												/>
											</Form.Item>
										</Col>
									</Row>
									<Form.Item
										label="Font size"
										name="size"
										rules={[
											{
												required: true,
												message:
													"Please input font size!"
											}
										]}
									>
										<Input
											type="number"
											placeholder="Size"
										/>
									</Form.Item>
									<Row gutter={24}>
										<Col span={8}>
											<Form.Item
												label="Red"
												name="red"
												rules={[
													{
														required: true,
														message:
															"Please input red value of RGB"
													}
												]}
											>
												<Input
													type="number"
													placeholder="Red"
													min={0}
													max={255}
												/>
											</Form.Item>
										</Col>
										<Col span={8}>
											<Form.Item
												label="Green"
												name="green"
												rules={[
													{
														required: true,
														message:
															"Please input green value of RGB"
													}
												]}
											>
												<Input
													type="number"
													placeholder="Green"
													min={0}
													max={255}
												/>
											</Form.Item>
										</Col>
										<Col span={8}>
											<Form.Item
												label="Blue"
												name="blue"
												rules={[
													{
														required: true,
														message:
															"Please input blue value of RGB"
													}
												]}
											>
												<Input
													type="number"
													placeholder="Blue"
													min={0}
													max={255}
												/>
											</Form.Item>
										</Col>
									</Row>
									<Form.Item
										label="Upload Font"
										name="fontfile"
										rules={[
											{
												required: true,
												message:
													"Please select font file"
											}
										]}
									>
										<Upload
											// listType="ttf"
											{...fontprops}
										>
											<Button type="primary">
												<UploadOutlined />
												Upload
											</Button>
										</Upload>
									</Form.Item>
									<div
										style={{
											float: "right",
											width: "100%",
											marginBottom: "40px"
										}}
									>
										<CustomButton
											loading={isLoading}
											style={{
												width: "100%"
											}}
											// onClick={handlePreview}
											htmlType="submit"
										>
											Preview
										</CustomButton>
									</div>
								</Col>
							</Row>
							{isShown ? (
								<>
									<Row>
										<Col span={12}>
											<div
												style={{ marginBottom: "20px" }}
											>
												<TreeSelect
													style={{ minWidth: 180 }}
													dropdownStyle={{
														maxHeight: 400,
														overflow: "auto"
													}}
													placeholder="Please select events"
													onChange={handleChange}
												>
													<TreeNode
														value="Upcoming"
														title="Upcoming Events"
														selectable={false}
													>
														{events.length !== 0
															? events[
																	"upcomingEvents"
															  ].map(
																	({
																		_id,
																		title
																	}) => {
																		return (
																			<TreeNode
																				key={
																					_id
																				}
																				value={
																					_id
																				}
																				title={
																					title
																				}
																			/>
																		);
																	}
															  )
															: null}
													</TreeNode>
													<TreeNode
														value="Past"
														title="Past Events"
														selectable={false}
													>
														{events.length !== 0
															? events[
																	"previousEvents"
															  ].map(
																	({
																		_id,
																		title
																	}) => {
																		return (
																			<TreeNode
																				key={
																					_id
																				}
																				value={
																					_id
																				}
																				title={
																					title
																				}
																			/>
																		);
																	}
															  )
															: null}
													</TreeNode>
													<TreeNode
														value="Running"
														title="Running Events"
														selectable={false}
													>
														{events.length !== 0
															? events[
																	"runningEvents"
															  ].map(
																	({
																		_id,
																		title
																	}) => {
																		return (
																			<TreeNode
																				key={
																					_id
																				}
																				value={
																					_id
																				}
																				title={
																					title
																				}
																			/>
																		);
																	}
															  )
															: null}
													</TreeNode>
												</TreeSelect>
											</div>
										</Col>
									</Row>
									<Form.Item>
										<Button
											type="primary"
											onClick={handleSubmit}
											loading={isSubmitBtnLoading}
											className="login-form-button"
										>
											Add Certificate
										</Button>
									</Form.Item>
								</>
							) : null}
						</Form>
					</CustomizeCard>
				</Col>
			</Wrapper>
		</>
	);
}

render() {
        return (

            <Layout style={{ height: "100%", width: "100%", backgroundColor: "rgba(0, 0, 0, 0)" }}>

                <Modal title={<span><UploadOutlined/> Upload Challenges</span>} visible={this.state.uploadModalVisible} footer={null} onCancel={() => {this.setState({uploadModalVisible: false})}}>
                    <UploadChallengesForm handleRefresh={this.handleRefresh.bind(this)} closeUploadChallenges={() => {this.setState({uploadModalVisible: false})}}/>
                </Modal>
                <div style={{ display: (!this.state.challengeCreate && !this.state.editChallenge) ? "initial" : "none" }}>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                        <div style={{ display: "flex", alignItems: "center", height: "2ch" }}>
                            <Button type="primary" style={{ marginBottom: "2vh", marginRight: "1ch" }} icon={<FlagOutlined />} onClick={() => { this.setState({ challengeCreate: true }, this.props.history.push("/Admin/Challenges/Create")) }}>Create New Challenge</Button>
                            <Button type="primary" style={{ marginBottom: "2vh", marginRight: "1ch" }} icon={<UploadOutlined />} onClick={() => { this.setState({uploadModalVisible: true}) }}>Upload Challenges</Button>
                            {this.state.loading && (
                                <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
                                    <Ellipsis color="#177ddc" size={60} />
                                    <h1>Loading Challenges</h1>
                                </div>
                            )}
                        </div>
                        <Button loading={this.state.loading} type="primary" shape="circle" size="large" style={{ marginBottom: "2vh", maxWidth: "25ch" }} icon={<RedoOutlined />} onClick={async () => { await this.handleRefresh(); message.success("Challenge list refreshed.") }} />

                    </div>
                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                        <div style={{ display: "flex", alignItems: "center" }}>
                            <Button disabled={this.state.disableEditButtons} type="default" style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#6e6e6e" }} icon={<EyeOutlined style={{ color: "#49aa19" }} />} onClick={() => { this.editChallengeVisibility(true, this.state.selectedTableKeys, this.state.selectedRows) }}>Show</Button>
                            <Button disabled={this.state.disableEditButtons} type="default" style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#6e6e6e" }} icon={<EyeInvisibleOutlined style={{ color: "#d32029" }} />} onClick={() => { this.editChallengeVisibility(false, this.state.selectedTableKeys, this.state.selectedRows) }}>Hide</Button>
                            <Button disabled={this.state.disableEditButtons} style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#a61d24" }} icon={<DeleteOutlined />} onClick={() => {
                                confirm({
                                    confirmLoading: this.state.disableEditButtons,
                                    title: 'Are you sure you want to delete the challenge(s) (' + this.state.selectedTableKeys.join(", ") + ')? This action is irreversible.',
                                    icon: <ExclamationCircleOutlined />,
                                    onOk: (close) => { this.deleteChallenge(close.bind(this), this.state.selectedTableKeys, this.state.selectedRows) },
                                    onCancel: () => { },
                                });
                            }}>Delete Challenges</Button>
                        </div>
                        <div>
                            <Button disabled={this.state.disableEditButtons} type="primary" style={{ marginBottom: "2vh", marginRight: "1ch" }} icon={<DownloadOutlined />} onClick={() => { this.downloadChallenges(this.state.selectedRows) }}>Download</Button>
                        </div>
                    </div>
                    <Table rowSelection={{ selectedRowKeys: this.state.selectedTableKeys, onChange: this.handleTableSelect.bind(this) }} style={{ overflow: "auto" }} dataSource={this.state.dataSource} locale={{
                        emptyText: (
                            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
                                <FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
                                <h1 style={{ fontSize: "200%" }}>No Challenges Found/Created</h1>
                            </div>
                        )
                    }}>
                        <Column title="Name" dataIndex="name" key="name"
                            render={(text, row, index) => {
                                return <Link to={"/Challenges/" + row._id}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
                            }}
                            filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                                <div style={{ padding: 8 }}>
                                    <Input
                                        autoFocus
                                        placeholder="Search Challenge Name"
                                        value={selectedKeys[0]}
                                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                                        onPressEnter={() => confirm()}
                                        style={{ marginBottom: 8, display: 'block' }}
                                    />
                                    <Space>
                                        <Button
                                            type="primary"
                                            onClick={() => { confirm() }}
                                            icon={<SearchOutlined />}
                                        >
                                            Search
                                        </Button>
                                        <Button onClick={() => clearFilters()}>
                                            Reset
                                        </Button>
                                    </Space>
                                </div>
                            )}
                            onFilter={(value, record) => record.name.toLowerCase().trim().includes(value.toLowerCase())}
                            filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />}
                            sorter={(a, b) => {
                                if (a.name < b.name) return -1
                                else return 1
                            }}
                        />
                        <Column filters={this.state.allCat.map(value => { return { text: value.key, value: value.key } })} onFilter={(value, record) => value === record.category} title="Category" dataIndex="category" key="category" render={(text, row, index) => {
                            return <Link to={"/Challenges/" + row.category}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
                        }} />
                        <Column sorter={(a, b) => a.points - b.points} title="Points" dataIndex="points" key="points" />
                        <Column sorter={(a, b) => a.points - b.points} title="Initial Points" dataIndex="initial" key="initial" />
                        <Column sorter={(a, b) => a.points - b.points} title="Solves to Min." dataIndex="minSolves" key="minSolves" />
                        <Column sorter={(a, b) => a.points - b.points} title="Min. Points" dataIndex="minimum" key="minimum" />
                        <Column filters={[{ text: "Visible", value: "true" }, { text: "Hidden", value: "false" }]} onFilter={(value, record) => { return value === record.visibility.props.visibility }} title="Visbility" dataIndex="visibility" key="visibility" />
                        <Column title="Required Challenge" dataIndex="requires" key="requires"
                            render={(text, row, index) => {
                                return <Link to={"/Challenges/" + text}><a style={{ fontWeight: 700 }}>{this.state.IDNameMapping[text]}</a></Link>;
                            }}
                            filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                                <div style={{ padding: 8 }}>
                                    <Input
                                        autoFocus
                                        placeholder="Search Challenge Name"
                                        value={selectedKeys[0]}
                                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                                        onPressEnter={() => confirm()}
                                        style={{ marginBottom: 8, display: 'block' }}
                                    />
                                    <Space>
                                        <Button
                                            type="primary"
                                            onClick={() => { confirm() }}
                                            icon={<SearchOutlined />}
                                        >
                                            Search
                                        </Button>
                                        <Button onClick={() => clearFilters()}>
                                            Reset
                                        </Button>
                                    </Space>
                                </div>
                            )}
                            onFilter={(value, record) => { if (record.requires) return this.state.IDNameMapping[record.requires].toLowerCase().includes(value) }}
                            filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />}
                            sorter={(a, b) => {
                                if (!a.requires) return -1
                                if (!b.requires) return 1
                                if (this.state.IDNameMapping[a.requires] < this.state.IDNameMapping[b.requires]) return -1
                                else return 1
                            }}
                        />
                        <Column
                            title=""
                            key="edit"
                            render={(text, record) => (
                                <Button icon={<EditOutlined />} onClick={() => { this.setState({ editChallenge: true, id: record._id }); this.props.history.push("/Admin/Challenges/Edit") }}> Edit</Button>
                            )}
                        />
                    </Table>

                    <Divider />
                    <div style={{ display: "flex", alignItems: "center" }}>
                        <h1 style={{ fontSize: "150%" }}>Category Management </h1>{this.state.transferDisabled && (<Ellipsis color="#177ddc" size={50} />)}
                    </div>

                    <Card className="settings-card">
                        <h3>Category Meta Information Editor <EyeOutlined /></h3>
                        <p>Select a category to edit info such as Name, Cover Pictures etc.</p>

                        <Select style={{ width: "30ch" }} value={this.state.categorySelect} onChange={this.openCategoryEditor.bind(this)}>
                            {this.state.categoryOptions}
                        </Select>

                        {this.state.currentEditCategory && (
                            <div style={{ padding: "10px", marginTop: "20px", backgroundColor: "rgba(0, 0, 0, 0.3)", border: "5px solid transparent", borderRadius: "10px" }}>
                                <EditCategoryForm initialData={this.state.currentEditCategory} handleEditCategoryDone={this.handleEditCategoryDone.bind(this)} />
                            </div>
                        )}
                    </Card>
                    <Card className="settings-card">
                        <h3>Category Visibility <EyeOutlined /></h3>
                        <Transfer
                            dataSource={this.state.allCat}
                            titles={[<span style={{ color: "#49aa19" }}>Visible Categories <EyeOutlined /></span>, <span style={{ color: "#d32029" }} >Hidden Categories <EyeInvisibleOutlined /></span>]}
                            targetKeys={this.state.targetKeys}
                            selectedKeys={this.state.selectedKeys}
                            onChange={this.handleChange}
                            onSelectChange={this.handleSelectChange}
                            render={item => item.key}
                            pagination
                            disabled={this.state.transferDisabled}
                        />
                    </Card>

                    <Divider />

                    <div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>

                        <Card className="settings-card">
                            <h3>Disable Submissions:  <AntdSwitch disabled={this.state.disableLoading} onClick={(value) => this.disableSetting("submissionDisabled", value)} checked={this.state.submissionDisabled} /></h3>
                            <p>Prevents users from submitting any new submissions for all challenges. Hints can still be bought</p>
                        </Card>

                        <Divider type="vertical" style={{ height: "inherit" }} />

                        <Card className="settings-card">
                            <h3>Set Socket Limit:  <InputNumber
                                value={this.state.maxSockets}
                                disabled={this.state.disableLoading}
                                onChange={(value) => this.setState({ maxSockets: value })}
                                onPressEnter={(e) => { this.changeSetting("maxSockets", this.state.maxSockets) }} /></h3>
                            <p>Sets the maximum number of socket connections allowed <b>per account</b> to connect to the live scoreboard. <br /> <b>Press "Enter" to save</b></p>
                        </Card>

                        <Divider type="vertical" style={{ height: "inherit" }} />

                        <Card className="settings-card">
                        <h3>Disable First Blood for No Category:  <AntdSwitch disabled={this.state.disableLoading} onClick={(value) => this.disableSetting("disableNonCatFB", value)} checked={this.state.disableNonCatFB} /></h3>
                            <p>Prevents people with no categories from attaining first blood. Useful if you want to limit First Blood prizes to only eligible participants.</p>
                        </Card>


                    </div>


                </div>


                <Switch>
                    <Route exact path='/Admin/Challenges/Create' render={(props) => <AdminChallengeCreate {...props} challenges={this.state.dataSource} handleBack={this.handleBack.bind(this)} handleCreateBack={this.handleCreateBack.bind(this)} allCat={this.state.allCat} />} />
                    <Route exact path='/Admin/Challenges/Edit' render={(props) => <AdminChallengeEdit {...props} allCat={this.state.allCat} IDNameMapping={this.state.IDNameMapping} challenges={this.state.dataSource} id={this.state.id} handleEditBack={this.handleEditBack.bind(this)} handleEditChallBack={this.handleEditChallBack.bind(this)} />} />

                </Switch>

            </Layout>
        );
    }

sidebar = () => {
  return (
    <Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
      <Menu.Item key="1">
        <Link to={{ pathname: "/" }}>
          <HomeOutlined />
          <span>首页</span>
        </Link>
      </Menu.Item>
      <Menu.Item key="5">
        <Link to={{ pathname: "/user-management" }}>
          <UserOutlined />
          <span>用户管理</span>
        </Link>
      </Menu.Item>
      <SubMenu
        key="sub1"
        title={
          <span>
            <FileOutlined />
            <span>文件管理</span>
          </span>
        }
      >
        <Menu.Item key="sub1-1">
          <Link to={{ pathname: "/file/list" }}>
            <OrderedListOutlined />
            <span>文件列表</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub1-2">
          <Link to={{ pathname: "/file/add" }}>
            <UploadOutlined />
            <span>文件上传</span>
          </Link>
        </Menu.Item>
      </SubMenu>
      <SubMenu
        key="sub2"
        title={
          <span>
            <DashboardOutlined />
            <span>可视化图表</span>
          </span>
        }
      >
        <Menu.Item key="sub2-1">
          <Link to={{ pathname: "/charts/line-chart" }}>
            <LineChartOutlined />
            <span>折线图</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub2-2">
          <Link to={{ pathname: "/charts/bar-chart" }}>
            <BarChartOutlined />
            <span>柱状图</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub2-3">
          <Link to={{ pathname: "/charts/pie-chart" }}>
            <PieChartOutlined />
            <span>饼状图</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <SubMenu
        key="sub5"
        title={
          <span>
            <FileExcelOutlined />
            <span>Excel表格</span>
          </span>
        }
      >
        <Menu.Item key="sub5-1">
          <Link to={{ pathname: "/excel/export-csv" }}>
            <ExportOutlined />
            <span>Export csv</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <SubMenu
        key="sub4"
        title={
          <span>
            <EditOutlined />
            <span>文本编辑器</span>
          </span>
        }
      >
        <Menu.Item key="sub4-1">
          <Link to={{ pathname: "/rich-text-editor" }}>
            <Html5Outlined />
            <span>富文本编辑器</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub4-2">
          <Link to={{ pathname: "/md-editor" }}>
            <FileMarkdownOutlined />
            <span>Markdown编辑器</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <SubMenu
        key="sub3"
        title={
          <span>
            <BugOutlined />
            <span>错误页面</span>
          </span>
        }
      >
        <Menu.Item key="sub3-1">
          <Link to={{ pathname: "/not-found" }}>
            <InboxOutlined />
            <span>404</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub3-2">
          <Link to={{ pathname: "/not-allow" }}>
            <StopOutlined />
            <span>403</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <Menu.Item key="6">
        <a
          href="https://github.com/cnscorpions/React-Nest-Admin"
          target="_blank"
          rel="noopener noreferrer"
        >
          <GithubOutlined />
          <span>Github</span>
        </a>
      </Menu.Item>
    </Menu>
  );
}

export default function Home() {
  const { data: session } = useSession();

  const [hour, setHour] = useState();
  const [openTickets, setOpenTickets] = useState(0);
  const [completedTickets, setCompletedTickets] = useState(0);
  const [uploaded, setUploaded] = useState(false);

  let file = [];

  async function time() {
    const date = new Date();
    const hour = date.getHours();
    setHour(hour);
  }

  async function getOpenTickets() {
    await fetch(`/api/v1/data/count/open-tickets`, {
      method: "get",
      headers: {
        ContentType: "application/json",
      },
    })
      .then((res) => res.json())
      .then((res) => {
        setOpenTickets(res.result);
      });
  }

  async function getCompletedTickets() {
    await fetch(`/api/v1/data/count/completed-tickets`, {
      method: "get",
      headers: {
        ContentType: "application/json",
      },
    })
      .then((res) => res.json())
      .then((res) => {
        setCompletedTickets(res.result);
      });
  }

  const stats = [
    { name: "Open Tickets", stat: openTickets, href: "/ticket" },
    { name: "Completed Tickets", stat: completedTickets, href: "/history" },
  ];

  const propsUpload = {
    name: "file",
    action: `/api/v1/users/file/upload`,
    data: () => {
      let data = new FormData();
      data.append("file", file);
      data.append("filename", file.name);
    },
    onChange(info) {
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        message.success(`${info.file.name} file uploaded successfully`);
        setUploaded(true);      
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
    progress: {
      strokeColor: {
        "0%": "#108ee9",
        "100%": "#87d068",
      },
      strokeWidth: 3,
      format: (percent) => `${parseFloat(percent.toFixed(2))}%`,
    },
  };

  useEffect(() => {
    getOpenTickets();
    getCompletedTickets();
    time();
  }, []);

  return (
    <div>
      <main className="p-1">
        {/* Page header */}
        <div className="bg-white shadow">
          <div className="px-4 sm:px-6 lg:max-w-6xl lg:mx-auto lg:px-8">
            <div className="py-6 md:flex md:items-center md:justify-between">
              <div className="flex-1 min-w-0">
                {/* Profile */}
                <div className="flex items-center">
                  <span className="hidden sm:inline-flex items-center justify-center h-12 w-12 rounded-full bg-gray-500">
                    <span className="text-lg font-medium leading-none text-white uppercase">
                      {session.user.name[0]}
                    </span>
                  </span>
                  <div>
                    <div className="flex items-center">
                      <span className="inline-flex items-center justify-center h-12 w-12 rounded-full bg-gray-500 sm:hidden">
                        <span className="text-lg font-medium leading-none text-white uppercase">
                          {session.user.name[0]}
                        </span>
                      </span>
                      <h1 className="ml-3 text-2xl font-bold leading-7 text-gray-900 sm:leading-9 sm:truncate">
                        Good {hour < 12 ? "Morning" : "Afternoon"},{" "}
                        {session.user.name}!
                      </h1>
                    </div>
                    <dl className="mt-6 flex flex-col sm:ml-3 sm:mt-1 sm:flex-row sm:flex-wrap">
                      <dt className="sr-only">Account status</dt>
                      <dd className="mt-3 flex items-center text-sm text-gray-500 font-medium sm:mr-6 sm:mt-0 capitalize">
                        <CheckCircleIcon
                          className="flex-shrink-0 mr-1.5 h-5 w-5 text-green-400"
                          aria-hidden="true"
                        />
                        {session.user.isAdmin ? "Admin" : "user"}
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div>
          <dl className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
            {stats.map((item) => (
              <Link href={item.href}>
                <a>
                  <div
                    key={item.name}
                    className="px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6"
                  >
                    <dt className="text-sm font-medium text-gray-500 truncate">
                      {item.name}
                    </dt>
                    <dd className="mt-1 text-3xl font-semibold text-gray-900">
                      {item.stat}
                    </dd>
                  </div>
                </a>
              </Link>
            ))}
          </dl>
        </div>

        <div className="flex sm:flex-row mt-5 flex-nowrap flex-col gap-4">
          <div className="flex w-full sm:w-3/5">
            <div className="bg-white shadow w-full h-full sm:rounded-lg">
              <div className="px-2 sm:px-6 lg:max-w-6xl lg:mx-auto lg:px-4">
                <div className="px-2 py-5 sm:p-6">
                  <div>
                    <h1 className="font-bold leading-7 text-gray-900">
                      Todo List
                    </h1>
                  </div>
                  <ListTodo />
                </div>
              </div>
            </div>
          </div>

          <div className="flex w-full sm:w-2/5">
            <div className="bg-white shadow w-full h-full sm:rounded-lg">
              <div className="px-2 py-5 sm:p-6 flex flex-row">
                <h2
                  className="font-bold leading-7 text-gray-900"
                  id="recent-hires-title"
                >
                  Personal Files
                </h2>
                <Upload
                  {...propsUpload}
                  className="px-4 flex align-middle items-center -mt-3"
                >
                  <button>
                    <UploadOutlined />
                  </button>
                </Upload>
              </div>
              <ListUserFiles uploaded={uploaded} setUploaded={() => setUploaded()} />
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

render() {
        return (
            <Layout className="layout-style">

                {this.state.loading ? (
                    <div style={{ position: "absolute", left: "55%", transform: "translate(-55%, 0%)", zIndex: 10 }}>
                        <Ellipsis color="#177ddc" size={120} />
                    </div>
                ) : (
                    <div>
                        <Modal
                            title={"Delete Account"}
                            visible={this.state.deleteAccountModal}
                            footer={null}
                            onCancel={() => { this.setState({ deleteAccountModal: false }) }}
                            confirmLoading={this.state.modalLoading}
                        >

                            <DeleteAccountForm logout={this.props.logout.bind(this)} setState={this.setState.bind(this)} />
                        </Modal>


                        <Divider />
                        <div style={{ display: "flex", marginRight: "5ch", alignItems: "center", justifyItems: "center" }}>
                            <div style={{ display: "flex", flexDirection: "column", justifyContent: "initial", width: "20ch", overflow: "hidden" }}>
                                <Avatar style={{ backgroundColor: "transparent", width: "12ch", height: "12ch" }} size='large' src={"/static/profile/" + this.props.username + ".webp"} />
                                <div style={{ marginTop: "2ch", display: "flex" }}>
                                    <Upload
                                        fileList={this.state.fileList}
                                        disabled={this.state.disableUpload}
                                        accept=".png, .jpg, .jpeg, .webp"
                                        action={window.ipAddress + "/v1/profile/upload"}
                                        maxCount={1}
                                        onChange={(file) => {
                                            this.setState({ fileList: file.fileList })
                                            if (file.file.status === "uploading") {
                                                this.setState({ disableUpload: true })
                                            }
                                            else if ("response" in file.file) {
                                                if (file.file.response.success) {
                                                    message.success("Uploaded profile picture")
                                                    message.success("Reload the page to see your shiny new picture :)!")
                                                }
                                                else {
                                                    message.error("Failed to upload profile picture")
                                                    if (file.file.response.error === "too-large") {
                                                        message.info("Please upload a file smaller than " + file.file.response.size.toString() + " Bytes.")
                                                    }
                                                }
                                                this.setState({ fileList: [], disableUpload: false })
                                            }
                                        }}
                                        headers={{ "Authorization": window.IRSCTFToken }}
                                        name="profile_pic"
                                        beforeUpload={file => {
                                            const exts = ["image/png", "image/jpg", "image/jpeg", "image/webp"]
                                            if (!exts.includes(file.type)) {
                                                message.error(`${file.name} is not an image file.`);
                                                return Upload.LIST_IGNORE
                                            }
                                            return true
                                        }}>
                                        <Tooltip title={<span>Upload a custom profile picture.</span>}>
                                            <Button type="primary" icon={<UploadOutlined />}>Upload</Button>
                                        </Tooltip>
                                    </Upload>
                                    <Tooltip title={<span>Reset your profile picture to the default profile picture.</span>}>
                                        <Button danger type="primary" icon={<DeleteOutlined />} style={{ marginLeft: "1ch" }} onClick={() => { this.deleteProfilePic() }} />
                                    </Tooltip>
                                </div>
                            </div>
                            <h1 style={{ fontSize: "5ch", marginLeft: "1ch" }}>{this.props.username}</h1>
                        </div>

                        <Divider />

                        <div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>

                            <div className="form-style">
                                <h1 className="settings-header"><KeyOutlined /> Change Password</h1>
                                <ChangePasswordForm />
                            </div>

                            <Divider type="vertical" style={{ height: "inherit" }} />


                            <div className="form-style">
                                <h1 className="settings-header"><MailOutlined /> Change Email</h1>
                                <ChangeEmailForm email={this.state.email} />
                            </div>
                        </div>

                        <Divider />

                        <div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>

                            <div className="form-style">
                                <h1 className="settings-header"><ApartmentOutlined /> Select Participant Category</h1>
                                <SelectParticipantCategoryForm participantCategory={this.state.participantCategory} categoryList={this.state.categoryList} />
                            </div>
                        </div>

                        <Divider />


                        <div>
                            <h3>Very Very Dangerous Button</h3>
                            <Button danger type="primary" icon={<DeleteOutlined />} onClick={() => { this.setState({ deleteAccountModal: true }) }} >Delete Account</Button>
                            <p>You will be asked to key in your password to confirm</p>
                        </div>
                    </div>
                )}
            </Layout>
        )
    }