antd#Upload JavaScript Examples

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

render() {
        const {
            children,
            is_save,
        } = this.props
        return (
            <Upload
                listType={children ? 'text' : 'picture-card'}
                showUploadList={false}
                beforeUpload={beforeUpload}
                customRequest={({ file }) => {
                    imageUpload({
                        file,
                        onSuccess: this.triggerChange,
                        is_save,
                    })
                }}
            >
                {
                    children
                        ? this.props.children
                        : this.defaultView()
                }
            </Upload>
        )
    }

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

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

AvatarView = ({ avatar }) => (
  <Fragment>
    <div className={styles.avatar_title}>Avatar</div>
    <div className={styles.avatar}>
      <img src={avatar} alt="avatar" />
    </div>
    <Upload fileList={[]}>
      <div className={styles.button_view}>
        <Button icon="upload">
          <FormattedMessage id="app.settings.basic.avatar" defaultMessage="Change avatar" />
        </Button>
      </div>
    </Upload>
  </Fragment>
)

render() {
    const { previewVisible, previewImage, fileList } = this.state;
    const uploadButton = (
      <div>
        <PlusOutlined />
        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
    );
    return (
      <>
        <Upload
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          listType="picture-card"
          fileList={fileList}
          onPreview={this.handlePreview}
          onChange={this.handleChange}
          iconRender={this.handleIconRender}
        >
          {fileList.length >= 8 ? null : uploadButton}
        </Upload>
        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </>
    );
  }

render() {
    /*
    success模式下fileList接收的值
      fileList=[{
          uid: '-1',
          status:'success',
          response:{
          code:requestCode.successCode,
          data:{url:'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'},
          },
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      }
    */
    const { fileList, action, limit, typeModule } = this.props

    const { previewVisible, previewImage, fileLists } = this.state;

    return (
      <>
        <Upload name="file"
          {...this.props}
          onChange={this.handleCurrencyChange}
          fileList={typeModule === 1 ? fileList : fileLists} action={action}
          onPreview={this.handlePreview}
          listType="picture-card">
          {fileList.length >= limit ? null : <PlusOutlined />}
        </Upload>
        <Modal
          visible={previewVisible}
          footer={null}
          onCancel={() => this.setState({ previewVisible: false })}
        >
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </>
    );
  }

