@ant-design/icons#InboxOutlined JavaScript Examples

function UploadEbook() {
  return (
    <div style={{ height: "240px" }}>
      <Dragger {...props}>
        <p className="ant-upload-drag-icon">
          <InboxOutlined />
        </p>
        <p className="ant-upload-text">点击或拖拽上传</p>
      </Dragger>
    </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>
    )
  }

storiesOf('antd/upload', module).add('drag', () => 
  <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>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>You can drag files to a specific area, to upload. Alternatively, you can also upload by selecting.</p>
<p>We can upload serveral files at once in modern browsers by giving the input the <code>multiple</code> attribute.</p></>) } });

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>
  );
}

AdvancedFormExamples = () => {
  const [confirmDirty, setConfirmDirty] = useState(false)

  const handleConfirmBlur = e => {
    const { value } = e.target
    setConfirmDirty(confirmDirty || !!value)
  }

  const opts = {
    name: 'file',
    multiple: true,
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    onChange(info) {
      const { status } = info.file
      if (status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`)
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`)
      }
    },
  }

  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 12 },
    },
  }

  const marks = {
    0: '0',
    10: '10',
    20: '20',
    30: '30',
    40: '40',
    50: '50',
    60: '60',
    70: '70',
    80: '80',
    90: '90',
    100: '100',
  }

  const residences = [
    {
      value: 'zhejiang',
      label: 'Zhejiang',
      children: [
        {
          value: 'hangzhou',
          label: 'Hangzhou',
          children: [
            {
              value: 'xihu',
              label: 'West Lake',
            },
          ],
        },
      ],
    },
    {
      value: 'jiangsu',
      label: 'Jiangsu',
      children: [
        {
          value: 'nanjing',
          label: 'Nanjing',
          children: [
            {
              value: 'zhonghuamen',
              label: 'Zhong Hua Men',
            },
          ],
        },
      ],
    },
  ]

  return (
    <div>
      <Helmet title="Advanced / Form Examples" />
      <div className="kit__utils__heading">
        <h5>Form Examples</h5>
      </div>
      <div className="card">
        <div className="card-body">
          <h5 className="mb-4">
            <strong>Basic Form</strong>
          </h5>
          <Form {...formItemLayout} labelAlign="left">
            <Form.Item name="fullname6" label="Fullname">
              <Input placeholder="Your Fullname..." />
            </Form.Item>
            <Form.Item name="email6" label="Your Email...">
              <Input placeholder="Your Email..." />
            </Form.Item>
            <Form.Item name="budget1" label="Budget" className="mb-3">
              <Input placeholder="Your Budget..." addonBefore="$" />
            </Form.Item>
            <Form.Item name="amount" label="Amount">
              <Slider marks={marks} />
            </Form.Item>
            <button type="submit" className="btn btn-success px-5">
              Send Data
            </button>
          </Form>
        </div>
      </div>
      <div className="card">
        <div className="card-body">
          <h5 className="mb-4">
            <strong>Inline Form</strong>
          </h5>
          <Form layout="inline">
            <Form.Item name="budget2" className="mb-1 mt-1">
              <Input placeholder="Coins Amount" addonBefore="$" addonAfter=".00" />
            </Form.Item>
            <Form.Item name="budget3" className="mb-1 mt-1">
              <Input placeholder="8 Digit Pin" addonBefore="$" />
            </Form.Item>
            <button type="button" className="btn btn-success mt-1 mb-1">
              Confirm Transaction
            </button>
          </Form>
        </div>
      </div>
      <div className="card">
        <div className="card-body">
          <h5 className="mb-4">
            <strong>Two Columns</strong>
          </h5>
          <Form layout="vertical">
            <div className="row">
              <div className="col-md-6">
                <Form.Item name="email3" label="E-mail">
                  <Input placeholder="Email" />
                </Form.Item>
              </div>
              <div className="col-md-6">
                <Form.Item name="pass3" label="Password">
                  <Input placeholder="Password" />
                </Form.Item>
              </div>
              <div className="col-12">
                <Form.Item name="address3-1" label="Adress">
                  <Input placeholder="1234 Main St." />
                </Form.Item>
                <Form.Item name="address3-2" label="Adress 2">
                  <Input placeholder="Apartment, studio, or floor" />
                </Form.Item>
              </div>
              <div className="col-md-6">
                <Form.Item name="city3" label="City">
                  <Input />
                </Form.Item>
              </div>
              <div className="col-md-4">
                <Form.Item name="state3" label="State">
                  <Cascader options={residences} />
                </Form.Item>
              </div>
              <div className="col-md-2">
                <Form.Item name="zip" label="Zip">
                  <Input />
                </Form.Item>
              </div>
              <div className="col-12">
                <Form.Item valuePropName="fileList" name="upload3" label="Upload Presentation">
                  <Dragger {...opts}>
                    <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>
                </Form.Item>
              </div>
              <div className="col-12">
                <Form.Item valuePropName="checked" name="confirm3">
                  <Checkbox className="text-uppercase">
                    I CONSENT TO HAVING MDTK SOFT COLLECT MY PERSONAL DETAILS.
                  </Checkbox>
                </Form.Item>
                <Form.Item name="confirm4">
                  <button type="button" className="btn btn-light px-5">
                    Sign in
                  </button>
                </Form.Item>
              </div>
            </div>
          </Form>
        </div>
      </div>
      <div className="card">
        <div className="card-body">
          <h5 className="mb-4">
            <strong>Validation & Background</strong>
          </h5>
          <div className="bg-light rounded-lg p-5">
            <div className="row">
              <div className="col-lg-8 mx-auto">
                <Form layout="vertical">
                  <Form.Item name="fullname" label="Username">
                    <Input />
                  </Form.Item>
                  <Form.Item name="gender" label="Gender">
                    <Select placeholder="Select a option and change input text above">
                      <Option value="male">male</Option>
                      <Option value="female">female</Option>
                    </Select>
                  </Form.Item>
                  <Form.Item name="email" label="E-mail">
                    <Input />
                  </Form.Item>
                  <Form.Item name="password" label="Password" hasFeedback>
                    <Input.Password />
                  </Form.Item>
                  <Form.Item name="confirm" label="Confirm Password" hasFeedback>
                    <Input.Password onBlur={handleConfirmBlur} />
                  </Form.Item>
                  <div className="border-top pt-4">
                    <Form.Item>
                      <Button type="primary" htmlType="submit">
                        Submit
                      </Button>
                    </Form.Item>
                  </div>
                </Form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

ExtraAppsWordpressAdd = () => {
  return (
    <div>
      <Helmet title="Wordpress Add" />
      <div className="card">
        <div className="card-body">
          <Form layout="vertical">
            <div className="row">
              <div className="col-md-6">
                <div className="form-group">
                  <Form.Item name="title" label="Title">
                    <Input placeholder="Post title" />
                  </Form.Item>
                </div>
              </div>
            </div>
            <div className="form-group">
              <Form.Item name="type" label="Type">
                <Checkbox.Group>
                  <div className="d-flex flex-wrap">
                    <div className="mr-3 mt-1 mb-1">
                      <Checkbox value="text">Text</Checkbox>
                    </div>
                    <div className="mr-3 mt-1 mb-1">
                      <Checkbox value="video">Video</Checkbox>
                    </div>
                    <div className="mr-3 mt-1 mb-1">
                      <Checkbox value="image">Image</Checkbox>
                    </div>
                    <div className="mr-3 mt-1 mb-1">
                      <Checkbox value="audio">Audio</Checkbox>
                    </div>
                    <div className="mr-3 mt-1 mb-1">
                      <Checkbox value="vimeo">Vimeo</Checkbox>
                    </div>
                  </div>
                </Checkbox.Group>
              </Form.Item>
            </div>
            <div className="form-group">
              <Form.Item name="category" label="Category">
                <Select
                  mode="tags"
                  size="default"
                  placeholder="Select post category"
                  style={{ width: '100%' }}
                >
                  <Option key="travel">Travel</Option>
                  <Option key="lifestyle">Lifestyle</Option>
                  <Option key="nature">Nature</Option>
                  <Option key="Video">Video</Option>
                </Select>
              </Form.Item>
            </div>
            <div className="form-group">
              <Form.Item name="content" label="Content">
                <Editor
                  editorClassName="px-3 border border-gray-1"
                  editorStyle={{
                    height: 250,
                    overflow: 'auto',
                  }}
                />
              </Form.Item>
            </div>
            <div className="form-group">
              <Form.Item valuePropName="fileList" name="files">
                <Dragger>
                  <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>
              </Form.Item>
            </div>
            <Form.Item>
              <button type="submit" className="btn btn-success btn-with-addon text-nowrap">
                <span className="btn-addon">
                  <i className="btn-addon-icon fe fe-plus-circle" />
                </span>
                Add Post
              </button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  )
}

export default function Queue() {
  const user = useUser({ redirectTo: '/' });

  const router = useRouter();
  const { id } = router.query;

  const [queue, setQueue] = useState(null);
  const [loadingQueue, setLoadingQueue] = useState(false);
  useEffect(() => {
    const fetchQueue = async () => {
      try {
        if (!user) return;

        setLoadingQueue(true);
        const res = await fetch(`/api/queue/${id}`);
        const { data, error } = await res.json();

        switch (res.status) {
          case 200:
            setQueue(data);
            break;
          default:
            throw new Error(error);
        }
      } catch (error) {
        message.error(error.message);
      } finally {
        setLoadingQueue(false);
      }
    };
    fetchQueue();
  }, [user]);

  const [showNewJobsForm, setShowNewJobsForm] = useState(false);
  const [jobs, setJobs] = useState(null);
  const [loadingAddJobs, setLoadingAddJobs] = useState(false);
  const onAddJob = async () => {
    try {
      if (!user) return;

      setLoadingAddJobs(true);
      const res = await fetch(`/api/queue/${id}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: jobs,
      });
      const { error } = await res.json();

      switch (res.status) {
        case 200:
          location.reload();
          break;
        default:
          throw new Error(error);
      }
    } catch (error) {
      message.error(error.message);
    } finally {
      setLoadingAddJobs(false);
    }
  };

  const [showWorkerCodeSample, setShowWorkerCodeSample] = useState(false);
  const onDropdownClick = ({ key }) => {
    switch (key) {
      case DROPDOWN_KEYS.CODE_SAMPLE:
        return setShowWorkerCodeSample(true);
      default:
        break;
    }
  };

  const queueName = () => (queue && queue.name) || '...';

  const [redis, setRedis] = useState(null);
  const [loadingSecret, setLoadingSecret] = useState(null);
  const onShowSecret = async (checked) => {
    if (!checked) return setRedis(null);

    try {
      if (!user) return;

      setLoadingSecret(true);
      const res = await fetch(`/api/config`);
      const { data, error } = await res.json();

      switch (res.status) {
        case 200:
          setRedis(data.REDIS_URL);
          break;
        default:
          throw new Error(error);
      }
    } catch (error) {
      message.error(error.message);
    } finally {
      setLoadingSecret(false);
    }
  };

  return (
    <div>
      <Head>
        <title>Zero Queue</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      {user && (
        <Layout className="dashboard-layout">
          <Sidebar />
          <Layout className="dashboard-layout">
            <Header className="dashboard-header">
              <div className="dashboard-header__space" />
              <Button type="link" href="/api/auth/logout">
                Logout
              </Button>
            </Header>
            <Content className="dashboard-content">
              <Breadcrumb className="dashboard-content__breadcrumb">
                <Breadcrumb.Item>ZeroQueue</Breadcrumb.Item>
                <Breadcrumb.Item>
                  <Link href={`/dashboard`}>
                    <a>Queue</a>
                  </Link>
                </Breadcrumb.Item>
                <Breadcrumb.Item>{id}</Breadcrumb.Item>
              </Breadcrumb>
              <div className="dashboard-content__background">
                <div className="dashboard-overview-header">
                  <Title className="dashboard-overview-header__title" level={3}>
                    {queueName()}
                  </Title>
                  <Button
                    type="primary"
                    icon={<PlusOutlined />}
                    onClick={() => setShowNewJobsForm(true)}
                  >
                    New Jobs
                  </Button>
                  <Dropdown
                    overlay={
                      <Menu onClick={onDropdownClick}>
                        <Menu.Item key={DROPDOWN_KEYS.CODE_SAMPLE}>
                          <ApiOutlined /> Code sample
                        </Menu.Item>
                      </Menu>
                    }
                  >
                    <Button className="dashboard-overview-header__last-button">
                      More <DownOutlined />
                    </Button>
                  </Dropdown>
                </div>
                <Table
                  rowKey="name"
                  loading={loadingQueue}
                  columns={columns(id)}
                  dataSource={(queue && queue.status) || []}
                />
              </div>
            </Content>
            <Footer className="dashboard-footer">
              <Button
                type="link"
                href="https://github.com/thezeroqueue/zeroqueue"
                target="blank"
                icon={<GithubFilled />}
              />
            </Footer>
          </Layout>
          <Modal
            title="Add new jobs"
            visible={showNewJobsForm}
            onCancel={() => setShowNewJobsForm(false)}
            footer={null}
          >
            <Dragger {...uploadProps(setJobs)}>
              <p className="ant-upload-drag-icon">
                <InboxOutlined />
              </p>
              <p className="ant-upload-text">Click or drag JSON file to this area to upload</p>
              <p className="ant-upload-hint">See docs to learn more...</p>
            </Dragger>
            <br />
            <Button
              loading={loadingAddJobs}
              disabled={!jobs}
              type="primary"
              block
              onClick={onAddJob}
            >
              Add Jobs
            </Button>
          </Modal>
          <Modal
            title="Worker code sample"
            width="45%"
            visible={showWorkerCodeSample}
            onCancel={() => setShowWorkerCodeSample(false)}
            footer={null}
          >
            <p>Install dependencies:</p>
            <InstallDependencies />
            <div className="modal-inline-text">
              <p>Use the following template:</p>
              <p>
                <Switch
                  unCheckedChildren={<EyeInvisibleOutlined />}
                  loading={loadingSecret}
                  onChange={onShowSecret}
                />
              </p>
            </div>
            <Worker queue={queueName()} redis={redis} />
          </Modal>
        </Layout>
      )}
    </div>
  );
}

ImageDrawer = ({ onClose, visible, owner, tutorial_id, imageURLs }) => {
  const firebase = useFirebase();
  const firestore = useFirestore();
  const dispatch = useDispatch();

  const uploading = useSelector(
    ({
      tutorials: {
        images: { uploading },
      },
    }) => uploading
  );

  const uploading_error = useSelector(
    ({
      tutorials: {
        images: { uploading_error },
      },
    }) => uploading_error
  );

  const deleting = useSelector(
    ({
      tutorials: {
        images: { deleting },
      },
    }) => deleting
  );

  const deleting_error = useSelector(
    ({
      tutorials: {
        images: { deleting_error },
      },
    }) => deleting_error
  );

  useEffect(() => {
    if (uploading === false && uploading_error === false) {
      <Snackbar
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
        open={true}
        autoHideDuration={6000}
        message="Image Uploaded successfully...."
      />;
    } else if (uploading === false && uploading_error) {
      <Snackbar
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
        open={true}
        autoHideDuration={6000}
        message={uploading_error}
      />;
    }
  }, [uploading, uploading_error]);

  useEffect(() => {
    if (deleting === false && deleting_error === false) {
      <Snackbar
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
        open={true}
        autoHideDuration={6000}
        message="Deleted Succefully...."
      />;
    } else if (deleting === false && deleting_error) {
      <Snackbar
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
        open={true}
        autoHideDuration={6000}
        message={deleting_error}
      />;
    }
  }, [deleting, deleting_error]);

  useEffect(() => {
    clearTutorialImagesReducer()(dispatch);
    return () => {
      clearTutorialImagesReducer()(dispatch);
    };
  }, [dispatch]);

  const props = {
    name: "file",
    multiple: true,
    beforeUpload(file, files) {
      uploadTutorialImages(owner, tutorial_id, files)(
        firebase,
        firestore,
        dispatch
      );
      return false;
    },
  };

  const deleteFile = (name, url) =>
    remoteTutorialImages(
      owner,
      tutorial_id,
      name,
      url
    )(firebase, firestore, dispatch);

  return (
    <Drawer
      title="Images"
      anchor="right"
      closable={true}
      onClose={onClose}
      open={visible}
      getContainer={true}
      style={{ position: "absolute" }}
      width="400px"
      className="image-drawer"
      destroyOnClose={true}
      maskClosable={false}
    >
      <div className="col-pad-24" data-testId="tutorialImgUpload">
        <Grid>
          <input
            id="file-upload"
            fullWidth
            accept="image/*"
            type="file"
            {...props}
          />
          {uploading ? (
            <>
              <LoadingOutlined /> Please wait...
              <p className="ant-upload-hint mt-8">Uploading image(s)...</p>
            </>
          ) : (
            <>
              <p className="ant-upload-drag-icon">
                <InboxOutlined />
              </p>
              <p className="ant-upload-text">
                Click or drag images to here to upload
              </p>
            </>
          )}
        </Grid>
        {imageURLs &&
          imageURLs.length > 0 &&
          imageURLs.map((image, i) => (
            <Grid className="mb-24" key={i}>
              <Grid xs={24} md={8}>
                <img src={image.url} alt="" />
              </Grid>
              <Grid xs={24} md={16} className="pl-8" style={{}}>
                <h4 className="pb-8">{image.name}</h4>

                <CopyToClipboard
                  text={`![alt=image; scale=1.0](${image.url})`}
                  onCopy={() => (
                    <Snackbar
                      anchorOrigin={{
                        vertical: "bottom",
                        horizontal: "left",
                      }}
                      open={true}
                      autoHideDuration={6000}
                      message="Copied...."
                    />
                  )}
                >
                  <Button type="primary">Copy URL</Button>
                </CopyToClipboard>

                <Button
                  loading={deleting}
                  onClick={() => deleteFile(image.name, image.url)}
                  type="ghost"
                  danger
                >
                  Delete
                </Button>
              </Grid>
            </Grid>
          ))}
      </div>
    </Drawer>
  );
}