Upload File and Change to Text File
- Upload by clicking
- Avatar
- Default Files
- Pictures Wall
- Complete command over file list
- Drag and Drop
- Upload directory
- Upload manually
- Upload png file just
- Pictures with list style
- Customize preview file
- Max Count
- Transform file before request
- Aliyun OSS
- custom activity icon
- Drag sorting of uploadList
- Crop image before uploading
- Customize Progress Bar
- API
Upload
Upload file by selecting or dragging.
When To Apply#
Uploading is the process of publishing data (web pages, text, pictures, video, etc.) to a remote server via a web page or upload tool.
-
When y'all demand to upload one or more files.
-
When you need to show the process of uploading.
-
When yous demand to upload files by dragging and dropping.
Examples
Classic manner. 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 = { proper noun : 'file' , activeness : 'https://world wide web.mocky.io/v2/5cc8019d300000980a055e76' , headers : { potency : 'authorization-text' , } , onChange ( info ) { if (info.file.status !== 'uploading' ) { panel. 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} > < Button icon = { < UploadOutlined /> } > Click to Upload </ Push > </ Upload > , mountNode, ) ; Apply defaultFileList for uploaded files when folio init.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@ant-pattern/icons' ; const props = { action : 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , onChange ( { file, fileList } ) { if (file.status !== 'uploading' ) { console. log (file, fileList) ; } } , defaultFileList : [ { uid : 'ane' , name : 'xxx.png' , status : 'done' , response : 'Server Error 500' , // custom error message to show url : 'http://world wide web.baidu.com/xxx.png' , } , { uid : '2' , proper name : 'yyy.png' , status : 'done' , url : 'http://www.baidu.com/yyy.png' , } , { uid : '3' , name : 'zzz.png' , status : 'fault' , response : 'Server Mistake 500' , // custom error message to show url : 'http://www.baidu.com/zzz.png' , } , ] , } ; ReactDOM. render ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > , mountNode, ) ; You lot can proceeds full control over filelist past configuring fileList. You 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, Push button } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; class MyUpload extends React.Component { country = { fileList : [ { uid : '-1' , name : '30.png' , condition : 'done' , url : 'http://world wide web.baidu.com/thirty.png' , } , ] , } ; handleChange = info => { let fileList = [ ...info.fileList] ; // i. Limit the number of uploaded files // But to show two contempo uploaded files, and old ones volition exist replaced by the new fileList = fileList. piece ( - two ) ; // 2. Read from response and show file link fileList = fileList. map ( file => { if (file.response) { // Component will bear witness file.url as 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 , } ; return ( < Upload { ...props} fileList = { this .state.fileList} > < Push icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > ) ; } } ReactDOM. render ( < MyUpload /> , mountNode) ; You tin can select and upload a whole directory.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; ReactDOM. render ( < Upload activity = "https://world wide web.mocky.io/v2/5cc8019d300000980a055e76" directory > < Button icon = { < UploadOutlined /> } > Upload Directory </ Push > </ Upload > , mountNode, ) ; beforeUpload just prevent upload behavior when return false or reject promise, the prevented file would still show in file listing. Here is the instance y'all can keep prevented files out of listing by return UPLOAD.LIST_IGNORE.
import React, { useState } from 'react' ; import { Upload, Button, message } from 'antd' ; import { UploadOutlined } from '@ant-blueprint/icons' ; const Uploader = ( ) => { const props = { beforeUpload : file => { const isPNG = file.type === 'epitome/png' ; if ( !isPNG) { bulletin. error ( ` ${file.proper name} is not a png file ` ) ; } return isPNG || Upload. LIST_IGNORE ; } , onChange : info => { console. log (info.fileList) ; } , } ; return ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Upload png merely </ Button > </ Upload > ) ; } ; ReactDOM. return ( < Uploader /> , mountNode) ; Customize local preview. Can handle with not-image format files such every bit video.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@pismire-blueprint/icons' ; const props = { activeness : '//jsonplaceholder.typicode.com/posts/' , listType : 'picture' , previewFile ( file ) { console. log ( 'Your upload file:' , file) ; // Your process logic. Here we just mock to the aforementioned file return fetch ( 'https://adjacent.json-generator.com/api/json/get/4ytyBoLK8' , { method : 'Postal service' , trunk : file, } ) . then ( res => res. json ( ) ) . then ( ( { thumbnail } ) => thumbnail) ; } , } ; ReactDOM. render ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Upload </ Push button > </ Upload > , mountNode, ) ; Employ beforeUpload for transform file before request such equally add a watermark.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@ant-blueprint/icons' ; const props = { activeness : '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.outcome; img. onload = ( ) => { const canvass = certificate. createElement ( 'canvas' ) ; canvas.width = img.naturalWidth; canvas.top = img.naturalHeight; const ctx = canvas. getContext ( '2nd' ) ; ctx. drawImage (img, 0 , 0 ) ; ctx.fillStyle = 'red' ; ctx.textBaseline = 'middle' ; ctx.font = '33px Arial' ; ctx. fillText ( 'Ant Pattern' , 20 , xx ) ; canvas. toBlob (resolve) ; } ; } ; } ) ; } , } ; ReactDOM. render ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Upload </ Push > </ Upload > , mountNode, ) ; Employ showUploadList for custom action icons of files.
import { Upload, Button } from 'antd' ; import { UploadOutlined, StarOutlined } from '@ant-design/icons' ; const props = { activity : 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , onChange ( { file, fileList } ) { if (file.status !== 'uploading' ) { panel. log (file, fileList) ; } } , defaultFileList : [ { uid : 'one' , name : 'xxx.png' , status : 'done' , response : 'Server Error 500' , // custom mistake message to testify url : 'http://www.baidu.com/thirty.png' , } , { uid : '2' , name : 'yyy.png' , status : 'washed' , url : 'http://www.baidu.com/yyy.png' , } , { uid : 'three' , name : 'zzz.png' , condition : 'error' , response : 'Server Fault 500' , // custom error message to show url : 'http://www.baidu.com/zzz.png' , } , ] , showUploadList : { showDownloadIcon : truthful , downloadIcon : 'download ' , showRemoveIcon : true , removeIcon : < StarOutlined onClick = { e => panel. log (e, 'custom removeIcon event' ) } /> , } , } ; ReactDOM. return ( < 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' , name : 'image.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 = await new Hope ( resolve => { const reader = new FileReader ( ) ; reader. readAsDataURL (file.originFileObj) ; reader. onload = ( ) => resolve (reader.issue) ; } ) ; } const image = new Image ( ) ; epitome.src = src; const imgWindow = window. open (src) ; imgWindow.document. write (image.outerHTML) ; } ; render ( < ImgCrop rotate > < Upload action = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "picture-carte du jour" fileList = {fileList} onChange = {onChange} onPreview = {onPreview} > {fileList.length < five && '+ Upload' } </ Upload > </ ImgCrop > ) ; } ; ReactDOM. render ( < Demo /> , mountNode) ; Click to upload user's avatar, and validate size and format of picture with beforeUpload.
The return value of function
beforeUploadcan be a Hope to bank check asynchronously. demo
import { Upload, message } from 'antd' ; import { LoadingOutlined, PlusOutlined } from '@emmet-design/icons' ; role 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.type === 'image/png' ; if ( !isJpgOrPng) { bulletin. fault ( 'You can just upload JPG/PNG file!' ) ; } const isLt2M = file.size / 1024 / 1024 < 2 ; if ( !isLt2M) { bulletin. error ( 'Image must smaller than 2MB!' ) ; } return isJpgOrPng && isLt2M; } grade Avatar extends React.Component { state = { loading : false , } ; handleChange = info => { if (info.file.status === 'uploading' ) { this . setState ( { loading : true } ) ; return ; } if (info.file.status === '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-card" className = "avatar-uploader" showUploadList = { false } action = "https://www.mocky.io/v2/5cc8019d300000980a055e76" beforeUpload = {beforeUpload} onChange = { this .handleChange} > {imageUrl ? <img src = {imageUrl} alt = "avatar" way = { { width : '100%' } } /> : uploadButton} </ Upload > ) ; } } ReactDOM. render ( < Avatar /> , mountNode) ; .avatar-uploader > .ant-upload { width : 128px; height : 128px; } Later on users upload film, the thumbnail will exist shown in listing. The upload button volition disappear when count meets limitation.
import { Upload, Modal } from 'antd' ; import { PlusOutlined } from '@ant-blueprint/icons' ; function getBase64 ( file ) { return new Promise ( ( resolve, turn down ) => { const reader = new FileReader ( ) ; reader. readAsDataURL (file) ; reader. onload = ( ) => resolve (reader.outcome) ; reader. onerror = error => pass up (fault) ; } ) ; } form PicturesWall extends React.Component { state = { previewVisible : faux , previewImage : '' , previewTitle : '' , fileList : [ { uid : '-1' , name : 'image.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-2' , name : 'image.png' , status : 'washed' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-3' , proper name : 'paradigm.png' , status : '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 : '-xxx' , percent : 50 , proper noun : 'image.png' , condition : 'uploading' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-5' , name : 'paradigm.png' , status : 'error' , } , ] , } ; handleCancel = ( ) => this . setState ( { previewVisible : false } ) ; handlePreview = async file => { if ( !file.url && !file.preview) { file.preview = look getBase64 (file.originFileObj) ; } this . setState ( { previewImage : file.url || file.preview, previewVisible : true , previewTitle : file.proper noun || file.url. substring (file.url. lastIndexOf ( '/' ) + 1 ) , } ) ; } ; handleChange = ( { fileList } ) => this . setState ( { fileList } ) ; render ( ) { const { previewVisible, previewImage, fileList, previewTitle } = this .state; const uploadButton = ( <div > < PlusOutlined /> <div style = { { marginTop : 8 } } > Upload </div > </div > ) ; return ( < > < Upload action = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "flick-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 = "example" style = { { width : '100%' } } src = {previewImage} /> </ Modal > </ > ) ; } } ReactDOM. return ( < PicturesWall /> , mountNode) ; Click or drag file to this area to upload Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files
You can drag files to a specific area, to upload. Alternatively, you lot can also upload by selecting.
We tin upload serveral files at in one case in mod browsers by giving the input the multiple attribute.
import { Upload, message } from 'antd' ; import { InboxOutlined } from '@ant-design/icons' ; const { Dragger } = Upload; const props = { name : 'file' , multiple : true , 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' ) { bulletin. success ( ` ${info.file.name} file uploaded successfully. ` ) ; } else if (status === 'error' ) { message. mistake ( ` ${info.file.name} 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 = "emmet-upload-text" > Click or drag file to this area to upload </p > <p className = "emmet-upload-hint" > Support for a unmarried or bulk upload. Strictly prohibit from uploading visitor data or other ring files </p > </ Dragger > , mountNode, ) ; Upload files manually after beforeUpload returns false.
import { Upload, Push button, bulletin } from 'antd' ; import { UploadOutlined } from '@ant-blueprint/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 : true , } ) ; // You tin can use any AJAX library you lot like fetch ( 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , { method : 'POST' , torso : formData, } ) . then ( res => res. json ( ) ) . then ( ( ) => { this . setState ( { fileList : [ ] , } ) ; message. success ( 'upload successfully.' ) ; } ) . catch ( ( ) => { message. error ( 'upload failed.' ) ; } ) . finally ( ( ) => { this . setState ( { uploading : imitation , } ) ; } ) ; } ; render ( ) { const { uploading, fileList } = this .land; 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} > < Push button icon = { < UploadOutlined /> } > Select File </ Button > </ Upload > < Button type = "primary" onClick = { this .handleUpload} disabled = {fileList.length === 0 } loading = {uploading} fashion = { { marginTop : 16 } } > {uploading ? 'Uploading' : 'Start Upload' } </ Button > </ > ) ; } } ReactDOM. return ( < Demo /> , mountNode) ; If uploaded file is a picture, the thumbnail tin be shown. IE8/9 practice not support local thumbnail bear witness. Delight use thumbUrl instead.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@emmet-design/icons' ; const fileList = [ { uid : '-1' , name : 'thirty.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 : 'error' , } , ] ; ReactDOM. return ( < > < Upload activeness = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "picture show" defaultFileList = { [ ...fileList] } > < Button icon = { < UploadOutlined /> } > Upload </ Push button > </ Upload > <br /> <br /> < Upload activeness = "https://world wide web.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 { bladder : left; width : 200px; margin-right : 8px; } .upload-listing-inline [grade*='-upload-list-rtl'] .pismire-upload-list-detail { float : correct; } Limit files with maxCount. Will supercede current one when maxCount is i.
import { Upload, Button, Space } from 'antd' ; import { UploadOutlined } from '@pismire-design/icons' ; ReactDOM. render ( < Space direction = "vertical" mode = { { width : '100%' } } size = "large" > < Upload activity = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "picture" maxCount = { ane } > < Button icon = { < UploadOutlined /> } > Upload (Max: 1 ) </ Push button > </ Upload > < Upload activeness = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "moving-picture show" maxCount = { iii } multiple > < Button icon = { < UploadOutlined /> } > Upload (Max: 3 ) </ Button > </ Upload > </ Space > , mountNode, ) ; Use Aliyun OSS upload example.
import { Form, Upload, message, Button } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; class AliyunOSSUpload extends React.Component { state = { OSSData : { } , } ; async componentDidMount ( ) { await this . init ( ) ; } init = async ( ) => { try { const OSSData = await this . mockGetOSSData ( ) ; this . setState ( { OSSData, } ) ; } take hold of (error) { message. error (fault) ; } } ; // Mock get OSS api // https://aid.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 ( v => v.url !== file.url) ; if (onChange) { onChange (files) ; } } ; getExtraData = file => { const { OSSData } = this .land; return { key : file.url, OSSAccessKeyId : OSSData.accessId, policy : OSSData.policy, Signature : OSSData.signature, } ; } ; beforeUpload = async file => { const { OSSData } = this .country; const expire = OSSData.elapse * m ; if (expire < Date. now ( ) ) { expect this . init ( ) ; } const suffix = file.proper noun. slice (file.name. lastIndexOf ( '.' ) ) ; const filename = Date. now ( ) + suffix; file.url = OSSData.dir + filename; return file; } ; return ( ) { const { value } = this .props; const props = { name : 'file' , fileList : value, activity : this .state.OSSData.host, onChange : this .onChange, onRemove : this .onRemove, information : this .getExtraData, beforeUpload : this .beforeUpload, } ; return ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Click to Upload </ Button > </ Upload > ) ; } } const FormPage = ( ) => ( < Form labelCol = { { span : 4 } } > < Grade.Particular label = "Photos" name = "photos" > < AliyunOSSUpload /> </ Class.Item > </ Form > ) ; ReactDOM. render ( < FormPage /> , mountNode) ; Past using itemRender, nosotros tin 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 '@pismire-pattern/icons' ; const type = 'DragableUploadList' ; const DragableUploadListItem = ( { originNode, moveRow, file, fileList } ) => { const ref = React. useRef ( ) ; const index = fileList. indexOf (file) ; const [ { isOver, dropClassName } , driblet] = useDrop ( { accept : type, collect : monitor => { const { index : dragIndex } = monitor. getItem ( ) || { } ; if (dragIndex === alphabetize) { return { } ; } return { isOver : monitor. isOver ( ) , dropClassName : dragIndex < alphabetize ? ' drop-over-downward' : ' drop-over-upward' , } ; } , drop : item => { moveRow (item.index, index) ; } , } ) ; const [ , drag] = useDrag ( { type, item : { alphabetize } , collect : monitor => ( { isDragging : monitor. isDragging ( ) , } ) , } ) ; drib ( elevate (ref) ) ; const errorNode = < Tooltip title = "Upload Mistake" > {originNode.props.children} </ Tooltip > ; return ( <div ref = {ref} className = { ` ant-upload-draggable-list-item ${isOver ? dropClassName : '' } ` } fashion = { { cursor : 'motion' } } > {file.condition === 'error' ? errorNode : originNode} </div > ) ; } ; const DragSortingUpload = ( ) => { const [fileList, setFileList] = useState ( [ { uid : '-1' , name : 'image1.png' , condition : 'washed' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-two' , name : 'image2.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-three' , name : 'image3.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-iv' , name : 'image4.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-5' , name : 'image.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 </ Button > </ Upload > </ DndProvider > ) ; } ; ReactDOM. render ( < DragSortingUpload /> , mountNode) ; #components-upload-demo-drag-sorting .emmet-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.driblet-over-down { border-bottom-color : #1890ff ; } #components-upload-demo-drag-sorting .ant-upload-draggable-list-detail.driblet-over-up { border-top-color : #1890ff ; } Utilize progress for customize progress bar.
import { Upload, message, Button } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; const props = { name : 'file' , action : 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , headers : { say-so : 'say-so-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' ) { bulletin. error ( ` ${info.file.name} file upload failed. ` ) ; } } , progress : { strokeColor : { '0%' : '#108ee9' , '100%' : '#87d068' , } , strokeWidth : 3 , format : per centum => ` ${ parseFloat (percent. toFixed ( 2 ) ) } % ` , } , } ; ReactDOM. render ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Click to Upload </ Push button > </ Upload > , mountNode, ) ; API#
| Property | Description | Blazon | Default | Version |
|---|---|---|---|---|
| take | File types that tin be accepted. See input accept Attribute | string | - | |
| activity | Uploading URL | string | (file) => Promise < string> | - | |
| beforeUpload | Hook function which will be executed before uploading. Uploading will exist stopped with false or a rejected Hope returned. When returned value is Upload.LIST_IGNORE, the list of files that have been uploaded will ignore information technology. Warning：this function is not supported in IE9 | (file, fileList) => boolean | Promise < File> | Upload.LIST_IGNORE | - | |
| customRequest | Override for the default xhr beliefs allowing for additional customization and ability to implement your ain XMLHttpRequest | function | - | |
| information | Uploading extra params or function which can return uploading extra 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 | false | |
| fileList | List of files that accept been uploaded (controlled). Here is a common issue #2423 when using it | UploadFile[ ] | - | |
| headers | Set request headers, valid above 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: function, preview: office, remove: function }) => React.ReactNode | - | 4.16.0 |
| listType | Built-in stylesheets, back up for iii types: text, flick or picture-menu | cord | text | |
| maxCount | Limit the number of uploaded files. Will supersede current one when maxCount is ane | number | - | iv.ten.0 |
| method | The http method of upload request | string | post | |
| multiple | Whether to support selected multiple file. IE10+ supported. You can select multiple files with CTRL holding down while multiple is set up to be truthful | boolean | imitation | |
| name | The name of uploading file | string | file | |
| openFileDialogOnClick | Click open file dialog | boolean | true | |
| previewFile | Customize preview file logic | (file: File | Blob) => Promise < dataURL: cord> | - | |
| progress | Custom progress bar | ProgressProps (support type="line" simply) | { strokeWidth: 2, showInfo: false } | 4.3.0 |
| showUploadList | Whether to evidence 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 | office: four.7.0 |
| withCredentials | The ajax upload with cookie sent | boolean | faux | |
| onChange | A callback part, can exist executed when uploading country is changing, encounter onChange | function | - | |
| onDrop | A callback function executed when files are dragged and dropped into upload surface area | (event: React.DragEvent) => void | - | four.16.0 |
| onDownload | Click the method to download the file, pass the method to perform the method logic, do non pass the default jump to the new TAB | part(file): void | (Jump to new TAB) | |
| onPreview | A callback office, will be executed when file link or preview icon is clicked | role(file) | - | |
| onRemove | A callback function, will exist executed when removing file button is clicked, remove event will be prevented when render value is imitation or a Hope which resolve(false) or pass up | function(file): boolean | Promise | - |
UploadFile#
Extends File with additional props.
| Property | Description | Type | Default |
|---|---|---|---|
| name | File name | cord | - |
| pct | Upload progress percent | number | - |
| status | Upload status. Show different style when configured | error | success | done | uploading | removed | - |
| thumbUrl | Thumb image url | cord | - |
| uid | unique id. Will auto generate when non provided | string | - |
| url | Download url | string | - |
onChange#
The function will be called when uploading is in progress, completed or failed.
When uploading state change, it returns:
{ file: { /* ... */ } , fileList: [ /* ... */ ] , effect: { /* ... */ } , } -
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 name condition: 'done' , // options：uploading, done, error, removed. Intercepted file past beforeUpload don't have condition field. response: '{"status": "success"}' , // response from server linkProps: '{"download": "image"}' , // 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 exercise I implement upload server side?#
-
You lot can consult jQuery-File-Upload most how to implement server side upload interface.
-
In that location is a mock instance of express in rc-upload.
I want to display download links.#
Delight gear up property url of each particular in fileList to control content of link.
How to employ customRequest?#
Run into https://github.com/react-component/upload#customrequest.
Why volition the fileList that's in control not trigger onChange condition update when the file is not in the list?#
onChange will just trigger when the file is in the list, it will ignore whatever events removed from the list. Please note that at that place does exist a bug which makes an event still trigger even 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. Information technology will merge to { originFileObj: File } in next major version. Current version is compatible to get origin file past info.file.originFileObj. You lot tin change this before major release.
batistafrenjudipt.blogspot.com
Source: https://ant.design/components/upload/
0 Response to "Upload File and Change to Text File"
Post a Comment