render() {
    const { url } = this.props;
    let imageUrl = url ? url : `/api/user/avatar?uid=${this.props.uid}`;
    // let imageUrl = this.state.imageUrl ? this.state.imageUrl : `/api/user/avatar?uid=${this.props.uid}`;
    // console.log(this.props.uid);
    return (
      <div className="avatar-box">
        <Tooltip
          placement="right"
          title={<div>点击头像更换 (只支持jpg、png格式且大小不超过200kb的图片)</div>}
        >
          <div>
            <Upload
              className="avatar-uploader"
              name="basecode"
              showUploadList={false}
              action="/api/user/upload_avatar"
              beforeUpload={beforeUpload}
              onChange={this.handleChange.bind(this)}
            >
              {/*<Avatar size="large" src={imageUrl}  />*/}
              <div style={{ width: 100, height: 100 }}>
                <img className="avatar" src={imageUrl} />
              </div>
            </Upload>
          </div>
        </Tooltip>
        <span className="avatarChange" />
      </div>
    );
  }

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

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() {

        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() {
        const { firstName,middleName,lastName,gender, loading, imageUrl } = this.state;
        const uploadButton = (
            <div>
                {loading ? <LoadingOutlined /> : <PlusOutlined />}
                <div style={{ marginTop: 8 }}>Upload</div>
            </div>
        );

        const onPreview = async file => {
            let src = file.url;
            if (!src) {
                src = await new Promise(resolve => {
                    const reader = new FileReader();
                    reader.readAsDataURL(file.originFileObj);
                    reader.onload = () => resolve(reader.result);
                });
            }
            const image = new Image();
            image.src = src;
            const imgWindow = window.open(src);
            imgWindow.document.write(image.outerHTML);
        };

        return (
            <div>
                <Row justify="space-around" >
                    <Row justify="start" gutter={[16, 16]}>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <ImgCrop rotate>
                                <Upload
                                    name="avatar"
                                    listType="picture-card"
                                    multiple={false}
                                    className="avatar-uploader"
                                    showUploadList={false}
                                    onPreview={onPreview}
                                    customRequest={this.customUpload}
                                    beforeUpload={beforeUpload}
                                    onChange={this.handleUpload}
                                >
                                    {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                                </Upload>
                            </ImgCrop>

                        </Col>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <Input type="text" id="firstName" value={firstName} placeholder="First Name" onChange={this.handleFirstName} />
                        </Col>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <Input type="text" id="middleName" value={middleName} placeholder="Middle Name" onChange={this.handleMiddleName} />
                        </Col>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <Select id="gender"  style={{width:'100%'}} placeholder="Gender" value={gender} onChange={this.handleChangeGender}>
                                <Option value="Male">Male</Option>
                                <Option value="Female">Female</Option>
                                <Option value="Other">Other</Option>
                            </Select>
                        </Col>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <Input type="text" id="lastName" value={lastName} placeholder="Last Name" onChange={this.handleLastName} />
                        </Col>
                        <Col xs={{ span: 24 }} md={{ span: 12 }} lg={{span: 12}}>
                            <DatePicker type="text" id="dob" ref="datePicker" style={{width:'100%'}} value={this.state.dateValue}  selected={this.state.dob}  placeholder="Date of Birth" onChange={this.handleChangeDate} />
                        </Col>
                    </Row>

                </Row>
                <br/>
                <Button type="primary" onClick={this.handleSubmit}>Add Item</Button>
            </div>
        )
    }

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

{ Dragger } = Upload

{ Dragger } = Upload

render(){
        const {getFieldDecorator} = this.props.form;
        return(
            <div style={{textAlign: 'center'}}>
                <Form onSubmit={this.handleSubmit} colon={false}>
                    <Form.Item label="Base Salary">
                        {getFieldDecorator("base_salary", {
                            rules: [
                                {
                                    required: true,
                                    message: "Please input the base salary"
                                }
                            ],
                            initialValue: this.props.base_salary
                        })(
                            <InputNumber
                                step={1000}
                            />
                        )}
                    </Form.Item>
                    <Form.Item label="Bonus/perks">
                        {getFieldDecorator("bonus_perks", {
                            initialValue: this.props.bonus_perks
                        })(
                            <Input
                                placeholder="Specify Bonus/perks (if any)"
                            />
                        )}
                    </Form.Item>
                    <Form.Item label="Other pay">
                        {getFieldDecorator("other_pay", {
                            initialValue: this.props.other_pay
                        })(
                            <Input
                                placeholder="Other Pay"
                            />
                        )}
                    </Form.Item>
                    <Form.Item label="CTC effective">
                        {getFieldDecorator("ctc_effective", {
                            initialValue: this.props.ctc_effective
                        })(
                            <Input
                                placeholder="CTC effective (if any)"
                            />
                        )}
                    </Form.Item>
                    <Form.Item label="Service Contract">
                        {getFieldDecorator("contract_data",{
                            valuePropName: 'fileList',
                            getValueFromEvent: fileSelect,
                            initialValue: this.props.contract_data
                        })(
                            <Upload {...uploadProps}>
                                <Button>
                                    <Icon type="upload"/> Select File
                                </Button>
                            </Upload>
                        )}
                    </Form.Item>
                    <Form.Item>
                        <Button onClick={this.handleBack} style={{margin: 5}}>
                            Back
                        </Button>
                        <Button type='primary' htmlType='submit' style={{margin: 5}}>
                        Next
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }

render() {
    const { previewVisible } = this.state;
    return (
      <div className="clearfix">
        <Query
          query={gql`
            {
              params: uploadParams {
                key
                OSSAccessKeyId: accessid
                host
                policy
                signature
                expire
              }
            }
          `}
        >
          {({ loading, data, refetch }) => {
            console.log();
            if (loading) return <Spin />;
            const { key, host, OSSAccessKeyId, policy, signature } = data.params;
            return (
              <Upload
                action={host}
                beforeUpload={() => refetch()}
                data={{
                  key,
                  policy,
                  OSSAccessKeyId,
                  signature,
                }}
                onPreview={this.handlePreview}
                onChange={this.handleChange.bind(this, key)} // eslint-disable-line
              >
                <Button>
                  <Icon type="upload" />
                </Button>
              </Upload>
            );
          }}
        </Query>
        <Modal visible={previewVisible} />
      </div>
    );
  }

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 { form } = this.props;
    const { imageUrl, loading } = this.state;
    return (
      <PageHeaderWrapper title="新增">
        <Card>
          <Form layout="horizontal" onSubmit={this.handleSubmit}>
            <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 10 }} label="类型">
              {form.getFieldDecorator('type', {
                rules: [{ required: true, message: '请选择！' }],
              })(
                <Select>
                  <Select.Option value={1}>banner</Select.Option>
                  <Select.Option value={2}>海报</Select.Option>
                </Select>
              )}
            </FormItem>
            <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 10 }} label="备注">
              {form.getFieldDecorator('remark', {
                rules: [],
              })(<TextArea placeholder="请输入" />)}
            </FormItem>
            <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 10 }} label="图片">
              <Upload
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action="/empty-item/api/uploadImg"
                onChange={this.handleChange}
              >
                {imageUrl ? (
                  <img src={imgUrl + imageUrl} alt="image" style={{ width: '100%' }} />
                ) : (
                  <div>
                    <Icon type={this.state.uploadLoading ? 'loading' : 'plus'} />
                    <div className="ant-upload-text">Upload</div>
                  </div>
                )}
              </Upload>
            </FormItem>
            <div className="flexCenter">
              <Button onClick={() => this.cancel()}>取消</Button>
              <Button type="primary" className="marginLeft" htmlType="submit" loading={loading}>
                提交
              </Button>
            </div>
          </Form>
        </Card>
      </PageHeaderWrapper>
    );
  }

