Action { { $ Url for Upload } }
- Upload by clicking
- Avatar
- Default Files
- Pictures Wall
- Complete control over file list
- Elevate and Driblet
- Upload directory
- Upload manually
- Upload png file only
- Pictures with list mode
- Customize preview file
- Max Count
- Transform file earlier request
- Aliyun OSS
- custom action icon
- Elevate sorting of uploadList
- Crop image earlier uploading
- Customize Progress Bar
- API
Upload
Upload file by selecting or dragging.
When To Use#
Uploading is the process of publishing information (web pages, text, pictures, video, etc.) to a remote server via a web folio or upload tool.
-
When you demand to upload one or more files.
-
When you lot need to show the procedure of uploading.
-
When you lot need to upload files by dragging and dropping.
Examples
Classic mode. File selection dialog pops up when upload button is clicked.
import { Upload, message, Button } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; const props = { proper noun : 'file' , activity : 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , headers : { authorization : 'authority-text' , } , onChange ( info ) { if (info.file.status !== 'uploading' ) { console. log (info.file, info.fileList) ; } if (info.file.status === 'washed' ) { bulletin. success ( ` ${info.file.proper noun} file uploaded successfully ` ) ; } else if (info.file.status === 'error' ) { bulletin. error ( ` ${info.file.name} file upload failed. ` ) ; } } , } ; ReactDOM. render ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Click to Upload </ Button > </ Upload > , mountNode, ) ; Utilise defaultFileList for uploaded files when page init.
import { Upload, Push button } from 'antd' ; import { UploadOutlined } from '@ant-blueprint/icons' ; const props = { action : 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , onChange ( { file, fileList } ) { if (file.status !== 'uploading' ) { console. log (file, fileList) ; } } , defaultFileList : [ { uid : '1' , name : 'xxx.png' , condition : 'done' , response : 'Server Error 500' , // custom fault message to show url : 'http://www.baidu.com/xxx.png' , } , { uid : '2' , name : 'yyy.png' , condition : 'done' , url : 'http://www.baidu.com/yyy.png' , } , { uid : '3' , name : 'zzz.png' , status : 'error' , response : 'Server Mistake 500' , // custom error message to bear witness url : 'http://www.baidu.com/zzz.png' , } , ] , } ; ReactDOM. render ( < Upload { ...props} > < Push button icon = { < UploadOutlined /> } > Upload </ Push button > </ Upload > , mountNode, ) ; You can proceeds full control over filelist by configuring fileList. You can reach all kinds of customed functions. The following shows two circumstances:
-
limit the number of uploaded files.
-
read from response and evidence file link.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@pismire-pattern/icons' ; class MyUpload extends React.Component { state = { fileList : [ { uid : '-1' , proper name : 'xxx.png' , condition : 'done' , url : 'http://www.baidu.com/thirty.png' , } , ] , } ; handleChange = info => { permit fileList = [ ...info.fileList] ; // ane. Limit the number of uploaded files // Only to show two contempo uploaded files, and erstwhile ones volition be replaced by the new fileList = fileList. piece ( - 2 ) ; // 2. Read from response and prove file link fileList = fileList. map ( file => { if (file.response) { // Component will show file.url equally link file.url = file.response.url; } return file; } ) ; this . setState ( { fileList } ) ; } ; render ( ) { const props = { action : 'https://world wide web.mocky.io/v2/5cc8019d300000980a055e76' , onChange : this .handleChange, multiple : true , } ; return ( < Upload { ...props} fileList = { this .state.fileList} > < Button icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > ) ; } } ReactDOM. return ( < MyUpload /> , mountNode) ; You can select and upload a whole directory.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@ant-pattern/icons' ; ReactDOM. render ( < Upload activity = "https://world wide web.mocky.io/v2/5cc8019d300000980a055e76" directory > < Button icon = { < UploadOutlined /> } > Upload Directory </ Push > </ Upload > , mountNode, ) ; beforeUpload simply foreclose upload behavior when return simulated or refuse hope, the prevented file would all the same prove in file listing. Here is the case you can keep prevented files out of listing by return UPLOAD.LIST_IGNORE.
import React, { useState } from 'react' ; import { Upload, Button, bulletin } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; const Uploader = ( ) => { const props = { beforeUpload : file => { const isPNG = file.type === 'image/png' ; if ( !isPNG) { message. error ( ` ${file.name} is not a png file ` ) ; } return isPNG || Upload. LIST_IGNORE ; } , onChange : info => { console. log (info.fileList) ; } , } ; return ( < Upload { ...props} > < Push button icon = { < UploadOutlined /> } > Upload png only </ Push button > </ Upload > ) ; } ; ReactDOM. render ( < Uploader /> , mountNode) ; Customize local preview. Can handle with non-image format files such as video.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@emmet-design/icons' ; const props = { action : '//jsonplaceholder.typicode.com/posts/' , listType : 'pic' , previewFile ( file ) { panel. log ( 'Your upload file:' , file) ; // Your process logic. Here we just mock to the same file render fetch ( 'https://next.json-generator.com/api/json/become/4ytyBoLK8' , { method : 'Post' , trunk : file, } ) . then ( res => res. json ( ) ) . and so ( ( { thumbnail } ) => thumbnail) ; } , } ; ReactDOM. render ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > , mountNode, ) ; Employ beforeUpload for transform file earlier request such as add a watermark.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; const props = { action : 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , listType : 'picture' , beforeUpload ( file ) { return new Promise ( resolve => { const reader = new FileReader ( ) ; reader. readAsDataURL (file) ; reader. onload = ( ) => { const img = document. createElement ( 'img' ) ; img.src = reader.result; img. onload = ( ) => { const canvas = document. createElement ( 'sail' ) ; canvas.width = img.naturalWidth; canvas.summit = img.naturalHeight; const ctx = sheet. getContext ( '2d' ) ; ctx. drawImage (img, 0 , 0 ) ; ctx.fillStyle = 'cherry' ; ctx.textBaseline = 'centre' ; ctx.font = '33px Arial' ; ctx. fillText ( 'Emmet Design' , 20 , twenty ) ; sail. toBlob (resolve) ; } ; } ; } ) ; } , } ; ReactDOM. return ( < Upload { ...props} > < Push icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > , mountNode, ) ; Use showUploadList for custom action icons of files.
import { Upload, Button } from 'antd' ; import { UploadOutlined, StarOutlined } from '@emmet-design/icons' ; const props = { action : 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , onChange ( { file, fileList } ) { if (file.status !== 'uploading' ) { console. log (file, fileList) ; } } , defaultFileList : [ { uid : '1' , name : 'xxx.png' , status : 'washed' , response : 'Server Error 500' , // custom error bulletin to show url : 'http://www.baidu.com/xxx.png' , } , { uid : 'ii' , proper name : 'yyy.png' , condition : 'done' , url : 'http://www.baidu.com/yyy.png' , } , { uid : '3' , name : 'zzz.png' , status : 'error' , response : 'Server Error 500' , // custom error bulletin to show url : 'http://www.baidu.com/zzz.png' , } , ] , showUploadList : { showDownloadIcon : true , downloadIcon : 'download ' , showRemoveIcon : true , removeIcon : < StarOutlined onClick = { e => panel. log (e, 'custom removeIcon event' ) } /> , } , } ; ReactDOM. render ( < Upload { ...props} > < Push icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > , mountNode, ) ;
import React, { useState } from 'react' ; import { Upload } from 'antd' ; import ImgCrop from 'antd-img-crop' ; const Demo = ( ) => { const [fileList, setFileList] = useState ( [ { uid : '-i' , name : 'image.png' , condition : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , ] ) ; const onChange = ( { fileList : newFileList } ) => { setFileList (newFileList) ; } ; 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.consequence) ; } ) ; } const epitome = new Image ( ) ; image.src = src; const imgWindow = window. open (src) ; imgWindow.document. write (image.outerHTML) ; } ; render ( < ImgCrop rotate > < Upload action = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "picture-menu" fileList = {fileList} onChange = {onChange} onPreview = {onPreview} > {fileList.length < v && '+ Upload' } </ Upload > </ ImgCrop > ) ; } ; ReactDOM. return ( < Demo /> , mountNode) ; Click to upload user'south avatar, and validate size and format of flick with beforeUpload.
The return value of function
beforeUploadcan exist a Promise to check asynchronously. demo
import { Upload, bulletin } from 'antd' ; import { LoadingOutlined, PlusOutlined } from '@emmet-design/icons' ; function getBase64 ( img, callback ) { const reader = new FileReader ( ) ; reader. addEventListener ( 'load' , ( ) => callback (reader.result) ) ; reader. readAsDataURL (img) ; } office beforeUpload ( file ) { const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'epitome/png' ; if ( !isJpgOrPng) { bulletin. error ( 'You lot can but upload JPG/PNG file!' ) ; } const isLt2M = file.size / 1024 / 1024 < 2 ; if ( !isLt2M) { message. mistake ( 'Image must smaller than 2MB!' ) ; } return isJpgOrPng && isLt2M; } grade Avatar extends React.Component { country = { loading : false , } ; handleChange = info => { if (info.file.status === 'uploading' ) { this . setState ( { loading : true } ) ; render ; } if (info.file.status === 'done' ) { // Get this url from response in real globe. getBase64 (info.file.originFileObj, imageUrl => this . setState ( { imageUrl, loading : imitation , } ) , ) ; } } ; return ( ) { const { loading, imageUrl } = this .state; const uploadButton = ( <div > {loading ? < LoadingOutlined /> : < PlusOutlined /> } <div style = { { marginTop : 8 } } > Upload </div > </div > ) ; return ( < Upload name = "avatar" listType = "picture-card" className = "avatar-uploader" showUploadList = { faux } action = "https://www.mocky.io/v2/5cc8019d300000980a055e76" beforeUpload = {beforeUpload} onChange = { this .handleChange} > {imageUrl ? <img src = {imageUrl} alt = "avatar" style = { { width : '100%' } } /> : uploadButton} </ Upload > ) ; } } ReactDOM. render ( < Avatar /> , mountNode) ; .avatar-uploader > .ant-upload { width : 128px; superlative : 128px; } Afterwards users upload picture, the thumbnail will be shown in list. The upload button will disappear when count meets limitation.
import { Upload, Modal } from 'antd' ; import { PlusOutlined } from '@emmet-design/icons' ; function getBase64 ( file ) { render new Promise ( ( resolve, turn down ) => { const reader = new FileReader ( ) ; reader. readAsDataURL (file) ; reader. onload = ( ) => resolve (reader.result) ; reader. onerror = mistake => refuse (error) ; } ) ; } grade PicturesWall extends React.Component { state = { previewVisible : false , previewImage : '' , previewTitle : '' , fileList : [ { uid : '-1' , proper name : 'epitome.png' , status : 'washed' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-two' , name : 'epitome.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-3' , proper name : 'image.png' , status : 'washed' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-4' , name : 'epitome.png' , condition : 'washed' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-xxx' , percent : 50 , proper noun : 'epitome.png' , status : 'uploading' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-v' , name : 'prototype.png' , status : 'error' , } , ] , } ; handleCancel = ( ) => this . setState ( { previewVisible : simulated } ) ; handlePreview = async file => { if ( !file.url && !file.preview) { file.preview = await getBase64 (file.originFileObj) ; } this . setState ( { previewImage : file.url || file.preview, previewVisible : true , previewTitle : file.proper name || file.url. substring (file.url. lastIndexOf ( '/' ) + 1 ) , } ) ; } ; handleChange = ( { fileList } ) => this . setState ( { fileList } ) ; render ( ) { const { previewVisible, previewImage, fileList, previewTitle } = this .state; const uploadButton = ( <div > < PlusOutlined /> <div style = { { marginTop : 8 } } > Upload </div > </div > ) ; return ( < > < Upload action = "https://world wide web.mocky.io/v2/5cc8019d300000980a055e76" listType = "moving-picture show-carte" fileList = {fileList} onPreview = { this .handlePreview} onChange = { this .handleChange} > {fileList.length >= 8 ? null : uploadButton} </ Upload > < Modal visible = {previewVisible} championship = {previewTitle} footer = { goose egg } onCancel = { this .handleCancel} > <img alt = "case" style = { { width : '100%' } } src = {previewImage} /> </ Modal > </ > ) ; } } ReactDOM. render ( < PicturesWall /> , mountNode) ;
Click or drag file to this area to upload
Back up for a unmarried or bulk upload. Strictly prohibit from uploading company data or other band files
You can drag files to a specific area, to upload. Alternatively, you can also upload by selecting.
We tin can upload serveral files at once in modernistic browsers by giving the input the multiple attribute.
import { Upload, message } from 'antd' ; import { InboxOutlined } from '@ant-design/icons' ; const { Dragger } = Upload; const props = { proper noun : 'file' , multiple : truthful , 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.proper noun} file uploaded successfully. ` ) ; } else if (status === 'error' ) { message. fault ( ` ${info.file.name} file upload failed. ` ) ; } } , onDrop ( eastward ) { console. log ( 'Dropped files' , due east.dataTransfer.files) ; } , } ; ReactDOM. render ( < Dragger { ...props} > <p className = "ant-upload-drag-icon" > < InboxOutlined /> </p > <p className = "pismire-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 > , mountNode, ) ; Upload files manually subsequently beforeUpload returns false.
import { Upload, Button, message } from 'antd' ; import { UploadOutlined } from '@pismire-design/icons' ; class Demo extends React.Component { state = { fileList : [ ] , uploading : fake , } ; handleUpload = ( ) => { const { fileList } = this .state; const formData = new FormData ( ) ; fileList. forEach ( file => { formData. append ( 'files[]' , file) ; } ) ; this . setState ( { uploading : true , } ) ; // You can utilise any AJAX library you similar fetch ( 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , { method : 'Postal service' , torso : formData, } ) . then ( res => res. json ( ) ) . so ( ( ) => { this . setState ( { fileList : [ ] , } ) ; message. success ( 'upload successfully.' ) ; } ) . catch ( ( ) => { message. fault ( 'upload failed.' ) ; } ) . finally ( ( ) => { this . setState ( { uploading : false , } ) ; } ) ; } ; render ( ) { const { uploading, fileList } = this .land; const props = { onRemove : file => { this . setState ( state => { const index = land.fileList. indexOf (file) ; const newFileList = country.fileList. slice ( ) ; newFileList. splice (index, 1 ) ; return { fileList : newFileList, } ; } ) ; } , beforeUpload : file => { this . setState ( state => ( { fileList : [ ...country.fileList, file] , } ) ) ; render false ; } , fileList, } ; render ( < > < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Select File </ Push > </ Upload > < Button blazon = "primary" onClick = { this .handleUpload} disabled = {fileList.length === 0 } loading = {uploading} style = { { marginTop : 16 } } > {uploading ? 'Uploading' : 'Start Upload' } </ Button > </ > ) ; } } ReactDOM. return ( < Demo /> , mountNode) ; If uploaded file is a picture, the thumbnail can exist shown. IE8/nine practise non support local thumbnail show. Please utilize thumbUrl instead.
import { Upload, Push } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; const fileList = [ { uid : '-ane' , name : 'xxx.png' , status : 'washed' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , thumbUrl : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-two' , name : 'yyy.png' , status : 'error' , } , ] ; ReactDOM. render ( < > < Upload action = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "picture" defaultFileList = { [ ...fileList] } > < Button icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > <br /> <br /> < Upload activity = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "moving picture" defaultFileList = { [ ...fileList] } className = "upload-list-inline" > < Button icon = { < UploadOutlined /> } > Upload </ Push button > </ Upload > </ > , mountNode, ) ; /* tile uploaded pictures */ .upload-list-inline .ant-upload-list-item { float : left; width : 200px; margin-right : 8px; } .upload-list-inline [form*='-upload-list-rtl'] .ant-upload-list-particular { float : right; } Limit files with maxCount. Volition supplant current 1 when maxCount is one.
import { Upload, Push, Space } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; ReactDOM. render ( < Space direction = "vertical" style = { { width : '100%' } } size = "large" > < Upload action = "https://world wide web.mocky.io/v2/5cc8019d300000980a055e76" listType = "motion picture" maxCount = { i } > < Button icon = { < UploadOutlined /> } > Upload (Max: 1 ) </ Button > </ Upload > < Upload activity = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "picture" maxCount = { 3 } multiple > < Push icon = { < UploadOutlined /> } > Upload (Max: iii ) </ Push button > </ Upload > </ Space > , mountNode, ) ; Use Aliyun OSS upload example.
import { Form, Upload, message, Button } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; class AliyunOSSUpload extends React.Component { land = { OSSData : { } , } ; async componentDidMount ( ) { wait this . init ( ) ; } init = async ( ) => { endeavour { const OSSData = await this . mockGetOSSData ( ) ; this . setState ( { OSSData, } ) ; } catch (mistake) { message. error (error) ; } } ; // Mock go OSS api // https://help.aliyun.com/document_detail/31988.html mockGetOSSData = ( ) => ( { dir : 'user-dir/' , expire : '1577811661' , host : '//www.mocky.io/v2/5cc8019d300000980a055e76' , accessId : 'c2hhb2RhaG9uZw==' , policy : 'eGl4aWhhaGFrdWt1ZGFkYQ==' , signature : 'ZGFob25nc2hhbw==' , } ) ; onChange = ( { fileList } ) => { const { onChange } = this .props; panel. log ( 'Aliyun OSS:' , fileList) ; if (onChange) { onChange ( [ ...fileList] ) ; } } ; onRemove = file => { const { value, onChange } = this .props; const files = value. filter ( v => five.url !== file.url) ; if (onChange) { onChange (files) ; } } ; getExtraData = file => { const { OSSData } = this .state; return { primal : file.url, OSSAccessKeyId : OSSData.accessId, policy : OSSData.policy, Signature : OSSData.signature, } ; } ; beforeUpload = async file => { const { OSSData } = this .land; const elapse = OSSData.expire * 1000 ; if (expire < Date. now ( ) ) { await this . init ( ) ; } const suffix = file.name. slice (file.name. lastIndexOf ( '.' ) ) ; const filename = Date. now ( ) + suffix; file.url = OSSData.dir + filename; return file; } ; return ( ) { const { value } = this .props; const props = { proper name : 'file' , fileList : value, action : this .country.OSSData.host, onChange : this .onChange, onRemove : this .onRemove, information : this .getExtraData, beforeUpload : this .beforeUpload, } ; render ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Click to Upload </ Push button > </ Upload > ) ; } } const FormPage = ( ) => ( < Form labelCol = { { span : 4 } } > < Form.Particular label = "Photos" name = "photos" > < AliyunOSSUpload /> </ Form.Item > </ Grade > ) ; ReactDOM. render ( < FormPage /> , mountNode) ; By using itemRender, we can integrate upload with react-dnd to implement drag sorting of uploadList.
import React, { useState, useCallback, useRef } from 'react' ; import { Upload, Button, Tooltip } from 'antd' ; import { DndProvider, useDrag, useDrop } from 'react-dnd' ; import { HTML5Backend } from 'react-dnd-html5-backend' ; import update from 'immutability-helper' ; import { UploadOutlined } from '@emmet-blueprint/icons' ; const type = 'DragableUploadList' ; const DragableUploadListItem = ( { originNode, moveRow, file, fileList } ) => { const ref = React. useRef ( ) ; const index = fileList. indexOf (file) ; const [ { isOver, dropClassName } , drop] = useDrop ( { take : type, collect : monitor => { const { index : dragIndex } = monitor. getItem ( ) || { } ; if (dragIndex === index) { return { } ; } return { isOver : monitor. isOver ( ) , dropClassName : dragIndex < index ? ' drop-over-downwardly' : ' drop-over-upwards' , } ; } , drop : detail => { moveRow (item.alphabetize, index) ; } , } ) ; const [ , elevate] = useDrag ( { blazon, detail : { index } , collect : monitor => ( { isDragging : monitor. isDragging ( ) , } ) , } ) ; drop ( elevate (ref) ) ; const errorNode = < Tooltip title = "Upload Error" > {originNode.props.children} </ Tooltip > ; return ( <div ref = {ref} className = { ` ant-upload-draggable-list-item ${isOver ? dropClassName : '' } ` } style = { { cursor : 'move' } } > {file.status === 'error' ? errorNode : originNode} </div > ) ; } ; const DragSortingUpload = ( ) => { const [fileList, setFileList] = useState ( [ { uid : '-one' , name : 'image1.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-2' , proper noun : 'image2.png' , status : 'washed' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-3' , name : 'image3.png' , status : 'washed' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-4' , name : 'image4.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-v' , name : 'image.png' , status : 'error' , } , ] ) ; const moveRow = useCallback ( ( dragIndex, hoverIndex ) => { const dragRow = fileList[dragIndex] ; setFileList ( update (fileList, { $splice : [ [dragIndex, one ] , [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} /> ) } > < Push icon = { < UploadOutlined /> } > Click to Upload </ Button > </ Upload > </ DndProvider > ) ; } ; ReactDOM. render ( < DragSortingUpload /> , mountNode) ; #components-upload-demo-drag-sorting .pismire-upload-draggable-list-item { border-pinnacle : iipx dashed rgba ( 0, 0, 0, 0 ) ; border-bottom : 2px dashed rgba ( 0, 0, 0, 0 ) ; } #components-upload-demo-drag-sorting .pismire-upload-draggable-list-item.drib-over-down { border-bottom-color : #1890ff ; } #components-upload-demo-drag-sorting .pismire-upload-draggable-list-item.drop-over-upwardly { border-meridian-color : #1890ff ; } Utilize progress for customize progress bar.
import { Upload, message, Button } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; const props = { proper name : 'file' , action : 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , headers : { authorization : 'potency-text' , } , onChange ( info ) { if (info.file.status !== 'uploading' ) { panel. log (info.file, info.fileList) ; } if (info.file.status === 'done' ) { message. success ( ` ${info.file.name} file uploaded successfully ` ) ; } else if (info.file.status === 'error' ) { message. mistake ( ` ${info.file.name} file upload failed. ` ) ; } } , progress : { strokeColor : { '0%' : '#108ee9' , '100%' : '#87d068' , } , strokeWidth : 3 , format : percent => ` ${ parseFloat (percent. toFixed ( ii ) ) } % ` , } , } ; ReactDOM. render ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Click to Upload </ Button > </ Upload > , mountNode, ) ; API#
| Property | Clarification | Type | Default | Version |
|---|---|---|---|---|
| accept | File types that can be accepted. Encounter input accept Attribute | string | - | |
| activity | Uploading URL | string | (file) => Promise < string> | - | |
| beforeUpload | Hook function which will be executed earlier uploading. Uploading will exist stopped with false or a rejected Promise returned. When returned value is Upload.LIST_IGNORE, the list of files that have been uploaded volition ignore it. Warning：this function is not supported in IE9 | (file, fileList) => boolean | Promise < File> | Upload.LIST_IGNORE | - | |
| customRequest | Override for the default xhr behavior allowing for additional customization and power to implement your own XMLHttpRequest | office | - | |
| data | Uploading extra params or function which can return uploading extra params | object | (file) => object | Promise < object> | - | |
| defaultFileList | Default listing of files that take been uploaded | object [ ] | - | |
| directory | Support upload whole directory (caniuse) | boolean | false | |
| disabled | Disable upload push | boolean | faux | |
| fileList | List of files that have been uploaded (controlled). Here is a mutual consequence #2423 when using it | UploadFile[ ] | - | |
| headers | Set request headers, valid above IE10 | object | - | |
| iconRender | Custom bear witness icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - | |
| isImageUrl | Customize if return < img /> in thumbnail | (file: UploadFile) => boolean | (inside implementation) | |
| itemRender | Custom detail of uploadList | (originNode: ReactElement, file: UploadFile, fileList: object [ ], actions: { download: function, preview: function, remove: part }) => React.ReactNode | - | four.16.0 |
| listType | Built-in stylesheets, support for three types: text, picture show or moving-picture show-card | cord | text | |
| maxCount | Limit the number of uploaded files. Will supervene upon electric current one when maxCount is i | number | - | four.x.0 |
| method | The http method of upload request | string | mail service | |
| multiple | Whether to support selected multiple file. IE10+ supported. Y'all can select multiple files with CTRL property downward while multiple is set to be true | boolean | false | |
| name | The name of uploading file | string | file | |
| openFileDialogOnClick | Click open file dialog | boolean | true | |
| previewFile | Customize preview file logic | (file: File | Blob) => Promise < dataURL: string> | - | |
| progress | Custom progress bar | ProgressProps (support type="line" merely) | { strokeWidth: ii, showInfo: false } | 4.3.0 |
| showUploadList | Whether to testify default upload listing, could be an object to specify showPreviewIcon, showRemoveIcon, showDownloadIcon, removeIcon and downloadIcon individually | boolean | { showPreviewIcon?: boolean, showDownloadIcon?: boolean, showRemoveIcon?: boolean, previewIcon?: ReactNode | (file: UploadFile) => ReactNode, removeIcon?: ReactNode | (file: UploadFile) => ReactNode, downloadIcon?: ReactNode | (file: UploadFile) => ReactNode } | true | part: iv.7.0 |
| withCredentials | The ajax upload with cookie sent | boolean | imitation | |
| onChange | A callback function, can be executed when uploading state is changing, see onChange | part | - | |
| onDrop | A callback function executed when files are dragged and dropped into upload area | (event: React.DragEvent) => void | - | iv.xvi.0 |
| onDownload | Click the method to download the file, pass the method to perform the method logic, practise not pass the default jump to the new TAB | part(file): void | (Jump to new TAB) | |
| onPreview | A callback function, volition be executed when file link or preview icon is clicked | function(file) | - | |
| onRemove | A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is false or a Promise which resolve(false) or refuse | office(file): boolean | Promise | - |
UploadFile#
Extends File with additional props.
| Holding | Clarification | Type | Default |
|---|---|---|---|
| name | File name | cord | - |
| per centum | Upload progress pct | number | - |
| status | Upload condition. Show different style when configured | mistake | success | done | uploading | removed | - |
| thumbUrl | Pollex image url | string | - |
| uid | unique id. Will auto generate when not provided | string | - |
| url | Download url | string | - |
onChange#
The function will be chosen when uploading is in progress, completed or failed.
When uploading state change, it returns:
{ file: { /* ... */ } , fileList: [ /* ... */ ] , event: { /* ... */ } , } -
fileFile object for the electric current operation.{ uid: 'uid' , // unique identifier, negative is recommend, to foreclose interference with internal generated id name: 'xx.png' , // file proper noun condition: 'done' , // options：uploading, done, error, removed. Intercepted file by beforeUpload don't take condition field. response: '{"status": "success"}' , // response from server linkProps: '{"download": "image"}' , // boosted html props of file link xhr: 'XMLHttpRequest{ ... }' , // XMLHttpRequest Header } -
fileListcurrent list of files -
eventresponse from server, including uploading progress, supported by advanced browsers.
FAQ#
How practise I implement upload server side?#
-
You tin can consult jQuery-File-Upload about how to implement server side upload interface.
-
In that location is a mock example of express in rc-upload.
I want to display download links.#
Please prepare belongings url of each detail in fileList to control content of link.
How to utilise customRequest?#
See https://github.com/react-component/upload#customrequest.
Why will the fileList that'southward in control not trigger onChange condition update when the file is not in the list?#
onChange will simply trigger when the file is in the list, it will ignore any events removed from the list. Delight note that in that location does be a bug which makes an event nevertheless trigger even when the file is non in the list earlier iv.thirteen.0.
Why does onChange sometimes return File object and other times return { originFileObj: File }?#
For compatible case, we return File object when beforeUpload return false. It will merge to { originFileObj: File } in next major version. Current version is compatible to get origin file by info.file.originFileObj. You tin can change this before major release.
Source: https://ant.design/components/upload/
0 Response to "Action { { $ Url for Upload } }"
Post a Comment