antd#Upload JavaScript Examples
The following examples show how to use
antd#Upload.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: picture-style.jsx From virtuoso-design-system with MIT License | 6 votes |
|
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></>) } });
Example #2
| Source File: index.js From egoshop with Apache License 2.0 | 6 votes |
|
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>
)
}
Example #3
| Source File: index.js From gobench with Apache License 2.0 | 6 votes |
|
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>
)
}
Example #4
| Source File: index.jsx From the-eye-knows-the-garbage with MIT License | 6 votes |
|
render() {
return (
<Upload onChange={this.handleChange} fileList={this.state.fileList} beforeUpload={()=>false}>
<Button>
<UploadOutlined /> 点击上传
</Button>
</Upload>
);
}
Example #5
| Source File: BaseView.js From camel-store-admin with Apache License 2.0 | 6 votes |
|
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>
)
Example #6
| Source File: file-type.jsx From virtuoso-design-system with MIT License | 6 votes |
|
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>
</>
);
}
Example #7
| Source File: imgUpload.js From ant-simple-pro with MIT License | 6 votes |
|
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>
</>
);
}
Example #8
| Source File: Profile.js From YApi-X with MIT License | 6 votes |
|
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>
);
}
Example #9
| Source File: upload-manually.jsx From virtuoso-design-system with MIT License | 6 votes |
|
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>
</>
);
}
Example #10
| Source File: base.jsx From prometheusPro with MIT License | 6 votes |
|
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>
)
Example #11
| Source File: modelSearch.js From credit with Apache License 2.0 | 6 votes |
|
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 >
)
}
Example #12
| Source File: AddressBookForm.jsx From reactjs-functions with MIT License | 5 votes |
|
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>
)
}
Example #13
| Source File: dataShare.js From credit with Apache License 2.0 | 5 votes |
|
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>
)
}
Example #14
| Source File: Uploader.js From getlink-next with MIT License | 5 votes |
|
{ Dragger } = Upload
Example #15
| Source File: tools.js From hashcat.launcher with MIT License | 5 votes |
|
{ Dragger } = Upload
Example #16
| Source File: SalaryDetails.js From placement-portal with MIT License | 5 votes |
|
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>
)
}
Example #17
| Source File: index.js From youdidao-unmanned-shop with MIT License | 5 votes |
|
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>
);
}
Example #18
| Source File: Backup.js From network-rc with Apache License 2.0 | 5 votes |
|
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>
);
}
Example #19
| Source File: Add.js From ant-back with MIT License | 5 votes |
|
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>
);
}
Example #20
| Source File: index.jsx From the-eye-knows-the-garbage with MIT License | 5 votes |
|
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>
);
}
Example #21
| Source File: basic.jsx From virtuoso-design-system with MIT License | 5 votes |
|
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></>) } });
Example #22
| Source File: Relation.js From OpenRichpedia with MIT License | 5 votes |
|
{ Dragger } = Upload
Example #23
| Source File: index.js From discern with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
Dragger = Upload.Dragger
Example #24
| Source File: index.js From gobench with Apache License 2.0 | 5 votes |
|
{ Dragger } = Upload
Example #25
| Source File: App.js From react-perspective-cropper with MIT License | 5 votes |
|
{ Dragger } = Upload
Example #26
| Source File: index.jsx From react-antd-admin-template with MIT License | 5 votes |
|
{ Dragger } = Upload
Example #27
| Source File: index.js From redux_OA with MIT License | 5 votes |
|
//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>
)
}
Example #28
| Source File: ProjectData.js From YApi-X with MIT License | 5 votes |
|
Dragger = Upload.Dragger
Example #29
| Source File: uploadImage.js From camel-store-admin with Apache License 2.0 | 5 votes |
|
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>
)
}