render(props) {
    console.log(this.props);
    console.log('props');
    const uploadButton = (
      <div>
        {this.state.loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    var {imageUrl} = this.state;
    if ('img' in this.props) {
      if (typeof this.props.img == 'string') {
        imageUrl = this.props.img;
      }
    }


    return (
      <Upload
        name="avatar"
        listType="picture-card"
        showUploadList={false}
        beforeUpload={this.props.beforeUpload}
        onChange={this.handleChange}
        fileList={this.state.fileList}
      >
        {imageUrl ? (
          <img
            src={imageUrl}
            alt="avatar"
            style={{
              width: '100%',
            }}
          />
        ) : (
          uploadButton
        )}
      </Upload>
    );
  }

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

{ Dragger } = Upload

Dragger = Upload.Dragger

{ Dragger } = Upload

{ Dragger } = Upload

{ Dragger } = Upload

//homeType 首页类型  0为立即申请按钮 1为搜索框
    render() {
      const props = {
        name: 'file',
        action: apiUrl + '/upload',
        listType: 'picture-card',
        multiple: true,
        showUploadList: false,
        headers: {
          authorization: 'authorization-text'
        }
      };
      return (
        <div className="upload-wrap">
          <Layout>
            <Header fixed>
              <div className="logo"><Icon type="FaBattleNet" style={{fontSize: '30px', marginRight: '12px'}} />XOSS</div>
            </Header>
            <Content style={{marginTop: '48px', backgroundColor: '#f0f2f5'}}>
              {
                this.state.fileList.map((item, i) => {
                  return <div key={i} className="imgBox" onClick={this.showAddress.bind(this, item)}>
                    <img src={item} alt=""/>
                    <span className="del-btn" onClick={this.delFile.bind(this, item)}><Icon type="FaMinusCircle" style={{fontSize: '24px'}} /></span>
                  </div>
                })
              }
              <Upload 
                {...props} 
                className="upload-btn"
                onChange={this.onChange}
              >
                +
              </Upload>
            </Content>
            <Footer style={{color: 'rgba(0,0,0, .5)'}}>趣谈前端 -- 徐小夕</Footer>
          </Layout>
        </div>
      )
    }

Dragger = Upload.Dragger

render(){
    const { fileList, limit, disabled, type, areakey, isdrag } = this.conversionObject();
    const { previewImage, previewVisible } = this.state
    const { restprops } = this.props
    const uploadButton = (
      <div>
        <Icon type={this.state.loading ? 'loading' : 'plus' } />
      </div>
    );
    const uploadIcon = (
      <Button>
        <Icon type="upload" /> { restprops && restprops.text }
      </Button>
    )
    const wh = window.screen.height
    const _limit = (limit && limit !== 1) || !limit //有限制数量且为1，或者没有限制

    return(
      <Fragment>
        <span style={ isdrag ? {} : {display:'table'}}>
        { isdrag && _limit
          ? fileList.map((item,index) =>
            <DragImage
              areakey={areakey} index={index} item={item}
              moveRow={this.moveRow}
              handlePreview={this.handlePreview}
              handleDelete={(item) => this.handleDelete(item,index)}
            />
          )
          : null
        }
        </span>
        <span className={styles.dragImageUpload}
              style={ isdrag ? {} : {marginLeft: 0}}
              onClick={() => this.openSource()}>
        <Upload action=''
                accept='.jpg,.jpeg,.png,.mp3,.mp4'
                listType={type === 'video' ? 'text' : 'picture-card'}
                showUploadList={ !isdrag || !_limit }
                onPreview={this.handlePreview}
                fileList={fileList}
                customRequest={(e) => this.handleUpload(e)}
                onChange={(e) => this.handleChange(e)}
                {...restprops}
        >
          {!disabled ?
            (limit && fileList.length >= limit
                ? null
                : (type === 'video' ? uploadIcon : uploadButton)
            ) : null
          }
        </Upload>
        </span>
        <Modal
          centered
          destroyOnClose
          footer={null}
          zIndex={1010}
          visible={previewVisible}
          onCancel={this.handleCancel}
          bodyStyle={{paddingTop: 56, maxHeight: `${wh-200}px`, textAlign:'center', overflowY: 'auto'}}>
          { previewImage && type === 'video'
            ? <video src={previewImage}  style={{ maxHeight: `${wh-360}px` }} controls="controls"/>
            : <img alt="example" style={{ width: '100%' }} src={previewImage} />
          }
        </Modal>
      </Fragment>
    )
  }