Why Did a Red Upload Button Appear in My Internet Browser
- Upload by clicking
- Avatar
- Default Files
- Pictures Wall
- Complete control over file list
- Elevate and Drop
- Upload directory
- Upload manually
- Upload png file merely
- Pictures with list style
- Customize preview file
- Max Count
- Transform file before request
- Aliyun OSS
- custom action icon
- Drag sorting of uploadList
- Crop paradigm before uploading
- Customize Progress Bar
- API
Upload
Upload file by selecting or dragging.
When To Use#
Uploading is the procedure of publishing information (web pages, text, pictures, video, etc.) to a remote server via a web page or upload tool.
-
When you need to upload 1 or more than files.
-
When yous need to show the process of uploading.
-
When y'all need to upload files by dragging and dropping.
Examples
Classic mode. File selection dialog pops up when upload push button is clicked.
import { Upload, message, Button } from 'antd' ; import { UploadOutlined } from '@ant-blueprint/icons' ; const props = { name : 'file' , activeness : 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , headers : { authorization : 'authorization-text' , } , onChange ( info ) { if (info.file.status !== 'uploading' ) { console. log (info.file, info.fileList) ; } if (info.file.status === 'washed' ) { bulletin. success ( ` ${info.file.name} file uploaded successfully ` ) ; } else if (info.file.status === 'error' ) { message. mistake ( ` ${info.file.name} file upload failed. ` ) ; } } , } ; ReactDOM. render ( < Upload { ...props} > < Push icon = { < UploadOutlined /> } > Click to Upload </ Push > </ Upload > , mountNode, ) ; Use defaultFileList for uploaded files when page init.
import { Upload, Push button } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; const props = { activeness : 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , onChange ( { file, fileList } ) { if (file.status !== 'uploading' ) { console. log (file, fileList) ; } } , defaultFileList : [ { uid : 'ane' , proper name : 'xxx.png' , status : 'done' , response : 'Server Error 500' , // custom error message to testify url : 'http://www.baidu.com/xxx.png' , } , { uid : '2' , proper noun : 'yyy.png' , condition : 'washed' , url : 'http://www.baidu.com/yyy.png' , } , { uid : 'three' , name : 'zzz.png' , condition : 'error' , response : 'Server Error 500' , // custom mistake message to show url : 'http://www.baidu.com/zzz.png' , } , ] , } ; ReactDOM. render ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > , mountNode, ) ; You can proceeds full control over filelist by configuring fileList. You tin achieve all kinds of customed functions. The following shows 2 circumstances:
-
limit the number of uploaded files.
-
read from response and show file link.
import { Upload, Push button } from 'antd' ; import { UploadOutlined } from '@pismire-pattern/icons' ; class MyUpload extends React.Component { state = { fileList : [ { uid : '-i' , name : '30.png' , status : 'washed' , url : 'http://www.baidu.com/thirty.png' , } , ] , } ; handleChange = info => { let fileList = [ ...info.fileList] ; // i. Limit the number of uploaded files // Only to evidence two recent uploaded files, and old ones volition be replaced by the new fileList = fileList. slice ( - 2 ) ; // 2. Read from response and show file link fileList = fileList. map ( file => { if (file.response) { // Component will evidence file.url as 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 .land.fileList} > < Button icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > ) ; } } ReactDOM. render ( < MyUpload /> , mountNode) ; You lot tin can select and upload a whole directory.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@ant-pattern/icons' ; ReactDOM. render ( < Upload action = "https://www.mocky.io/v2/5cc8019d300000980a055e76" directory > < Button icon = { < UploadOutlined /> } > Upload Directory </ Button > </ Upload > , mountNode, ) ; beforeUpload simply forestall upload behavior when render false or pass up promise, the prevented file would still testify in file listing. Here is the case you can continue prevented files out of list by return UPLOAD.LIST_IGNORE.
import React, { useState } from 'react' ; import { Upload, Button, message } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; const Uploader = ( ) => { const props = { beforeUpload : file => { const isPNG = file.type === 'image/png' ; if ( !isPNG) { bulletin. error ( ` ${file.name} is not a png file ` ) ; } render isPNG || Upload. LIST_IGNORE ; } , onChange : info => { panel. log (info.fileList) ; } , } ; return ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Upload png only </ Push button > </ Upload > ) ; } ; ReactDOM. return ( < Uploader /> , mountNode) ; Customize local preview. Can handle with not-image format files such as video.
import { Upload, Push } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; const props = { action : '//jsonplaceholder.typicode.com/posts/' , listType : 'film' , previewFile ( file ) { console. log ( 'Your upload file:' , file) ; // Your process logic. Here we just mock to the aforementioned file render fetch ( 'https://next.json-generator.com/api/json/get/4ytyBoLK8' , { method : 'Mail' , body : file, } ) . then ( res => res. json ( ) ) . then ( ( { thumbnail } ) => thumbnail) ; } , } ; ReactDOM. render ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > , mountNode, ) ; Utilise beforeUpload for transform file before asking such as add together a watermark.
import { Upload, Push } from 'antd' ; import { UploadOutlined } from '@pismire-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.top = img.naturalHeight; const ctx = canvas. getContext ( '2d' ) ; ctx. drawImage (img, 0 , 0 ) ; ctx.fillStyle = 'red' ; ctx.textBaseline = 'middle' ; ctx.font = '33px Arial' ; ctx. fillText ( 'Ant Blueprint' , 20 , 20 ) ; canvass. toBlob (resolve) ; } ; } ; } ) ; } , } ; ReactDOM. render ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > , mountNode, ) ; Use showUploadList for custom activity icons of files.
import { Upload, Button } from 'antd' ; import { UploadOutlined, StarOutlined } 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 : 'i' , name : 'xxx.png' , condition : 'washed' , response : 'Server Error 500' , // custom fault message to evidence url : 'http://www.baidu.com/xxx.png' , } , { uid : 'ii' , proper name : 'yyy.png' , condition : 'done' , url : 'http://www.baidu.com/yyy.png' , } , { uid : '3' , proper name : 'zzz.png' , status : 'error' , response : 'Server Mistake 500' , // custom error bulletin to evidence url : 'http://world wide web.baidu.com/zzz.png' , } , ] , showUploadList : { showDownloadIcon : true , downloadIcon : 'download ' , showRemoveIcon : true , removeIcon : < StarOutlined onClick = { e => console. log (due east, 'custom removeIcon event' ) } /> , } , } ; ReactDOM. return ( < Upload { ...props} > < Push button 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 : 'epitome.png' , status : '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 = wait new Promise ( resolve => { const reader = new FileReader ( ) ; reader. readAsDataURL (file.originFileObj) ; reader. onload = ( ) => resolve (reader.result) ; } ) ; } const image = new Epitome ( ) ; paradigm.src = src; const imgWindow = window. open up (src) ; imgWindow.document. write (image.outerHTML) ; } ; return ( < ImgCrop rotate > < Upload action = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "flick-card" fileList = {fileList} onChange = {onChange} onPreview = {onPreview} > {fileList.length < 5 && '+ Upload' } </ Upload > </ ImgCrop > ) ; } ; ReactDOM. render ( < Demo /> , mountNode) ; Click to upload user'south avatar, and validate size and format of picture with beforeUpload.
The render value of function
beforeUploadcan be a Promise to check asynchronously. demo
import { Upload, message } from 'antd' ; import { LoadingOutlined, PlusOutlined } from '@ant-design/icons' ; office getBase64 ( img, callback ) { const reader = new FileReader ( ) ; reader. addEventListener ( 'load' , ( ) => callback (reader.upshot) ) ; reader. readAsDataURL (img) ; } part beforeUpload ( file ) { const isJpgOrPng = file.blazon === 'epitome/jpeg' || file.blazon === 'paradigm/png' ; if ( !isJpgOrPng) { message. error ( 'You tin only upload JPG/PNG file!' ) ; } const isLt2M = file.size / 1024 / 1024 < ii ; if ( !isLt2M) { bulletin. error ( 'Prototype must smaller than 2MB!' ) ; } return isJpgOrPng && isLt2M; } form Avatar extends React.Component { country = { loading : simulated , } ; handleChange = info => { if (info.file.status === 'uploading' ) { this . setState ( { loading : true } ) ; return ; } if (info.file.status === 'washed' ) { // Get this url from response in existent world. getBase64 (info.file.originFileObj, imageUrl => this . setState ( { imageUrl, loading : simulated , } ) , ) ; } } ; render ( ) { 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 = { false } 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; tiptop : 128px; } Later users upload moving picture, the thumbnail will be shown in listing. The upload button will disappear when count meets limitation.
import { Upload, Modal } from 'antd' ; import { PlusOutlined } from '@ant-design/icons' ; function getBase64 ( file ) { render new Hope ( ( resolve, reject ) => { const reader = new FileReader ( ) ; reader. readAsDataURL (file) ; reader. onload = ( ) => resolve (reader.result) ; reader. onerror = error => reject (fault) ; } ) ; } class PicturesWall extends React.Component { country = { previewVisible : simulated , previewImage : '' , previewTitle : '' , fileList : [ { uid : '-1' , name : 'image.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-2' , proper name : 'image.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-3' , name : 'image.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-4' , proper name : 'image.png' , status : 'washed' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-xxx' , percent : 50 , name : 'image.png' , condition : 'uploading' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-five' , name : 'image.png' , condition : 'error' , } , ] , } ; handleCancel = ( ) => this . setState ( { previewVisible : false } ) ; 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.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 way = { { marginTop : 8 } } > Upload </div > </div > ) ; render ( < > < Upload action = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "movie-menu" fileList = {fileList} onPreview = { this .handlePreview} onChange = { this .handleChange} > {fileList.length >= viii ? null : uploadButton} </ Upload > < Modal visible = {previewVisible} title = {previewTitle} footer = { null } onCancel = { this .handleCancel} > <img alt = "example" style = { { width : '100%' } } src = {previewImage} /> </ Modal > </ > ) ; } } ReactDOM. return ( < PicturesWall /> , mountNode) ; Click or drag file to this expanse to upload Back up for a single or bulk upload. Strictly prohibit from uploading company information or other band files
Y'all tin can elevate files to a specific surface area, to upload. Alternatively, you can besides upload by selecting.
Nosotros can upload serveral files at once in modern browsers by giving the input the multiple attribute.
import { Upload, bulletin } from 'antd' ; import { InboxOutlined } from '@ant-design/icons' ; const { Dragger } = Upload; const props = { name : 'file' , multiple : true , action : 'https://world wide web.mocky.io/v2/5cc8019d300000980a055e76' , onChange ( info ) { const { status } = info.file; if (status !== 'uploading' ) { panel. log (info.file, info.fileList) ; } if (status === 'done' ) { bulletin. success ( ` ${info.file.name} file uploaded successfully. ` ) ; } else if (status === 'fault' ) { bulletin. error ( ` ${info.file.proper noun} file upload failed. ` ) ; } } , onDrop ( e ) { console. log ( 'Dropped files' , e.dataTransfer.files) ; } , } ; ReactDOM. render ( < Dragger { ...props} > <p className = "emmet-upload-drag-icon" > < InboxOutlined /> </p > <p className = "ant-upload-text" > Click or elevate file to this surface area to upload </p > <p className = "ant-upload-hint" > Back up for a single or bulk upload. Strictly prohibit from uploading visitor data or other ring files </p > </ Dragger > , mountNode, ) ; Upload files manually after beforeUpload returns fake.
import { Upload, Push button, bulletin } from 'antd' ; import { UploadOutlined } from '@pismire-design/icons' ; form Demo extends React.Component { state = { fileList : [ ] , uploading : simulated , } ; handleUpload = ( ) => { const { fileList } = this .state; const formData = new FormData ( ) ; fileList. forEach ( file => { formData. append ( 'files[]' , file) ; } ) ; this . setState ( { uploading : true , } ) ; // You lot can use any AJAX library you like fetch ( 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , { method : 'Mail service' , body : formData, } ) . and then ( res => res. json ( ) ) . then ( ( ) => { this . setState ( { fileList : [ ] , } ) ; message. success ( 'upload successfully.' ) ; } ) . catch ( ( ) => { message. error ( 'upload failed.' ) ; } ) . finally ( ( ) => { this . setState ( { uploading : simulated , } ) ; } ) ; } ; 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 simulated ; } , fileList, } ; return ( < > < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Select File </ Button > </ Upload > < Button type = "master" onClick = { this .handleUpload} disabled = {fileList.length === 0 } loading = {uploading} fashion = { { marginTop : 16 } } > {uploading ? 'Uploading' : 'Commencement Upload' } </ Push > </ > ) ; } } ReactDOM. return ( < Demo /> , mountNode) ; If uploaded file is a picture, the thumbnail tin can be shown. IE8/nine practice non support local thumbnail show. Delight use thumbUrl instead.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@ant-pattern/icons' ; const fileList = [ { uid : '-1' , name : '30.png' , status : 'done' , 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://world wide web.mocky.io/v2/5cc8019d300000980a055e76" listType = "moving picture" defaultFileList = { [ ...fileList] } > < Push button icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > <br /> <br /> < Upload action = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "picture" defaultFileList = { [ ...fileList] } className = "upload-listing-inline" > < Button icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > </ > , mountNode, ) ; /* tile uploaded pictures */ .upload-list-inline .ant-upload-list-item { float : left; width : 200px; margin-correct : 8px; } .upload-listing-inline [grade*='-upload-list-rtl'] .ant-upload-list-item { float : right; } Limit files with maxCount. Will supplant current i when maxCount is i.
import { Upload, Button, Infinite } from 'antd' ; import { UploadOutlined } from '@pismire-pattern/icons' ; ReactDOM. render ( < Space direction = "vertical" mode = { { width : '100%' } } size = "large" > < Upload activeness = "https://world wide web.mocky.io/v2/5cc8019d300000980a055e76" listType = "picture" maxCount = { 1 } > < Push icon = { < UploadOutlined /> } > Upload (Max: 1 ) </ Button > </ Upload > < Upload action = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "motion-picture show" maxCount = { 3 } multiple > < Button icon = { < UploadOutlined /> } > Upload (Max: 3 ) </ Push > </ Upload > </ Space > , mountNode, ) ; Use Aliyun OSS upload example.
import { Form, Upload, bulletin, Push } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; class AliyunOSSUpload extends React.Component { state = { OSSData : { } , } ; async componentDidMount ( ) { await this . init ( ) ; } init = async ( ) => { try { const OSSData = look this . mockGetOSSData ( ) ; this . setState ( { OSSData, } ) ; } take hold of (error) { message. error (fault) ; } } ; // Mock go OSS api // https://assistance.aliyun.com/document_detail/31988.html mockGetOSSData = ( ) => ( { dir : 'user-dir/' , elapse : '1577811661' , host : '//www.mocky.io/v2/5cc8019d300000980a055e76' , accessId : 'c2hhb2RhaG9uZw==' , policy : 'eGl4aWhhaGFrdWt1ZGFkYQ==' , signature : 'ZGFob25nc2hhbw==' , } ) ; onChange = ( { fileList } ) => { const { onChange } = this .props; console. log ( 'Aliyun OSS:' , fileList) ; if (onChange) { onChange ( [ ...fileList] ) ; } } ; onRemove = file => { const { value, onChange } = this .props; const files = value. filter ( v => v.url !== file.url) ; if (onChange) { onChange (files) ; } } ; getExtraData = file => { const { OSSData } = this .country; render { key : file.url, OSSAccessKeyId : OSSData.accessId, policy : OSSData.policy, Signature : OSSData.signature, } ; } ; beforeUpload = async file => { const { OSSData } = this .state; const elapse = OSSData.elapse * one thousand ; if (expire < Engagement. now ( ) ) { expect this . init ( ) ; } const suffix = file.name. slice (file.proper noun. lastIndexOf ( '.' ) ) ; const filename = Date. at present ( ) + suffix; file.url = OSSData.dir + filename; render file; } ; render ( ) { const { value } = this .props; const props = { name : 'file' , fileList : value, action : this .state.OSSData.host, onChange : this .onChange, onRemove : this .onRemove, data : this .getExtraData, beforeUpload : this .beforeUpload, } ; return ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Click to Upload </ Push button > </ Upload > ) ; } } const FormPage = ( ) => ( < Form labelCol = { { span : 4 } } > < Grade.Item label = "Photos" proper name = "photos" > < AliyunOSSUpload /> </ Course.Item > </ Form > ) ; ReactDOM. render ( < FormPage /> , mountNode) ; By using itemRender, we can integrate upload with react-dnd to implement elevate 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 '@ant-design/icons' ; const blazon = 'DragableUploadList' ; const DragableUploadListItem = ( { originNode, moveRow, file, fileList } ) => { const ref = React. useRef ( ) ; const alphabetize = fileList. indexOf (file) ; const [ { isOver, dropClassName } , drop] = useDrop ( { accept : blazon, collect : monitor => { const { index : dragIndex } = monitor. getItem ( ) || { } ; if (dragIndex === alphabetize) { return { } ; } return { isOver : monitor. isOver ( ) , dropClassName : dragIndex < alphabetize ? ' drop-over-downward' : ' drop-over-up' , } ; } , drop : item => { moveRow (detail.index, alphabetize) ; } , } ) ; const [ , drag] = useDrag ( { type, item : { index } , collect : monitor => ( { isDragging : monitor. isDragging ( ) , } ) , } ) ; drop ( elevate (ref) ) ; const errorNode = < Tooltip title = "Upload Mistake" > {originNode.props.children} </ Tooltip > ; return ( <div ref = {ref} className = { ` ant-upload-draggable-list-item ${isOver ? dropClassName : '' } ` } style = { { cursor : 'motion' } } > {file.status === 'error' ? errorNode : originNode} </div > ) ; } ; const DragSortingUpload = ( ) => { const [fileList, setFileList] = useState ( [ { uid : '-1' , name : 'image1.png' , status : 'washed' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-2' , proper name : 'image2.png' , condition : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-3' , name : 'image3.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-4' , name : 'image4.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-5' , name : 'image.png' , status : 'error' , } , ] ) ; const moveRow = useCallback ( ( dragIndex, hoverIndex ) => { const dragRow = fileList[dragIndex] ; setFileList ( update (fileList, { $splice : [ [dragIndex, 1 ] , [hoverIndex, 0 , dragRow] , ] , } ) , ) ; } , [fileList] , ) ; const onChange = ( { fileList : newFileList } ) => { setFileList (newFileList) ; } ; render ( < DndProvider backend = {HTML5Backend} > < Upload activeness = "https://www.mocky.io/v2/5cc8019d300000980a055e76" fileList = {fileList} onChange = {onChange} itemRender = { ( originNode, file, currFileList ) => ( < DragableUploadListItem originNode = {originNode} file = {file} fileList = {currFileList} moveRow = {moveRow} /> ) } > < Button icon = { < UploadOutlined /> } > Click to Upload </ Button > </ Upload > </ DndProvider > ) ; } ; ReactDOM. render ( < DragSortingUpload /> , mountNode) ; #components-upload-demo-drag-sorting .ant-upload-draggable-list-detail { border-acme : 2px dashed rgba ( 0, 0, 0, 0 ) ; border-bottom : 2px dashed rgba ( 0, 0, 0, 0 ) ; } #components-upload-demo-elevate-sorting .ant-upload-draggable-listing-detail.driblet-over-downwards { border-bottom-color : #1890ff ; } #components-upload-demo-drag-sorting .ant-upload-draggable-listing-item.drop-over-upwardly { edge-top-color : #1890ff ; } Utilise progress for customize progress bar.
import { Upload, bulletin, Button } from 'antd' ; import { UploadOutlined } from '@emmet-blueprint/icons' ; const props = { name : 'file' , action : 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , headers : { authority : 'authorisation-text' , } , onChange ( info ) { if (info.file.status !== 'uploading' ) { console. log (info.file, info.fileList) ; } if (info.file.status === 'done' ) { message. success ( ` ${info.file.name} file uploaded successfully ` ) ; } else if (info.file.status === 'error' ) { message. error ( ` ${info.file.name} file upload failed. ` ) ; } } , progress : { strokeColor : { '0%' : '#108ee9' , '100%' : '#87d068' , } , strokeWidth : 3 , format : percent => ` ${ parseFloat (percent. toFixed ( 2 ) ) } % ` , } , } ; ReactDOM. render ( < Upload { ...props} > < Push icon = { < UploadOutlined /> } > Click to Upload </ Button > </ Upload > , mountNode, ) ; API#
| Belongings | Description | Blazon | Default | Version |
|---|---|---|---|---|
| accept | File types that can be accustomed. Run across input accept Attribute | string | - | |
| action | Uploading URL | string | (file) => Hope < string> | - | |
| beforeUpload | Hook function which volition be executed before uploading. Uploading will exist stopped with false or a rejected Hope returned. When returned value is Upload.LIST_IGNORE, the listing of files that accept been uploaded will ignore it. Warning：this part is not supported in IE9 | (file, fileList) => boolean | Hope < File> | Upload.LIST_IGNORE | - | |
| customRequest | Override for the default xhr behavior allowing for additional customization and ability to implement your own XMLHttpRequest | part | - | |
| data | Uploading extra params or part which can return uploading actress params | object | (file) => object | Promise < object> | - | |
| defaultFileList | Default list of files that have been uploaded | object [ ] | - | |
| directory | Support upload whole directory (caniuse) | boolean | imitation | |
| disabled | Disable upload button | boolean | imitation | |
| fileList | List of files that have been uploaded (controlled). Here is a common issue #2423 when using it | UploadFile[ ] | - | |
| headers | Fix request headers, valid above IE10 | object | - | |
| iconRender | Custom show icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - | |
| isImageUrl | Customize if render < img /> in thumbnail | (file: UploadFile) => boolean | (inside implementation) | |
| itemRender | Custom item of uploadList | (originNode: ReactElement, file: UploadFile, fileList: object [ ], actions: { download: function, preview: office, remove: role }) => React.ReactNode | - | four.16.0 |
| listType | Built-in stylesheets, support for iii types: text, picture or picture-card | string | text | |
| maxCount | Limit the number of uploaded files. Volition replace current one when maxCount is 1 | number | - | iv.x.0 |
| method | The http method of upload asking | cord | post | |
| multiple | Whether to support selected multiple file. IE10+ supported. You can select multiple files with CTRL holding down while multiple is set to be true | boolean | fake | |
| proper noun | The proper name of uploading file | string | file | |
| openFileDialogOnClick | Click open file dialog | boolean | true | |
| previewFile | Customize preview file logic | (file: File | Blob) => Hope < dataURL: string> | - | |
| progress | Custom progress bar | ProgressProps (back up type="line" only) | { strokeWidth: two, showInfo: false } | 4.3.0 |
| showUploadList | Whether to show 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 | function: 4.seven.0 |
| withCredentials | The ajax upload with cookie sent | boolean | fake | |
| onChange | A callback office, can be executed when uploading state is changing, see onChange | function | - | |
| onDrop | A callback function executed when files are dragged and dropped into upload area | (outcome: React.DragEvent) => void | - | 4.sixteen.0 |
| onDownload | Click the method to download the file, pass the method to perform the method logic, do not laissez passer the default jump to the new TAB | part(file): void | (Jump to new TAB) | |
| onPreview | A callback role, will be executed when file link or preview icon is clicked | office(file) | - | |
| onRemove | A callback office, volition 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 decline | function(file): boolean | Promise | - |
UploadFile#
Extends File with additional props.
| Holding | Description | Type | Default |
|---|---|---|---|
| proper name | File name | string | - |
| percent | Upload progress per centum | number | - |
| status | Upload condition. Show dissimilar style when configured | error | success | done | uploading | removed | - |
| thumbUrl | Thumb epitome url | cord | - |
| uid | unique id. Will machine generate when not provided | string | - |
| url | Download url | cord | - |
onChange#
The function will be chosen when uploading is in progress, completed or failed.
When uploading state alter, information technology returns:
{ file: { /* ... */ } , fileList: [ /* ... */ ] , effect: { /* ... */ } , } -
fileFile object for the current functioning.{ uid: 'uid' , // unique identifier, negative is recommend, to prevent interference with internal generated id proper name: 'xx.png' , // file name status: 'washed' , // options：uploading, done, mistake, removed. Intercepted file by beforeUpload don't have status field. response: '{"status": "success"}' , // response from server linkProps: '{"download": "image"}' , // additional html props of file link xhr: 'XMLHttpRequest{ ... }' , // XMLHttpRequest Header } -
fileListcurrent listing of files -
upshotresponse from server, including uploading progress, supported past advanced browsers.
FAQ#
How do I implement upload server side?#
-
You can consult jQuery-File-Upload about how to implement server side upload interface.
-
There is a mock example of express in rc-upload.
I want to brandish download links.#
Delight set property url of each item in fileList to control content of link.
How to use customRequest?#
See https://github.com/react-component/upload#customrequest.
Why will the fileList that's in control not trigger onChange status update when the file is not in the list?#
onChange will but trigger when the file is in the list, it will ignore whatsoever events removed from the list. Please notation that there does exist a issues which makes an event notwithstanding trigger even when the file is not in the list before four.thirteen.0.
Why does onChange sometimes render File object and other times render { originFileObj: File }?#
For uniform case, we return File object when beforeUpload render false. Information technology will merge to { originFileObj: File } in next major version. Electric current version is compatible to get origin file by info.file.originFileObj. You can change this before major release.
Source: https://ant.design/components/upload/
Post a Comment for "Why Did a Red Upload Button Appear in My Internet Browser"