How To Upload A Picture Url
- Upload by clicking
- Avatar
- Default Files
- Pictures Wall
- Complete command over file list
- Drag and Drop
- Upload directory
- Upload manually
- Upload png file merely
- Pictures with list way
- Customize preview file
- Max Count
- Transform file earlier asking
- Aliyun OSS
- custom action icon
- Drag sorting of uploadList
- Crop paradigm before uploading
- Customize Progress Bar
- API
Upload
Upload file by selecting or dragging.
When To Use#
Uploading is the process of publishing information (web pages, text, pictures, video, etc.) to a remote server via a spider web page or upload tool.
-
When you need to upload one or more files.
-
When you need to bear witness the process of uploading.
-
When you need to upload files past dragging and dropping.
Examples
Classic fashion. File choice dialog pops up when upload button is clicked.
import { Upload, message, Button } from 'antd' ; import { UploadOutlined } from '@pismire-design/icons' ; const props = { proper name : 'file' , action : 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , headers : { potency : 'authorization-text' , } , onChange ( info ) { if (info.file.status !== 'uploading' ) { console. log (info.file, info.fileList) ; } if (info.file.condition === 'washed' ) { message. success ( ` ${info.file.name} file uploaded successfully ` ) ; } else if (info.file.status === 'error' ) { bulletin. error ( ` ${info.file.name} file upload failed. ` ) ; } } , } ; ReactDOM. render ( < Upload { ...props} > < Push icon = { < UploadOutlined /> } > Click to Upload </ Push button > </ Upload > , mountNode, ) ; Utilise defaultFileList for uploaded files when page init.
import { Upload, Push button } from 'antd' ; import { UploadOutlined } from '@ant-blueprint/icons' ; const props = { action : 'https://world wide web.mocky.io/v2/5cc8019d300000980a055e76' , onChange ( { file, fileList } ) { if (file.status !== 'uploading' ) { panel. log (file, fileList) ; } } , defaultFileList : [ { uid : '1' , name : 'xxx.png' , condition : 'done' , response : 'Server Error 500' , // custom error message to show url : 'http://www.baidu.com/30.png' , } , { uid : 'two' , proper noun : 'yyy.png' , status : 'done' , url : 'http://www.baidu.com/yyy.png' , } , { uid : 'three' , proper noun : 'zzz.png' , condition : 'error' , response : 'Server Mistake 500' , // custom error message to show url : 'http://world wide web.baidu.com/zzz.png' , } , ] , } ; ReactDOM. render ( < Upload { ...props} > < Push button icon = { < UploadOutlined /> } > Upload </ Push button > </ Upload > , mountNode, ) ; You can gain total control over filelist by configuring fileList. You tin can accomplish all kinds of customed functions. The following shows two circumstances:
-
limit the number of uploaded files.
-
read from response and evidence file link.
import { Upload, Push } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; class MyUpload extends React.Component { country = { fileList : [ { uid : '-one' , proper name : 'xxx.png' , status : 'done' , url : 'http://www.baidu.com/xxx.png' , } , ] , } ; handleChange = info => { allow fileList = [ ...info.fileList] ; // 1. Limit the number of uploaded files // Only to show ii recent uploaded files, and old ones will 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 testify file.url as link file.url = file.response.url; } render file; } ) ; this . setState ( { fileList } ) ; } ; render ( ) { const props = { action : 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , onChange : this .handleChange, multiple : truthful , } ; return ( < Upload { ...props} fileList = { this .land.fileList} > < Push icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > ) ; } } ReactDOM. return ( < MyUpload /> , mountNode) ; Yous tin can select and upload a whole directory.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@ant-blueprint/icons' ; ReactDOM. render ( < Upload action = "https://www.mocky.io/v2/5cc8019d300000980a055e76" directory > < Button icon = { < UploadOutlined /> } > Upload Directory </ Push > </ Upload > , mountNode, ) ; beforeUpload only prevent upload behavior when return false or turn down promise, the prevented file would all the same show in file list. Hither is the example you can keep prevented files out of list past return UPLOAD.LIST_IGNORE.
import React, { useState } from 'react' ; import { Upload, Push, message } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; const Uploader = ( ) => { const props = { beforeUpload : file => { const isPNG = file.type === 'prototype/png' ; if ( !isPNG) { message. error ( ` ${file.name} is non a png file ` ) ; } return isPNG || Upload. LIST_IGNORE ; } , onChange : info => { console. log (info.fileList) ; } , } ; render ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Upload png simply </ Button > </ Upload > ) ; } ; ReactDOM. return ( < Uploader /> , mountNode) ; Customize local preview. Can handle with non-image format files such as video.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@ant-blueprint/icons' ; const props = { action : '//jsonplaceholder.typicode.com/posts/' , listType : 'pic' , previewFile ( file ) { console. log ( 'Your upload file:' , file) ; // Your process logic. Here we just mock to the same file return fetch ( 'https://adjacent.json-generator.com/api/json/get/4ytyBoLK8' , { method : 'POST' , body : file, } ) . and so ( res => res. json ( ) ) . so ( ( { thumbnail } ) => thumbnail) ; } , } ; ReactDOM. render ( < Upload { ...props} > < Push button icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > , mountNode, ) ; Use beforeUpload for transform file before request such as add a watermark.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@emmet-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 canvas = document. createElement ( 'sail' ) ; canvas.width = img.naturalWidth; canvas.pinnacle = img.naturalHeight; const ctx = canvas. getContext ( 'second' ) ; ctx. drawImage (img, 0 , 0 ) ; ctx.fillStyle = 'ruddy' ; ctx.textBaseline = 'middle' ; ctx.font = '33px Arial' ; ctx. fillText ( 'Ant Design' , twenty , 20 ) ; canvas. toBlob (resolve) ; } ; } ; } ) ; } , } ; ReactDOM. render ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > , mountNode, ) ; Use showUploadList for custom activeness icons of files.
import { Upload, Button } from 'antd' ; import { UploadOutlined, StarOutlined } from '@ant-design/icons' ; const props = { activeness : 'https://world wide web.mocky.io/v2/5cc8019d300000980a055e76' , onChange ( { file, fileList } ) { if (file.condition !== 'uploading' ) { console. log (file, fileList) ; } } , defaultFileList : [ { uid : '1' , name : 'xxx.png' , status : 'done' , response : 'Server Fault 500' , // custom error message to prove url : 'http://www.baidu.com/thirty.png' , } , { uid : '2' , name : 'yyy.png' , status : 'done' , url : 'http://world wide web.baidu.com/yyy.png' , } , { uid : '3' , proper noun : 'zzz.png' , status : 'error' , response : 'Server Error 500' , // custom error bulletin to evidence url : 'http://www.baidu.com/zzz.png' , } , ] , showUploadList : { showDownloadIcon : true , downloadIcon : 'download ' , showRemoveIcon : true , removeIcon : < StarOutlined onClick = { e => console. log (due east, 'custom removeIcon consequence' ) } /> , } , } ; ReactDOM. render ( < Upload { ...props} > < Push icon = { < UploadOutlined /> } > Upload </ Push > </ Upload > , mountNode, ) ;
import React, { useState } from 'react' ; import { Upload } from 'antd' ; import ImgCrop from 'antd-img-ingather' ; const Demo = ( ) => { const [fileList, setFileList] = useState ( [ { uid : '-1' , name : 'image.png' , condition : '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 = await new Promise ( resolve => { const reader = new FileReader ( ) ; reader. readAsDataURL (file.originFileObj) ; reader. onload = ( ) => resolve (reader.outcome) ; } ) ; } const image = new Image ( ) ; prototype.src = src; const imgWindow = window. open (src) ; imgWindow.certificate. write (image.outerHTML) ; } ; return ( < ImgCrop rotate > < Upload action = "https://www.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'due south avatar, and validate size and format of picture with beforeUpload.
The render value of office
beforeUploadcan be a Promise to cheque 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.event) ) ; reader. readAsDataURL (img) ; } function beforeUpload ( file ) { const isJpgOrPng = file.type === 'epitome/jpeg' || file.type === 'paradigm/png' ; if ( !isJpgOrPng) { bulletin. error ( 'You can only upload JPG/PNG file!' ) ; } const isLt2M = file.size / 1024 / 1024 < two ; if ( !isLt2M) { message. fault ( 'Image must smaller than 2MB!' ) ; } render isJpgOrPng && isLt2M; } form Avatar extends React.Component { country = { loading : simulated , } ; handleChange = info => { if (info.file.status === 'uploading' ) { this . setState ( { loading : true } ) ; render ; } if (info.file.condition === 'done' ) { // Get this url from response in existent earth. getBase64 (info.file.originFileObj, imageUrl => this . setState ( { imageUrl, loading : simulated , } ) , ) ; } } ; render ( ) { const { loading, imageUrl } = this .state; const uploadButton = ( <div > {loading ? < LoadingOutlined /> : < PlusOutlined /> } <div style = { { marginTop : viii } } > Upload </div > </div > ) ; return ( < Upload name = "avatar" listType = "movie-menu" className = "avatar-uploader" showUploadList = { false } activity = "https://www.mocky.io/v2/5cc8019d300000980a055e76" beforeUpload = {beforeUpload} onChange = { this .handleChange} > {imageUrl ? <img src = {imageUrl} alt = "avatar" style = { { width : '100%' } } /> : uploadButton} </ Upload > ) ; } } ReactDOM. return ( < Avatar /> , mountNode) ; .avatar-uploader > .ant-upload { width : 128px; height : 128px; } Later on users upload picture, the thumbnail will be shown in list. The upload push button will disappear when count meets limitation.
import { Upload, Modal } from 'antd' ; import { PlusOutlined } from '@ant-design/icons' ; function getBase64 ( file ) { return new Promise ( ( resolve, reject ) => { const reader = new FileReader ( ) ; reader. readAsDataURL (file) ; reader. onload = ( ) => resolve (reader.issue) ; reader. onerror = fault => reject (error) ; } ) ; } grade PicturesWall extends React.Component { state = { previewVisible : fake , previewImage : '' , previewTitle : '' , fileList : [ { uid : '-i' , name : 'paradigm.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-2' , proper noun : 'image.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-three' , proper noun : 'image.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 : fifty , name : 'image.png' , condition : 'uploading' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-v' , name : 'image.png' , status : 'fault' , } , ] , } ; handleCancel = ( ) => this . setState ( { previewVisible : false } ) ; handlePreview = async file => { if ( !file.url && !file.preview) { file.preview = await getBase64 (file.originFileObj) ; } this . setState ( { previewImage : file.url || file.preview, previewVisible : true , previewTitle : file.name || file.url. substring (file.url. lastIndexOf ( '/' ) + ane ) , } ) ; } ; handleChange = ( { fileList } ) => this . setState ( { fileList } ) ; return ( ) { const { previewVisible, previewImage, fileList, previewTitle } = this .country; const uploadButton = ( <div > < PlusOutlined /> <div manner = { { marginTop : eight } } > Upload </div > </div > ) ; return ( < > < Upload action = "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 = { goose egg } onCancel = { this .handleCancel} > <img alt = "case" style = { { width : '100%' } } src = {previewImage} /> </ Modal > </ > ) ; } } ReactDOM. return ( < PicturesWall /> , mountNode) ; Click or elevate file to this expanse to upload Support for a unmarried or majority upload. Strictly prohibit from uploading company data or other band files
Yous can elevate files to a specific area, to upload. Alternatively, you lot can likewise upload past selecting.
We can upload serveral files at one time 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 = { name : 'file' , multiple : true , action : 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , onChange ( info ) { const { status } = info.file; if (condition !== 'uploading' ) { console. log (info.file, info.fileList) ; } if (status === 'washed' ) { message. success ( ` ${info.file.name} file uploaded successfully. ` ) ; } else if (status === 'error' ) { message. error ( ` ${info.file.name} file upload failed. ` ) ; } } , onDrop ( e ) { console. log ( 'Dropped files' , due east.dataTransfer.files) ; } , } ; ReactDOM. render ( < Dragger { ...props} > <p className = "ant-upload-drag-icon" > < InboxOutlined /> </p > <p className = "emmet-upload-text" > Click or elevate file to this area to upload </p > <p className = "ant-upload-hint" > Support for a single or bulk upload. Strictly prohibit from uploading company data or other ring files </p > </ Dragger > , mountNode, ) ; Upload files manually after beforeUpload returns imitation.
import { Upload, Button, bulletin } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; class Demo extends React.Component { country = { fileList : [ ] , uploading : false , } ; handleUpload = ( ) => { const { fileList } = this .state; const formData = new FormData ( ) ; fileList. forEach ( file => { formData. append ( 'files[]' , file) ; } ) ; this . setState ( { uploading : true , } ) ; // You can apply whatever AJAX library you like fetch ( 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , { method : 'POST' , trunk : formData, } ) . then ( res => res. json ( ) ) . and so ( ( ) => { this . setState ( { fileList : [ ] , } ) ; bulletin. success ( 'upload successfully.' ) ; } ) . grab ( ( ) => { bulletin. error ( 'upload failed.' ) ; } ) . finally ( ( ) => { this . setState ( { uploading : false , } ) ; } ) ; } ; render ( ) { const { uploading, fileList } = this .state; const props = { onRemove : file => { this . setState ( land => { const alphabetize = land.fileList. indexOf (file) ; const newFileList = state.fileList. slice ( ) ; newFileList. splice (index, 1 ) ; return { fileList : newFileList, } ; } ) ; } , beforeUpload : file => { this . setState ( land => ( { fileList : [ ...country.fileList, file] , } ) ) ; return faux ; } , fileList, } ; return ( < > < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Select File </ Push > </ Upload > < Button blazon = "primary" onClick = { this .handleUpload} disabled = {fileList.length === 0 } loading = {uploading} mode = { { marginTop : 16 } } > {uploading ? 'Uploading' : 'Start Upload' } </ Button > </ > ) ; } } ReactDOM. render ( < Demo /> , mountNode) ; If uploaded file is a picture, the thumbnail can be shown. IE8/9 exercise non support local thumbnail show. Delight use thumbUrl instead.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; const fileList = [ { uid : '-i' , proper noun : 'xxx.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , thumbUrl : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-2' , proper name : 'yyy.png' , condition : 'error' , } , ] ; ReactDOM. render ( < > < Upload activity = "https://world wide web.mocky.io/v2/5cc8019d300000980a055e76" listType = "moving-picture show" defaultFileList = { [ ...fileList] } > < Button icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > <br /> <br /> < Upload action = "https://world wide web.mocky.io/v2/5cc8019d300000980a055e76" listType = "film" defaultFileList = { [ ...fileList] } className = "upload-list-inline" > < Button icon = { < UploadOutlined /> } > Upload </ Push > </ Upload > </ > , mountNode, ) ; /* tile uploaded pictures */ .upload-listing-inline .ant-upload-list-particular { float : left; width : 200px; margin-right : 8px; } .upload-list-inline [class*='-upload-listing-rtl'] .ant-upload-list-particular { float : right; } Limit files with maxCount. Will replace electric current one when maxCount is ane.
import { Upload, Push button, Infinite } from 'antd' ; import { UploadOutlined } from '@pismire-design/icons' ; ReactDOM. return ( < Infinite direction = "vertical" style = { { width : '100%' } } size = "large" > < Upload action = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "motion-picture show" maxCount = { 1 } > < Button icon = { < UploadOutlined /> } > Upload (Max: i ) </ Button > </ Upload > < Upload activeness = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "picture" maxCount = { 3 } multiple > < Button icon = { < UploadOutlined /> } > Upload (Max: three ) </ Button > </ Upload > </ Infinite > , mountNode, ) ; Use Aliyun OSS upload example.
import { Form, Upload, bulletin, Button } from 'antd' ; import { UploadOutlined } from '@ant-blueprint/icons' ; class AliyunOSSUpload extends React.Component { state = { OSSData : { } , } ; async componentDidMount ( ) { await this . init ( ) ; } init = async ( ) => { try { const OSSData = await this . mockGetOSSData ( ) ; this . setState ( { OSSData, } ) ; } catch (fault) { message. error (error) ; } } ; // Mock get 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 ( five => five.url !== file.url) ; if (onChange) { onChange (files) ; } } ; getExtraData = file => { const { OSSData } = this .state; return { key : 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. now ( ) ) { expect this . init ( ) ; } const suffix = file.name. slice (file.proper name. lastIndexOf ( '.' ) ) ; const filename = Date. now ( ) + suffix; file.url = OSSData.dir + filename; return file; } ; render ( ) { const { value } = this .props; const props = { name : 'file' , fileList : value, action : this .state.OSSData.host, onChange : this .onChange, onRemove : this .onRemove, data : this .getExtraData, beforeUpload : this .beforeUpload, } ; render ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Click to Upload </ Button > </ Upload > ) ; } } const FormPage = ( ) => ( < Form labelCol = { { bridge : 4 } } > < Form.Item label = "Photos" proper noun = "photos" > < AliyunOSSUpload /> </ Form.Item > </ Course > ) ; ReactDOM. render ( < FormPage /> , mountNode) ; By using itemRender, we tin integrate upload with react-dnd to implement drag sorting of uploadList.
import React, { useState, useCallback, useRef } from 'react' ; import { Upload, Button, Tooltip } from 'antd' ; import { DndProvider, useDrag, useDrop } from 'react-dnd' ; import { HTML5Backend } from 'react-dnd-html5-backend' ; import update from 'immutability-helper' ; import { UploadOutlined } from '@emmet-pattern/icons' ; const type = 'DragableUploadList' ; const DragableUploadListItem = ( { originNode, moveRow, file, fileList } ) => { const ref = React. useRef ( ) ; const alphabetize = fileList. indexOf (file) ; const [ { isOver, dropClassName } , drop] = useDrop ( { accept : type, collect : monitor => { const { index : dragIndex } = monitor. getItem ( ) || { } ; if (dragIndex === alphabetize) { return { } ; } return { isOver : monitor. isOver ( ) , dropClassName : dragIndex < index ? ' drop-over-down' : ' drop-over-upward' , } ; } , driblet : particular => { moveRow (particular.index, index) ; } , } ) ; const [ , drag] = useDrag ( { blazon, detail : { index } , collect : monitor => ( { isDragging : monitor. isDragging ( ) , } ) , } ) ; drib ( drag (ref) ) ; const errorNode = < Tooltip title = "Upload Error" > {originNode.props.children} </ Tooltip > ; render ( <div ref = {ref} className = { ` ant-upload-draggable-list-item ${isOver ? dropClassName : '' } ` } fashion = { { cursor : 'move' } } > {file.status === 'mistake' ? errorNode : originNode} </div > ) ; } ; const DragSortingUpload = ( ) => { const [fileList, setFileList] = useState ( [ { uid : '-1' , proper noun : 'image1.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-2' , name : 'image2.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-3' , name : 'image3.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-4' , proper name : 'image4.png' , status : 'washed' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-5' , name : 'prototype.png' , status : 'error' , } , ] ) ; const moveRow = useCallback ( ( dragIndex, hoverIndex ) => { const dragRow = fileList[dragIndex] ; setFileList ( update (fileList, { $splice : [ [dragIndex, ane ] , [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. render ( < DragSortingUpload /> , mountNode) ; #components-upload-demo-drag-sorting .ant-upload-draggable-list-item { border-elevation : 2px dashed rgba ( 0, 0, 0, 0 ) ; edge-bottom : 2px dashed rgba ( 0, 0, 0, 0 ) ; } #components-upload-demo-drag-sorting .ant-upload-draggable-list-item.driblet-over-downward { edge-bottom-color : #1890ff ; } #components-upload-demo-elevate-sorting .ant-upload-draggable-list-item.drop-over-upwardly { border-top-colour : #1890ff ; } Use progress for customize progress bar.
import { Upload, message, Button } from 'antd' ; import { UploadOutlined } from '@pismire-design/icons' ; const props = { 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' ) { message. success ( ` ${info.file.proper name} file uploaded successfully ` ) ; } else if (info.file.status === 'error' ) { message. error ( ` ${info.file.name} file upload failed. ` ) ; } } , progress : { strokeColor : { '0%' : '#108ee9' , '100%' : '#87d068' , } , strokeWidth : three , format : pct => ` ${ parseFloat (percent. toFixed ( 2 ) ) } % ` , } , } ; ReactDOM. render ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Click to Upload </ Button > </ Upload > , mountNode, ) ; API#
| Property | Clarification | Type | Default | Version |
|---|---|---|---|---|
| have | File types that tin be accepted. Meet input have Attribute | string | - | |
| activity | Uploading URL | cord | (file) => Promise < string> | - | |
| beforeUpload | Claw office which will be executed before uploading. Uploading will be stopped with faux or a rejected Hope returned. When returned value is Upload.LIST_IGNORE, the listing of files that have been uploaded will ignore it. Alarm：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 | - | |
| data | Uploading extra params or part which can 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 | false | |
| disabled | Disable upload push | boolean | false | |
| fileList | List of files that have been uploaded (controlled). Here is a common issue #2423 when using it | UploadFile[ ] | - | |
| headers | Set request headers, valid higher up IE10 | object | - | |
| iconRender | Custom show icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - | |
| isImageUrl | Customize if render < img /> in thumbnail | (file: UploadFile) => boolean | (within implementation) | |
| itemRender | Custom detail of uploadList | (originNode: ReactElement, file: UploadFile, fileList: object [ ], actions: { download: function, preview: function, remove: function }) => React.ReactNode | - | 4.xvi.0 |
| listType | Born stylesheets, back up for three types: text, moving-picture show or picture-card | cord | text | |
| maxCount | Limit the number of uploaded files. Will replace current one when maxCount is one | number | - | 4.10.0 |
| method | The http method of upload request | string | post | |
| multiple | Whether to back up selected multiple file. IE10+ supported. Y'all can select multiple files with CTRL property downward while multiple is fix to be true | boolean | simulated | |
| name | The name of uploading file | string | file | |
| openFileDialogOnClick | Click open file dialog | boolean | true | |
| previewFile | Customize preview file logic | (file: File | Blob) => Promise < dataURL: string> | - | |
| progress | Custom progress bar | ProgressProps (support type="line" only) | { strokeWidth: two, showInfo: false } | 4.iii.0 |
| showUploadList | Whether to testify default upload listing, could be an object to specify showPreviewIcon, showRemoveIcon, showDownloadIcon, removeIcon and downloadIcon individually | boolean | { showPreviewIcon?: boolean, showDownloadIcon?: boolean, showRemoveIcon?: boolean, previewIcon?: ReactNode | (file: UploadFile) => ReactNode, removeIcon?: ReactNode | (file: UploadFile) => ReactNode, downloadIcon?: ReactNode | (file: UploadFile) => ReactNode } | true | part: iv.7.0 |
| withCredentials | The ajax upload with cookie sent | boolean | imitation | |
| onChange | A callback function, can be executed when uploading state is changing, come across onChange | part | - | |
| onDrop | A callback part executed when files are dragged and dropped into upload expanse | (outcome: React.DragEvent) => void | - | four.16.0 |
| onDownload | Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB | function(file): void | (Bound to new TAB) | |
| onPreview | A callback function, volition be executed when file link or preview icon is clicked | office(file) | - | |
| onRemove | A callback function, volition be executed when removing file push is clicked, remove event will exist prevented when return value is fake or a Hope which resolve(faux) or reject | role(file): boolean | Promise | - |
UploadFile#
Extends File with additional props.
| Belongings | Clarification | Blazon | Default |
|---|---|---|---|
| name | File proper name | string | - |
| percent | Upload progress percent | number | - |
| status | Upload condition. Testify different fashion when configured | fault | success | done | uploading | removed | - |
| thumbUrl | Pollex prototype url | string | - |
| uid | unique id. Will auto generate when not provided | string | - |
| url | Download url | string | - |
onChange#
The function will be chosen when uploading is in progress, completed or failed.
When uploading state modify, it returns:
{ file: { /* ... */ } , fileList: [ /* ... */ ] , outcome: { /* ... */ } , } -
fileFile object for the current functioning.{ uid: 'uid' , // unique identifier, negative is recommend, to preclude interference with internal generated id name: 'xx.png' , // file proper noun status: 'washed' , // options：uploading, done, mistake, removed. Intercepted file by beforeUpload don't have condition field. response: '{"condition": "success"}' , // response from server linkProps: '{"download": "epitome"}' , // boosted html props of file link xhr: 'XMLHttpRequest{ ... }' , // XMLHttpRequest Header } -
fileListcurrent list of files -
eventresponse from server, including uploading progress, supported past advanced browsers.
FAQ#
How do I implement upload server side?#
-
Yous can consult jQuery-File-Upload most how to implement server side upload interface.
-
There is a mock example of express in rc-upload.
I desire to display download links.#
Please set belongings url of each detail in fileList to command content of link.
How to use customRequest?#
See https://github.com/react-component/upload#customrequest.
Why will the fileList that'southward in control not trigger onChange status update when the file is not in the list?#
onChange will only trigger when the file is in the list, it volition ignore whatsoever events removed from the listing. Delight note that at that place does exist a bug which makes an upshot nevertheless trigger even when the file is not in the list before iv.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 simulated. It will merge to { originFileObj: File } in next major version. Current version is compatible to become origin file by info.file.originFileObj. You tin change this before major release.
Source: https://ant.design/components/upload/
Posted by: phelpsbegany.blogspot.com
0 Response to "How To Upload A Picture Url"
Post a Comment