Element Ui Upload press Delete to Remove
- Upload past clicking
- Avatar
- Default Files
- Pictures Wall
- Complete control over file list
- Elevate and Drib
- Upload directory
- Upload manually
- Upload png file only
- Pictures with list style
- Customize preview file
- Max Count
- Transform file before request
- Aliyun OSS
- custom action icon
- Elevate sorting of uploadList
- Crop image before uploading
- Customize Progress Bar
- API
Upload
Upload file by selecting or dragging.
When To Employ#
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 yous demand to upload one or more files.
-
When you need to show the process of uploading.
-
When you lot need to upload files by dragging and dropping.
Examples
Classic manner. File selection dialog pops up when upload button is clicked.
import { Upload, message, Button } from 'antd' ; import { UploadOutlined } from '@pismire-design/icons' ; const props = { name : 'file' , action : 'https://world wide web.mocky.io/v2/5cc8019d300000980a055e76' , headers : { authorization : 'authorization-text' , } , onChange ( info ) { if (info.file.status !== 'uploading' ) { console. log (info.file, info.fileList) ; } if (info.file.condition === 'washed' ) { bulletin. success ( ` ${info.file.proper name} file uploaded successfully ` ) ; } else if (info.file.status === 'error' ) { message. mistake ( ` ${info.file.proper name} file upload failed. ` ) ; } } , } ; ReactDOM. render ( < Upload { ...props} > < Push icon = { < UploadOutlined /> } > Click to Upload </ Button > </ Upload > , mountNode, ) ; Use defaultFileList for uploaded files when folio init.
import { Upload, Push } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; const props = { activity : 'https://world wide web.mocky.io/v2/5cc8019d300000980a055e76' , onChange ( { file, fileList } ) { if (file.condition !== 'uploading' ) { console. log (file, fileList) ; } } , defaultFileList : [ { uid : 'ane' , name : 'xxx.png' , condition : 'done' , response : 'Server Mistake 500' , // custom error message to show url : 'http://world wide web.baidu.com/xxx.png' , } , { uid : '2' , name : 'yyy.png' , status : 'done' , url : 'http://www.baidu.com/yyy.png' , } , { uid : '3' , name : 'zzz.png' , status : 'mistake' , response : 'Server Error 500' , // custom fault message to bear witness url : 'http://www.baidu.com/zzz.png' , } , ] , } ; ReactDOM. render ( < Upload { ...props} > < Push icon = { < UploadOutlined /> } > Upload </ Push button > </ Upload > , mountNode, ) ; You can gain full command over filelist past configuring fileList. Y'all tin can accomplish all kinds of customed functions. The following shows two circumstances:
-
limit the number of uploaded files.
-
read from response and show file link.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@emmet-design/icons' ; grade MyUpload extends React.Component { country = { fileList : [ { uid : '-ane' , proper noun : 'xxx.png' , status : 'washed' , url : 'http://www.baidu.com/xxx.png' , } , ] , } ; handleChange = info => { allow fileList = [ ...info.fileList] ; // one. Limit the number of uploaded files // Only to bear witness two recent uploaded files, and quondam ones will be replaced past the new fileList = fileList. piece ( - two ) ; // 2. Read from response and show 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://www.mocky.io/v2/5cc8019d300000980a055e76' , onChange : this .handleChange, multiple : true , } ; render ( < Upload { ...props} fileList = { this .land.fileList} > < Push button icon = { < UploadOutlined /> } > Upload </ Push > </ Upload > ) ; } } ReactDOM. render ( < MyUpload /> , mountNode) ; You tin can select and upload a whole directory.
import { Upload, Push button } from 'antd' ; import { UploadOutlined } from '@ant-blueprint/icons' ; ReactDOM. render ( < Upload activity = "https://www.mocky.io/v2/5cc8019d300000980a055e76" directory > < Push icon = { < UploadOutlined /> } > Upload Directory </ Button > </ Upload > , mountNode, ) ; beforeUpload only forestall upload beliefs when return false or reject promise, the prevented file would still show in file list. Here is the instance you can keep prevented files out of list by render UPLOAD.LIST_IGNORE.
import React, { useState } from 'react' ; import { Upload, Push, message } from 'antd' ; import { UploadOutlined } from '@emmet-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 ` ) ; } render isPNG || Upload. LIST_IGNORE ; } , onChange : info => { console. log (info.fileList) ; } , } ; return ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Upload png but </ Button > </ Upload > ) ; } ; ReactDOM. render ( < Uploader /> , mountNode) ; Customize local preview. Can handle with non-paradigm format files such as video.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; const props = { action : '//jsonplaceholder.typicode.com/posts/' , listType : 'flick' , previewFile ( file ) { panel. log ( 'Your upload file:' , file) ; // Your process logic. Here we just mock to the same file render fetch ( 'https://adjacent.json-generator.com/api/json/get/4ytyBoLK8' , { method : 'Mail service' , body : file, } ) . then ( res => res. json ( ) ) . then ( ( { thumbnail } ) => thumbnail) ; } , } ; ReactDOM. return ( < Upload { ...props} > < Push button icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > , mountNode, ) ; Use beforeUpload for transform file before request such as add together a watermark.
import { Upload, Push } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; const props = { action : 'https://world wide web.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 = document. createElement ( 'sheet' ) ; canvas.width = img.naturalWidth; canvass.acme = img.naturalHeight; const ctx = canvass. getContext ( 'second' ) ; ctx. drawImage (img, 0 , 0 ) ; ctx.fillStyle = 'red' ; ctx.textBaseline = 'middle' ; ctx.font = '33px Arial' ; ctx. fillText ( 'Pismire Design' , 20 , 20 ) ; canvas. toBlob (resolve) ; } ; } ; } ) ; } , } ; ReactDOM. return ( < Upload { ...props} > < Button 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 = { activeness : 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , onChange ( { file, fileList } ) { if (file.status !== 'uploading' ) { console. log (file, fileList) ; } } , defaultFileList : [ { uid : 'i' , proper name : '30.png' , status : 'washed' , response : 'Server Mistake 500' , // custom error message to prove url : 'http://www.baidu.com/xxx.png' , } , { uid : 'two' , name : 'yyy.png' , status : 'washed' , url : 'http://www.baidu.com/yyy.png' , } , { uid : '3' , proper noun : 'zzz.png' , condition : 'error' , response : 'Server Mistake 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} > < 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 : '-1' , proper noun : 'epitome.png' , status : 'washed' , 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 = look new Promise ( resolve => { const reader = new FileReader ( ) ; reader. readAsDataURL (file.originFileObj) ; reader. onload = ( ) => resolve (reader.outcome) ; } ) ; } const image = new Image ( ) ; paradigm.src = src; const imgWindow = window. open (src) ; imgWindow.document. write (paradigm.outerHTML) ; } ; render ( < ImgCrop rotate > < Upload activeness = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "moving picture-carte du jour" 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 return value of function
beforeUploadtin can exist a Promise to check asynchronously. demo
import { Upload, bulletin } from 'antd' ; import { LoadingOutlined, PlusOutlined } from '@ant-design/icons' ; function getBase64 ( img, callback ) { const reader = new FileReader ( ) ; reader. addEventListener ( 'load' , ( ) => callback (reader.result) ) ; reader. readAsDataURL (img) ; } function beforeUpload ( file ) { const isJpgOrPng = file.type === 'image/jpeg' || file.blazon === 'image/png' ; if ( !isJpgOrPng) { message. fault ( 'You can but upload JPG/PNG file!' ) ; } const isLt2M = file.size / 1024 / 1024 < 2 ; if ( !isLt2M) { message. error ( 'Image must smaller than 2MB!' ) ; } return isJpgOrPng && isLt2M; } class Avatar extends React.Component { state = { loading : false , } ; handleChange = info => { if (info.file.condition === 'uploading' ) { this . setState ( { loading : truthful } ) ; return ; } if (info.file.condition === 'done' ) { // Get this url from response in real globe. getBase64 (info.file.originFileObj, imageUrl => this . setState ( { imageUrl, loading : false , } ) , ) ; } } ; 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 show-card" className = "avatar-uploader" showUploadList = { false } action = "https://world wide web.mocky.io/v2/5cc8019d300000980a055e76" beforeUpload = {beforeUpload} onChange = { this .handleChange} > {imageUrl ? <img src = {imageUrl} alt = "avatar" mode = { { width : '100%' } } /> : uploadButton} </ Upload > ) ; } } ReactDOM. render ( < Avatar /> , mountNode) ; .avatar-uploader > .ant-upload { width : 128px; height : 128px; } After users upload picture, the thumbnail will be shown in list. The upload push will disappear when count meets limitation.
import { Upload, Modal } from 'antd' ; import { PlusOutlined } from '@pismire-design/icons' ; role getBase64 ( file ) { return new Hope ( ( resolve, turn down ) => { const reader = new FileReader ( ) ; reader. readAsDataURL (file) ; reader. onload = ( ) => resolve (reader.result) ; reader. onerror = error => turn down (error) ; } ) ; } course PicturesWall extends React.Component { land = { previewVisible : false , previewImage : '' , previewTitle : '' , fileList : [ { uid : '-1' , name : 'image.png' , status : 'washed' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-2' , proper name : 'epitome.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-three' , name : 'image.png' , condition : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-4' , name : 'image.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-30' , percent : 50 , name : 'image.png' , status : 'uploading' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-5' , name : 'image.png' , status : '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 : truthful , previewTitle : file.proper name || file.url. substring (file.url. lastIndexOf ( '/' ) + ane ) , } ) ; } ; handleChange = ( { fileList } ) => this . setState ( { fileList } ) ; render ( ) { const { previewVisible, previewImage, fileList, previewTitle } = this .state; const uploadButton = ( <div > < PlusOutlined /> <div mode = { { marginTop : eight } } > Upload </div > </div > ) ; return ( < > < Upload activity = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "pic-carte du jour" fileList = {fileList} onPreview = { this .handlePreview} onChange = { this .handleChange} > {fileList.length >= 8 ? null : uploadButton} </ Upload > < Modal visible = {previewVisible} title = {previewTitle} footer = { naught } onCancel = { this .handleCancel} > <img alt = "instance" style = { { width : '100%' } } src = {previewImage} /> </ Modal > </ > ) ; } } ReactDOM. return ( < PicturesWall /> , mountNode) ; Click or elevate file to this area to upload Support for a unmarried or bulk upload. Strictly prohibit from uploading company data or other band files
You can drag files to a specific surface area, to upload. Alternatively, y'all can also upload by selecting.
Nosotros can upload serveral files at once in modern browsers past giving the input the multiple attribute.
import { Upload, message } from 'antd' ; import { InboxOutlined } from '@ant-blueprint/icons' ; const { Dragger } = Upload; const props = { name : 'file' , multiple : truthful , action : 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , onChange ( info ) { const { condition } = info.file; if (status !== 'uploading' ) { console. log (info.file, info.fileList) ; } if (status === 'done' ) { message. success ( ` ${info.file.name} file uploaded successfully. ` ) ; } else if (status === 'fault' ) { bulletin. error ( ` ${info.file.name} file upload failed. ` ) ; } } , onDrop ( e ) { console. log ( 'Dropped files' , e.dataTransfer.files) ; } , } ; ReactDOM. render ( < Dragger { ...props} > <p className = "ant-upload-drag-icon" > < InboxOutlined /> </p > <p className = "ant-upload-text" > Click or drag file to this expanse to upload </p > <p className = "ant-upload-hint" > Support for a single or majority upload. Strictly prohibit from uploading company information or other ring files </p > </ Dragger > , mountNode, ) ; Upload files manually subsequently beforeUpload returns false.
import { Upload, Push button, 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. suspend ( 'files[]' , file) ; } ) ; this . setState ( { uploading : true , } ) ; // You tin utilize any AJAX library you like fetch ( 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , { method : 'Mail' , body : formData, } ) . and so ( res => res. json ( ) ) . then ( ( ) => { this . setState ( { fileList : [ ] , } ) ; bulletin. success ( 'upload successfully.' ) ; } ) . catch ( ( ) => { bulletin. error ( 'upload failed.' ) ; } ) . finally ( ( ) => { this . setState ( { uploading : fake , } ) ; } ) ; } ; return ( ) { const { uploading, fileList } = this .state; const props = { onRemove : file => { this . setState ( state => { const index = land.fileList. indexOf (file) ; const newFileList = state.fileList. slice ( ) ; newFileList. splice (index, 1 ) ; return { fileList : newFileList, } ; } ) ; } , beforeUpload : file => { this . setState ( state => ( { fileList : [ ...state.fileList, file] , } ) ) ; return false ; } , fileList, } ; render ( < > < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Select File </ Push > </ Upload > < Button type = "primary" onClick = { this .handleUpload} disabled = {fileList.length === 0 } loading = {uploading} style = { { marginTop : 16 } } > {uploading ? 'Uploading' : 'Commencement Upload' } </ Button > </ > ) ; } } ReactDOM. return ( < Demo /> , mountNode) ; If uploaded file is a motion picture, the thumbnail tin be shown. IE8/9 exercise not back up local thumbnail show. Please use thumbUrl instead.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@pismire-design/icons' ; const fileList = [ { uid : '-1' , proper noun : 'xxx.png' , condition : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , thumbUrl : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-ii' , proper noun : 'yyy.png' , condition : 'fault' , } , ] ; ReactDOM. return ( < > < Upload activeness = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "moving picture" defaultFileList = { [ ...fileList] } > < Button icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > <br /> <br /> < Upload action = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "moving-picture show" defaultFileList = { [ ...fileList] } className = "upload-list-inline" > < Button icon = { < UploadOutlined /> } > Upload </ 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-item { float : right; } Limit files with maxCount. Will supplant electric current one when maxCount is one.
import { Upload, Button, Space } from 'antd' ; import { UploadOutlined } from '@pismire-design/icons' ; ReactDOM. render ( < Space direction = "vertical" style = { { width : '100%' } } size = "large" > < Upload activeness = "https://world wide web.mocky.io/v2/5cc8019d300000980a055e76" listType = "picture" maxCount = { i } > < Button icon = { < UploadOutlined /> } > Upload (Max: 1 ) </ Push button > </ Upload > < Upload action = "https://world wide web.mocky.io/v2/5cc8019d300000980a055e76" listType = "flick" maxCount = { 3 } multiple > < Button icon = { < UploadOutlined /> } > Upload (Max: 3 ) </ Button > </ Upload > </ Space > , mountNode, ) ; Employ Aliyun OSS upload instance.
import { Course, Upload, message, Button } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; class AliyunOSSUpload extends React.Component { state = { OSSData : { } , } ; async componentDidMount ( ) { await this . init ( ) ; } init = async ( ) => { attempt { const OSSData = await this . mockGetOSSData ( ) ; this . setState ( { OSSData, } ) ; } catch (error) { message. error (error) ; } } ; // Mock go OSS api // https://help.aliyun.com/document_detail/31988.html mockGetOSSData = ( ) => ( { dir : 'user-dir/' , expire : '1577811661' , host : '//world wide web.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 => 5.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 .land; const expire = OSSData.expire * 1000 ; if (expire < Engagement. at present ( ) ) { await this . init ( ) ; } const suffix = file.name. slice (file.name. lastIndexOf ( '.' ) ) ; const filename = Engagement. now ( ) + suffix; file.url = OSSData.dir + filename; render file; } ; render ( ) { const { value } = this .props; const props = { name : 'file' , fileList : value, action : this .land.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 = ( ) => ( < Form labelCol = { { span : 4 } } > < Grade.Item label = "Photos" name = "photos" > < AliyunOSSUpload /> </ Grade.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 '@ant-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 : blazon, collect : monitor => { const { index : dragIndex } = monitor. getItem ( ) || { } ; if (dragIndex === alphabetize) { return { } ; } render { isOver : monitor. isOver ( ) , dropClassName : dragIndex < index ? ' drop-over-downward' : ' drop-over-upward' , } ; } , drop : item => { moveRow (item.index, alphabetize) ; } , } ) ; const [ , drag] = useDrag ( { type, item : { index } , collect : monitor => ( { isDragging : monitor. isDragging ( ) , } ) , } ) ; driblet ( drag (ref) ) ; const errorNode = < Tooltip title = "Upload Error" > {originNode.props.children} </ Tooltip > ; return ( <div ref = {ref} className = { ` pismire-upload-draggable-list-item ${isOver ? dropClassName : '' } ` } mode = { { cursor : 'move' } } > {file.status === 'error' ? errorNode : originNode} </div > ) ; } ; const DragSortingUpload = ( ) => { const [fileList, setFileList] = useState ( [ { uid : '-1' , name : 'image1.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-2' , name : 'image2.png' , condition : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-3' , name : 'image3.png' , status : 'washed' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-four' , proper noun : 'image4.png' , status : 'washed' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-5' , name : 'prototype.png' , status : 'fault' , } , ] ) ; 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 </ Push button > </ Upload > </ DndProvider > ) ; } ; ReactDOM. return ( < DragSortingUpload /> , mountNode) ; #components-upload-demo-drag-sorting .ant-upload-draggable-listing-item { edge-top : 2px dashed rgba ( 0, 0, 0, 0 ) ; border-bottom : iipx dashed rgba ( 0, 0, 0, 0 ) ; } #components-upload-demo-elevate-sorting .ant-upload-draggable-listing-item.drop-over-downward { border-lesser-colour : #1890ff ; } #components-upload-demo-drag-sorting .ant-upload-draggable-list-item.driblet-over-up { border-top-color : #1890ff ; } Use progress for customize progress bar.
import { Upload, message, Push button } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; const props = { name : 'file' , action : 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , headers : { say-so : 'authorisation-text' , } , onChange ( info ) { if (info.file.status !== 'uploading' ) { console. log (info.file, info.fileList) ; } if (info.file.condition === 'done' ) { message. success ( ` ${info.file.proper name} file uploaded successfully ` ) ; } else if (info.file.status === 'error' ) { message. fault ( ` ${info.file.name} file upload failed. ` ) ; } } , progress : { strokeColor : { '0%' : '#108ee9' , '100%' : '#87d068' , } , strokeWidth : 3 , format : per centum => ` ${ parseFloat (percent. toFixed ( two ) ) } % ` , } , } ; ReactDOM. render ( < Upload { ...props} > < Push icon = { < UploadOutlined /> } > Click to Upload </ Button > </ Upload > , mountNode, ) ; API#
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| accept | File types that tin can be accepted. Encounter input have Aspect | string | - | |
| action | Uploading URL | cord | (file) => Hope < string> | - | |
| beforeUpload | Hook role which will exist executed earlier uploading. Uploading will be stopped with false or a rejected Hope returned. When returned value is Upload.LIST_IGNORE, the list of files that have been uploaded volition ignore it. Alert：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 ain XMLHttpRequest | function | - | |
| data | Uploading actress params or office which tin return uploading extra params | object | (file) => object | Promise < object> | - | |
| defaultFileList | Default listing of files that have been uploaded | object [ ] | - | |
| directory | Support upload whole directory (caniuse) | boolean | fake | |
| disabled | Disable upload button | boolean | false | |
| fileList | Listing of files that have been uploaded (controlled). Here is a common consequence #2423 when using it | UploadFile[ ] | - | |
| headers | Prepare 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: role, preview: role, remove: function }) => React.ReactNode | - | iv.16.0 |
| listType | Born stylesheets, support for 3 types: text, pic or picture-card | string | text | |
| maxCount | Limit the number of uploaded files. Will replace current one when maxCount is 1 | number | - | 4.ten.0 |
| method | The http method of upload asking | string | post | |
| multiple | Whether to support selected multiple file. IE10+ supported. You can select multiple files with CTRL property down while multiple is set to be true | boolean | faux | |
| name | The proper name of uploading file | string | file | |
| openFileDialogOnClick | Click open up file dialog | boolean | true | |
| previewFile | Customize preview file logic | (file: File | Blob) => Hope < dataURL: string> | - | |
| progress | Custom progress bar | ProgressProps (support type="line" simply) | { strokeWidth: 2, showInfo: fake } | 4.3.0 |
| showUploadList | Whether to bear witness 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 | function: four.7.0 |
| withCredentials | The ajax upload with cookie sent | boolean | false | |
| onChange | A callback function, tin can exist executed when uploading state is changing, see onChange | function | - | |
| onDrop | A callback function executed when files are dragged and dropped into upload area | (event: React.DragEvent) => void | - | four.16.0 |
| onDownload | Click the method to download the file, laissez passer the method to perform the method logic, practice not laissez passer the default leap to the new TAB | function(file): void | (Jump to new TAB) | |
| onPreview | A callback role, 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 simulated or a Promise which resolve(imitation) or refuse | function(file): boolean | Promise | - |
UploadFile#
Extends File with boosted props.
| Property | Description | Type | Default |
|---|---|---|---|
| name | File name | cord | - |
| percentage | Upload progress percentage | number | - |
| status | Upload status. Show dissimilar manner when configured | error | success | done | uploading | removed | - |
| thumbUrl | Thumb image url | string | - |
| uid | unique id. Will auto generate when non provided | string | - |
| url | Download url | string | - |
onChange#
The function will exist chosen when uploading is in progress, completed or failed.
When uploading land modify, 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 noun: '20.png' , // file name condition: 'done' , // options：uploading, done, mistake, removed. Intercepted file past beforeUpload don't have status field. response: '{"status": "success"}' , // response from server linkProps: '{"download": "epitome"}' , // additional 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 practice I implement upload server side?#
-
You tin consult jQuery-File-Upload most how to implement server side upload interface.
-
There is a mock example of express in rc-upload.
I want to display download links.#
Please set belongings url of each particular in fileList to control content of link.
How to apply 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 any events removed from the list. Delight note that there does exist a issues which makes an result 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 uniform example, we return File object when beforeUpload return false. It will merge to { originFileObj: File } in next major version. Current version is uniform to get origin file by info.file.originFileObj. You tin change this earlier major release.
cochrannortrinter.blogspot.com
Source: https://ant.design/components/upload/
0 Response to "Element Ui Upload press Delete to Remove"
Post a Comment