Html File Input Upload Multiple Limit Default
- Upload by clicking
- Avatar
- Default Files
- Pictures Wall
- Consummate command over file listing
- Drag and Drop
- Upload directory
- Upload manually
- Upload png file only
- Pictures with list manner
- Customize preview file
- Max Count
- Transform file earlier asking
- Aliyun OSS
- custom action icon
- Drag sorting of uploadList
- Crop epitome earlier uploading
- Customize Progress Bar
- API
Upload
Upload file by selecting or dragging.
When To Apply#
Uploading is the process 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 ane or more files.
-
When you need to show the process of uploading.
-
When you need to upload files past dragging and dropping.
Examples
Classic style. File pick dialog pops up when upload button is clicked.
import { Upload, message, Button } from 'antd' ; import { UploadOutlined } from '@emmet-design/icons' ; const props = { proper name : 'file' , action : '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 === 'done' ) { bulletin. success ( ` ${info.file.name} file uploaded successfully ` ) ; } else if (info.file.condition === 'error' ) { message. error ( ` ${info.file.name} file upload failed. ` ) ; } } , } ; ReactDOM. render ( < Upload { ...props} > < Push icon = { < UploadOutlined /> } > Click to Upload </ Push button > </ Upload > , mountNode, ) ; Use defaultFileList for uploaded files when page init.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@pismire-design/icons' ; const props = { activeness : 'https://world wide web.mocky.io/v2/5cc8019d300000980a055e76' , onChange ( { file, fileList } ) { if (file.status !== 'uploading' ) { console. log (file, fileList) ; } } , defaultFileList : [ { uid : 'i' , name : '30.png' , status : 'done' , response : 'Server Fault 500' , // custom fault message to show url : 'http://world wide web.baidu.com/thirty.png' , } , { uid : 'ii' , name : 'yyy.png' , status : 'done' , url : 'http://www.baidu.com/yyy.png' , } , { uid : '3' , name : 'zzz.png' , status : 'error' , response : 'Server Error 500' , // custom error message to evidence url : 'http://world wide web.baidu.com/zzz.png' , } , ] , } ; ReactDOM. render ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > , mountNode, ) ; You lot can gain total control over filelist by configuring fileList. You tin can accomplish all kinds of customed functions. The post-obit shows ii circumstances:
-
limit the number of uploaded files.
-
read from response and show file link.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; form MyUpload extends React.Component { country = { fileList : [ { uid : '-1' , name : 'xxx.png' , status : 'done' , url : 'http://www.baidu.com/xxx.png' , } , ] , } ; handleChange = info => { permit fileList = [ ...info.fileList] ; // 1. Limit the number of uploaded files // Only to show two recent uploaded files, and onetime 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 show file.url as link file.url = file.response.url; } return file; } ) ; this . setState ( { fileList } ) ; } ; render ( ) { const props = { activeness : 'https://world wide web.mocky.io/v2/5cc8019d300000980a055e76' , onChange : this .handleChange, multiple : truthful , } ; render ( < Upload { ...props} fileList = { this .state.fileList} > < Button icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > ) ; } } ReactDOM. render ( < MyUpload /> , mountNode) ; You lot tin select and upload a whole directory.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; ReactDOM. render ( < Upload action = "https://www.mocky.io/v2/5cc8019d300000980a055e76" directory > < Push button icon = { < UploadOutlined /> } > Upload Directory </ Button > </ Upload > , mountNode, ) ; beforeUpload only prevent upload beliefs when return fake or reject promise, the prevented file would yet show in file list. Here is the example you can keep prevented files out of list by return UPLOAD.LIST_IGNORE.
import React, { useState } from 'react' ; import { Upload, Button, bulletin } from 'antd' ; import { UploadOutlined } from '@pismire-blueprint/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 => { panel. log (info.fileList) ; } , } ; return ( < Upload { ...props} > < Push icon = { < UploadOutlined /> } > Upload png only </ Button > </ Upload > ) ; } ; ReactDOM. render ( < Uploader /> , mountNode) ; Customize local preview. Can handle with non-image format files such as video.
import { Upload, Push button } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; const props = { action : '//jsonplaceholder.typicode.com/posts/' , listType : 'picture' , previewFile ( file ) { panel. log ( 'Your upload file:' , file) ; // Your process logic. Here we just mock to the same file return fetch ( 'https://next.json-generator.com/api/json/get/4ytyBoLK8' , { method : 'POST' , body : file, } ) . then ( res => res. json ( ) ) . so ( ( { thumbnail } ) => thumbnail) ; } , } ; ReactDOM. render ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > , mountNode, ) ; Use beforeUpload for transform file earlier asking such as add a watermark.
import { Upload, Push button } from 'antd' ; import { UploadOutlined } from '@pismire-pattern/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 canvass = certificate. createElement ( 'canvas' ) ; canvas.width = img.naturalWidth; canvas.peak = img.naturalHeight; const ctx = canvas. getContext ( '2d' ) ; ctx. drawImage (img, 0 , 0 ) ; ctx.fillStyle = 'red' ; ctx.textBaseline = 'centre' ; ctx.font = '33px Arial' ; ctx. fillText ( 'Ant Pattern' , twenty , xx ) ; canvas. toBlob (resolve) ; } ; } ; } ) ; } , } ; ReactDOM. return ( < Upload { ...props} > < Push icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > , mountNode, ) ; Utilise showUploadList for custom action icons of files.
import { Upload, Button } from 'antd' ; import { UploadOutlined, StarOutlined } from '@pismire-design/icons' ; const props = { activity : 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , onChange ( { file, fileList } ) { if (file.condition !== 'uploading' ) { panel. log (file, fileList) ; } } , defaultFileList : [ { uid : '1' , proper name : 'xxx.png' , status : 'done' , response : 'Server Error 500' , // custom error message to bear witness url : 'http://world wide web.baidu.com/30.png' , } , { uid : 'two' , name : 'yyy.png' , status : 'done' , url : 'http://www.baidu.com/yyy.png' , } , { uid : 'three' , name : 'zzz.png' , condition : 'error' , response : 'Server Fault 500' , // custom fault message to prove url : 'http://www.baidu.com/zzz.png' , } , ] , showUploadList : { showDownloadIcon : true , downloadIcon : 'download ' , showRemoveIcon : truthful , removeIcon : < StarOutlined onClick = { east => panel. log (e, 'custom removeIcon event' ) } /> , } , } ; ReactDOM. render ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Upload </ Push 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 : '-ane' , proper noun : 'image.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , ] ) ; const onChange = ( { fileList : newFileList } ) => { setFileList (newFileList) ; } ; const onPreview = async file => { permit src = file.url; if ( !src) { src = wait new Promise ( resolve => { const reader = new FileReader ( ) ; reader. readAsDataURL (file.originFileObj) ; reader. onload = ( ) => resolve (reader.event) ; } ) ; } const prototype = new Image ( ) ; image.src = src; const imgWindow = window. open (src) ; imgWindow.document. write (image.outerHTML) ; } ; return ( < ImgCrop rotate > < Upload action = "https://world wide web.mocky.io/v2/5cc8019d300000980a055e76" listType = "picture-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 film with beforeUpload.
The render value of function
beforeUploadcan exist a Hope to cheque asynchronously. demo
import { Upload, message } from 'antd' ; import { LoadingOutlined, PlusOutlined } from '@emmet-design/icons' ; function getBase64 ( img, callback ) { const reader = new FileReader ( ) ; reader. addEventListener ( 'load' , ( ) => callback (reader.issue) ) ; reader. readAsDataURL (img) ; } function beforeUpload ( file ) { const isJpgOrPng = file.blazon === 'image/jpeg' || file.type === 'image/png' ; if ( !isJpgOrPng) { bulletin. error ( 'You tin can only upload JPG/PNG file!' ) ; } const isLt2M = file.size / 1024 / 1024 < two ; if ( !isLt2M) { bulletin. error ( 'Image must smaller than 2MB!' ) ; } render isJpgOrPng && isLt2M; } class Avatar extends React.Component { state = { loading : false , } ; handleChange = info => { if (info.file.status === 'uploading' ) { this . setState ( { loading : true } ) ; return ; } if (info.file.condition === 'done' ) { // Get this url from response in existent world. getBase64 (info.file.originFileObj, imageUrl => this . setState ( { imageUrl, loading : false , } ) , ) ; } } ; return ( ) { const { loading, imageUrl } = this .state; const uploadButton = ( <div > {loading ? < LoadingOutlined /> : < PlusOutlined /> } <div style = { { marginTop : 8 } } > Upload </div > </div > ) ; render ( < Upload name = "avatar" listType = "picture-menu" className = "avatar-uploader" showUploadList = { fake } 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; height : 128px; } Subsequently users upload flick, the thumbnail will be shown in listing. The upload button will disappear when count meets limitation.
import { Upload, Modal } from 'antd' ; import { PlusOutlined } from '@pismire-pattern/icons' ; office getBase64 ( file ) { render new Promise ( ( resolve, reject ) => { const reader = new FileReader ( ) ; reader. readAsDataURL (file) ; reader. onload = ( ) => resolve (reader.result) ; reader. onerror = error => reject (mistake) ; } ) ; } class PicturesWall extends React.Component { state = { previewVisible : false , previewImage : '' , previewTitle : '' , fileList : [ { uid : '-1' , proper noun : 'paradigm.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-two' , 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 noun : 'image.png' , condition : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-xxx' , per centum : 50 , name : 'paradigm.png' , condition : 'uploading' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-5' , name : 'image.png' , status : 'mistake' , } , ] , } ; 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.proper name || file.url. substring (file.url. lastIndexOf ( '/' ) + 1 ) , } ) ; } ; handleChange = ( { fileList } ) => this . setState ( { fileList } ) ; return ( ) { const { previewVisible, previewImage, fileList, previewTitle } = this .state; const uploadButton = ( <div > < PlusOutlined /> <div style = { { marginTop : eight } } > Upload </div > </div > ) ; render ( < > < Upload activeness = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "picture-card" fileList = {fileList} onPreview = { this .handlePreview} onChange = { this .handleChange} > {fileList.length >= 8 ? null : uploadButton} </ Upload > < Modal visible = {previewVisible} title = {previewTitle} footer = { null } onCancel = { this .handleCancel} > <img alt = "instance" style = { { width : '100%' } } src = {previewImage} /> </ Modal > </ > ) ; } } ReactDOM. render ( < PicturesWall /> , mountNode) ; Click or elevate file to this area to upload Support for a single or bulk upload. Strictly prohibit from uploading visitor information or other band files
You tin can drag files to a specific area, to upload. Alternatively, y'all can likewise upload by selecting.
We tin upload serveral files at once in modern 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 name : 'file' , multiple : true , action : 'https://world wide web.mocky.io/v2/5cc8019d300000980a055e76' , onChange ( info ) { const { status } = info.file; if (condition !== 'uploading' ) { console. log (info.file, info.fileList) ; } if (condition === 'done' ) { message. success ( ` ${info.file.proper noun} file uploaded successfully. ` ) ; } else if (status === 'fault' ) { message. mistake ( ` ${info.file.proper name} file upload failed. ` ) ; } } , onDrop ( e ) { console. log ( 'Dropped files' , eastward.dataTransfer.files) ; } , } ; ReactDOM. render ( < Dragger { ...props} > <p className = "ant-upload-drag-icon" > < InboxOutlined /> </p > <p className = "ant-upload-text" > Click or elevate file to this area to upload </p > <p className = "emmet-upload-hint" > Support for a single or bulk upload. Strictly prohibit from uploading company information or other band files </p > </ Dragger > , mountNode, ) ; Upload files manually afterwards beforeUpload returns false.
import { Upload, Push, message } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; class Demo extends React.Component { state = { fileList : [ ] , uploading : false , } ; handleUpload = ( ) => { const { fileList } = this .country; const formData = new FormData ( ) ; fileList. forEach ( file => { formData. append ( 'files[]' , file) ; } ) ; this . setState ( { uploading : truthful , } ) ; // You can use any AJAX library you like fetch ( 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , { method : 'Mail' , body : formData, } ) . and so ( res => res. json ( ) ) . and then ( ( ) => { this . setState ( { fileList : [ ] , } ) ; message. success ( 'upload successfully.' ) ; } ) . take hold of ( ( ) => { message. error ( 'upload failed.' ) ; } ) . finally ( ( ) => { this . setState ( { uploading : false , } ) ; } ) ; } ; render ( ) { const { uploading, fileList } = this .land; const props = { onRemove : file => { this . setState ( country => { const alphabetize = state.fileList. indexOf (file) ; const newFileList = state.fileList. slice ( ) ; newFileList. splice (index, one ) ; return { fileList : newFileList, } ; } ) ; } , beforeUpload : file => { this . setState ( state => ( { fileList : [ ...state.fileList, file] , } ) ) ; return fake ; } , fileList, } ; return ( < > < Upload { ...props} > < Push button icon = { < UploadOutlined /> } > Select File </ Button > </ Upload > < Push type = "master" onClick = { this .handleUpload} disabled = {fileList.length === 0 } loading = {uploading} style = { { marginTop : sixteen } } > {uploading ? 'Uploading' : 'Beginning Upload' } </ Button > </ > ) ; } } ReactDOM. render ( < Demo /> , mountNode) ; If uploaded file is a picture, the thumbnail can exist shown. IE8/9 do not support local thumbnail prove. Please apply thumbUrl instead.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@pismire-design/icons' ; const fileList = [ { uid : '-ane' , proper noun : 'xxx.png' , status : 'washed' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , thumbUrl : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-2' , 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 activeness = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "motion-picture show" defaultFileList = { [ ...fileList] } className = "upload-list-inline" > < Button icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > </ > , mountNode, ) ; /* tile uploaded pictures */ .upload-list-inline .pismire-upload-list-item { float : left; width : 200px; margin-right : viiipx; } .upload-list-inline [grade*='-upload-list-rtl'] .emmet-upload-listing-item { float : right; } Limit files with maxCount. Will supplant current ane when maxCount is 1.
import { Upload, Push button, Infinite } 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 show" maxCount = { one } > < Button icon = { < UploadOutlined /> } > Upload (Max: 1 ) </ Button > </ Upload > < Upload activity = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "picture" maxCount = { three } multiple > < Button icon = { < UploadOutlined /> } > Upload (Max: 3 ) </ Push button > </ Upload > </ Space > , mountNode, ) ; Use Aliyun OSS upload example.
import { Form, Upload, bulletin, Push button } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; grade AliyunOSSUpload extends React.Component { country = { OSSData : { } , } ; async componentDidMount ( ) { await this . init ( ) ; } init = async ( ) => { endeavour { const OSSData = expect this . mockGetOSSData ( ) ; this . setState ( { OSSData, } ) ; } catch (mistake) { message. error (error) ; } } ; // Mock become 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; console. log ( 'Aliyun OSS:' , fileList) ; if (onChange) { onChange ( [ ...fileList] ) ; } } ; onRemove = file => { const { value, onChange } = this .props; const files = value. filter ( 5 => v.url !== file.url) ; if (onChange) { onChange (files) ; } } ; getExtraData = file => { const { OSSData } = this .state; render { central : file.url, OSSAccessKeyId : OSSData.accessId, policy : OSSData.policy, Signature : OSSData.signature, } ; } ; beforeUpload = async file => { const { OSSData } = this .country; const expire = OSSData.elapse * 1000 ; if (expire < Engagement. now ( ) ) { await this . init ( ) ; } const suffix = file.name. piece (file.name. lastIndexOf ( '.' ) ) ; const filename = Date. now ( ) + suffix; file.url = OSSData.dir + filename; return file; } ; render ( ) { const { value } = this .props; const props = { proper noun : 'file' , fileList : value, activity : this .country.OSSData.host, onChange : this .onChange, onRemove : this .onRemove, data : this .getExtraData, beforeUpload : this .beforeUpload, } ; return ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Click to Upload </ Button > </ Upload > ) ; } } const FormPage = ( ) => ( < Course labelCol = { { span : 4 } } > < Course.Item label = "Photos" name = "photos" > < AliyunOSSUpload /> </ Form.Detail > </ Form > ) ; 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, Push, 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-design/icons' ; const type = 'DragableUploadList' ; const DragableUploadListItem = ( { originNode, moveRow, file, fileList } ) => { const ref = React. useRef ( ) ; const index = fileList. indexOf (file) ; const [ { isOver, dropClassName } , drop] = useDrop ( { accept : type, collect : monitor => { const { index : dragIndex } = monitor. getItem ( ) || { } ; if (dragIndex === index) { render { } ; } return { isOver : monitor. isOver ( ) , dropClassName : dragIndex < alphabetize ? ' drib-over-downward' : ' driblet-over-upward' , } ; } , drop : item => { moveRow (item.alphabetize, index) ; } , } ) ; const [ , drag] = useDrag ( { type, particular : { index } , collect : monitor => ( { isDragging : monitor. isDragging ( ) , } ) , } ) ; driblet ( drag (ref) ) ; const errorNode = < Tooltip championship = "Upload Fault" > {originNode.props.children} </ Tooltip > ; return ( <div ref = {ref} className = { ` ant-upload-draggable-list-particular ${isOver ? dropClassName : '' } ` } fashion = { { cursor : 'movement' } } > {file.condition === 'error' ? errorNode : originNode} </div > ) ; } ; const DragSortingUpload = ( ) => { const [fileList, setFileList] = useState ( [ { uid : '-i' , name : 'image1.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-two' , name : 'image2.png' , condition : 'washed' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-iii' , 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 : 'epitome.png' , status : 'mistake' , } , ] ) ; 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) ; } ; 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} /> ) } > < Button icon = { < UploadOutlined /> } > Click to Upload </ Button > </ Upload > </ DndProvider > ) ; } ; ReactDOM. render ( < DragSortingUpload /> , mountNode) ; #components-upload-demo-drag-sorting .ant-upload-draggable-listing-item { border-top : 2px dashed rgba ( 0, 0, 0, 0 ) ; border-bottom : iipx dashed rgba ( 0, 0, 0, 0 ) ; } #components-upload-demo-drag-sorting .ant-upload-draggable-list-item.drop-over-downward { border-bottom-color : #1890ff ; } #components-upload-demo-drag-sorting .ant-upload-draggable-list-item.drib-over-upward { border-top-colour : #1890ff ; } Use progress for customize progress bar.
import { Upload, message, Button } from 'antd' ; import { UploadOutlined } from '@emmet-design/icons' ; const props = { proper name : 'file' , action : 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , headers : { authorization : 'authorization-text' , } , onChange ( info ) { if (info.file.condition !== 'uploading' ) { console. log (info.file, info.fileList) ; } if (info.file.status === 'washed' ) { message. success ( ` ${info.file.proper noun} file uploaded successfully ` ) ; } else if (info.file.status === 'error' ) { message. error ( ` ${info.file.proper noun} 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 </ Push > </ Upload > , mountNode, ) ; API#
| Property | Description | Blazon | Default | Version |
|---|---|---|---|---|
| accept | File types that can exist accepted. Come across input accept Attribute | string | - | |
| action | Uploading URL | cord | (file) => Promise < string> | - | |
| beforeUpload | Hook function which will be executed earlier uploading. Uploading volition be stopped with fake or a rejected Promise returned. When returned value is Upload.LIST_IGNORE, the list of files that have been uploaded will ignore it. Warning：this role 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 ability to implement your own XMLHttpRequest | function | - | |
| information | Uploading extra params or function which can return uploading actress params | object | (file) => object | Hope < object> | - | |
| defaultFileList | Default listing of files that have been uploaded | object [ ] | - | |
| directory | Support upload whole directory (caniuse) | boolean | false | |
| disabled | Disable upload button | boolean | false | |
| fileList | List of files that have been uploaded (controlled). Here is a common consequence #2423 when using it | UploadFile[ ] | - | |
| headers | Set up request headers, valid in a higher place IE10 | object | - | |
| iconRender | Custom testify 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: office, preview: function, remove: part }) => React.ReactNode | - | 4.16.0 |
| listType | Built-in stylesheets, support for iii types: text, motion picture or motion-picture show-card | string | text | |
| maxCount | Limit the number of uploaded files. Will replace current one when maxCount is 1 | number | - | 4.10.0 |
| method | The http method of upload request | string | post | |
| multiple | Whether to back up selected multiple file. IE10+ supported. You can select multiple files with CTRL holding downwards while multiple is gear up to exist truthful | boolean | false | |
| name | The name of uploading file | cord | file | |
| openFileDialogOnClick | Click open up file dialog | boolean | true | |
| previewFile | Customize preview file logic | (file: File | Blob) => Promise < dataURL: string> | - | |
| progress | Custom progress bar | ProgressProps (support type="line" but) | { strokeWidth: two, showInfo: false } | 4.three.0 |
| showUploadList | Whether to show default upload list, 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: 4.seven.0 |
| withCredentials | The ajax upload with cookie sent | boolean | simulated | |
| onChange | A callback function, can be executed when uploading state is changing, see onChange | office | - | |
| onDrop | A callback function executed when files are dragged and dropped into upload area | (upshot: React.DragEvent) => void | - | four.xvi.0 |
| onDownload | Click the method to download the file, pass the method to perform the method logic, practice not laissez passer the default jump to the new TAB | function(file): void | (Jump to new TAB) | |
| onPreview | A callback function, will exist 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 issue will be prevented when return value is false or a Hope which resolve(false) or refuse | function(file): boolean | Promise | - |
UploadFile#
Extends File with additional props.
| Property | Description | Blazon | Default |
|---|---|---|---|
| name | File name | string | - |
| percent | Upload progress percent | number | - |
| condition | Upload status. Prove different mode when configured | mistake | success | done | uploading | removed | - |
| thumbUrl | Pollex image url | string | - |
| uid | unique id. Will motorcar generate when not provided | string | - |
| url | Download url | string | - |
onChange#
The function will be called when uploading is in progress, completed or failed.
When uploading country alter, it returns:
{ file: { /* ... */ } , fileList: [ /* ... */ ] , event: { /* ... */ } , } -
fileFile object for the current operation.{ uid: 'uid' , // unique identifier, negative is recommend, to prevent interference with internal generated id proper name: 'xx.png' , // file proper name status: 'done' , // options：uploading, washed, fault, removed. Intercepted file by beforeUpload don't have status field. response: '{"condition": "success"}' , // response from server linkProps: '{"download": "epitome"}' , // additional html props of file link xhr: 'XMLHttpRequest{ ... }' , // XMLHttpRequest Header } -
fileListelectric current list of files -
resultresponse from server, including uploading progress, supported by 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 instance of limited in rc-upload.
I want to display download links.#
Please 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 volition the fileList that'south in control not trigger onChange condition update when the file is not in the listing?#
onChange will only trigger when the file is in the listing, it will ignore whatever events removed from the listing. Delight note that in that location does exist a bug which makes an event nonetheless trigger fifty-fifty when the file is not in the list before 4.13.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. Electric 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 "Html File Input Upload Multiple Limit Default"
Post a Comment