Click to Upload Not Working Dropzone Js
- Upload past clicking
- Avatar
- Default Files
- Pictures Wall
- Complete command over file listing
- Drag and Drop
- Upload directory
- Upload manually
- Upload png file just
- Pictures with list manner
- Customize preview file
- Max Count
- Transform file before request
- Aliyun OSS
- custom action icon
- Drag sorting of uploadList
- Ingather epitome 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 web folio or upload tool.
-
When you demand to upload 1 or more files.
-
When yous need to show the process of uploading.
-
When y'all need to upload files by dragging and dropping.
Examples
Classic way. File selection dialog pops upwardly when upload button is clicked.
import { Upload, message, Button } from 'antd' ; import { UploadOutlined } from '@emmet-design/icons' ; const props = { name : 'file' , activeness : 'https://world wide web.mocky.io/v2/5cc8019d300000980a055e76' , headers : { authorization : 'potency-text' , } , onChange ( info ) { if (info.file.status !== 'uploading' ) { panel. log (info.file, info.fileList) ; } if (info.file.status === 'washed' ) { message. success ( ` ${info.file.proper name} file uploaded successfully ` ) ; } else if (info.file.condition === 'error' ) { bulletin. mistake ( ` ${info.file.name} file upload failed. ` ) ; } } , } ; ReactDOM. render ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Click to Upload </ Button > </ Upload > , mountNode, ) ; Utilise defaultFileList for uploaded files when page init.
import { Upload, Push button } from 'antd' ; import { UploadOutlined } from '@emmet-design/icons' ; const props = { action : 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , onChange ( { file, fileList } ) { if (file.condition !== 'uploading' ) { console. log (file, fileList) ; } } , defaultFileList : [ { uid : '1' , name : '30.png' , status : 'done' , response : 'Server Error 500' , // custom fault message to bear witness url : 'http://www.baidu.com/xxx.png' , } , { uid : 'ii' , name : 'yyy.png' , status : 'done' , url : 'http://www.baidu.com/yyy.png' , } , { uid : '3' , proper noun : 'zzz.png' , status : 'error' , response : 'Server Error 500' , // custom mistake message to bear witness url : 'http://www.baidu.com/zzz.png' , } , ] , } ; ReactDOM. render ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Upload </ Button > </ Upload > , mountNode, ) ; Y'all tin can proceeds full control over filelist by 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 evidence file link.
import { Upload, Push } from 'antd' ; import { UploadOutlined } from '@ant-pattern/icons' ; class MyUpload extends React.Component { land = { fileList : [ { uid : '-i' , name : '30.png' , status : 'done' , url : 'http://www.baidu.com/xxx.png' , } , ] , } ; handleChange = info => { let fileList = [ ...info.fileList] ; // 1. Limit the number of uploaded files // Only to show ii recent uploaded files, and old ones volition exist replaced by the new fileList = fileList. piece ( - 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; } return file; } ) ; this . setState ( { fileList } ) ; } ; return ( ) { const props = { action : 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , onChange : this .handleChange, multiple : true , } ; return ( < Upload { ...props} fileList = { this .country.fileList} > < Button icon = { < UploadOutlined /> } > Upload </ Push > </ Upload > ) ; } } ReactDOM. render ( < MyUpload /> , mountNode) ; You tin select and upload a whole directory.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; ReactDOM. render ( < Upload action = "https://www.mocky.io/v2/5cc8019d300000980a055e76" directory > < Button icon = { < UploadOutlined /> } > Upload Directory </ Push > </ Upload > , mountNode, ) ; beforeUpload simply foreclose upload behavior when return faux or reject promise, the prevented file would still show in file list. Here is the instance you can go on prevented files out of list by return UPLOAD.LIST_IGNORE.
import React, { useState } from 'react' ; import { Upload, Button, message } from 'antd' ; import { UploadOutlined } from '@emmet-design/icons' ; const Uploader = ( ) => { const props = { beforeUpload : file => { const isPNG = file.blazon === 'image/png' ; if ( !isPNG) { message. mistake ( ` ${file.name} is not a png file ` ) ; } render isPNG || Upload. LIST_IGNORE ; } , onChange : info => { console. log (info.fileList) ; } , } ; return ( < Upload { ...props} > < Push icon = { < UploadOutlined /> } > Upload png but </ Button > </ Upload > ) ; } ; ReactDOM. render ( < Uploader /> , mountNode) ; Customize local preview. Can handle with not-image format files such as video.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; const props = { activeness : '//jsonplaceholder.typicode.com/posts/' , listType : 'picture' , previewFile ( file ) { console. log ( 'Your upload file:' , file) ; // Your process logic. Here we merely mock to the same file render fetch ( 'https://next.json-generator.com/api/json/get/4ytyBoLK8' , { method : 'POST' , body : file, } ) . then ( res => res. json ( ) ) . then ( ( { thumbnail } ) => thumbnail) ; } , } ; ReactDOM. return ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Upload </ Push > </ Upload > , mountNode, ) ; Employ beforeUpload for transform file before asking such as add a watermark.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@emmet-pattern/icons' ; const props = { action : 'https://world wide web.mocky.io/v2/5cc8019d300000980a055e76' , listType : 'motion-picture show' , beforeUpload ( file ) { return new Promise ( resolve => { const reader = new FileReader ( ) ; reader. readAsDataURL (file) ; reader. onload = ( ) => { const img = certificate. createElement ( 'img' ) ; img.src = reader.issue; img. onload = ( ) => { const canvass = certificate. createElement ( 'canvas' ) ; canvas.width = img.naturalWidth; sail.height = img.naturalHeight; const ctx = canvas. getContext ( '2nd' ) ; ctx. drawImage (img, 0 , 0 ) ; ctx.fillStyle = 'ruby-red' ; ctx.textBaseline = 'middle' ; ctx.font = '33px Arial' ; ctx. fillText ( 'Pismire Design' , xx , 20 ) ; canvas. toBlob (resolve) ; } ; } ; } ) ; } , } ; ReactDOM. return ( < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Upload </ Push > </ Upload > , mountNode, ) ; Use showUploadList for custom action icons of files.
import { Upload, Push button } from 'antd' ; import { UploadOutlined, StarOutlined } from '@ant-design/icons' ; const props = { action : 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , onChange ( { file, fileList } ) { if (file.condition !== 'uploading' ) { console. log (file, fileList) ; } } , defaultFileList : [ { uid : '1' , name : 'xxx.png' , condition : 'done' , response : 'Server Error 500' , // custom error bulletin to show url : 'http://www.baidu.com/30.png' , } , { uid : '2' , proper noun : 'yyy.png' , status : 'done' , url : 'http://www.baidu.com/yyy.png' , } , { uid : '3' , proper name : 'zzz.png' , condition : 'error' , response : 'Server Error 500' , // custom error message to show url : 'http://world wide web.baidu.com/zzz.png' , } , ] , showUploadList : { showDownloadIcon : true , downloadIcon : 'download ' , showRemoveIcon : true , removeIcon : < StarOutlined onClick = { e => panel. log (eastward, 'custom removeIcon event' ) } /> , } , } ; ReactDOM. render ( < Upload { ...props} > < Push button icon = { < UploadOutlined /> } > Upload </ Push > </ Upload > , mountNode, ) ;
import React, { useState } from 'react' ; import { Upload } from 'antd' ; import ImgCrop from 'antd-img-crop' ; const Demo = ( ) => { const [fileList, setFileList] = useState ( [ { uid : '-i' , name : 'epitome.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , ] ) ; const onChange = ( { fileList : newFileList } ) => { setFileList (newFileList) ; } ; const onPreview = async file => { let src = file.url; if ( !src) { src = await new Promise ( resolve => { const reader = new FileReader ( ) ; reader. readAsDataURL (file.originFileObj) ; reader. onload = ( ) => resolve (reader.issue) ; } ) ; } const prototype = new Prototype ( ) ; image.src = src; const imgWindow = window. open (src) ; imgWindow.certificate. write (epitome.outerHTML) ; } ; return ( < ImgCrop rotate > < Upload action = "https://world wide web.mocky.io/v2/5cc8019d300000980a055e76" listType = "picture-card" fileList = {fileList} onChange = {onChange} onPreview = {onPreview} > {fileList.length < v && '+ Upload' } </ Upload > </ ImgCrop > ) ; } ; ReactDOM. render ( < Demo /> , mountNode) ; Click to upload user'due south avatar, and validate size and format of pic with beforeUpload.
The render value of function
beforeUploadcan be a Promise to cheque asynchronously. demo
import { Upload, message } from 'antd' ; import { LoadingOutlined, PlusOutlined } from '@ant-design/icons' ; function getBase64 ( img, callback ) { const reader = new FileReader ( ) ; reader. addEventListener ( 'load' , ( ) => callback (reader.upshot) ) ; reader. readAsDataURL (img) ; } function beforeUpload ( file ) { const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'epitome/png' ; if ( !isJpgOrPng) { message. fault ( 'Yous can only upload JPG/PNG file!' ) ; } const isLt2M = file.size / 1024 / 1024 < 2 ; if ( !isLt2M) { message. error ( 'Prototype must smaller than 2MB!' ) ; } return isJpgOrPng && isLt2M; } class Avatar extends React.Component { state = { loading : false , } ; handleChange = info => { if (info.file.status === 'uploading' ) { this . setState ( { loading : true } ) ; return ; } if (info.file.status === 'done' ) { // Go this url from response in real world. getBase64 (info.file.originFileObj, imageUrl => this . setState ( { imageUrl, loading : faux , } ) , ) ; } } ; render ( ) { const { loading, imageUrl } = this .country; const uploadButton = ( <div > {loading ? < LoadingOutlined /> : < PlusOutlined /> } <div style = { { marginTop : 8 } } > Upload </div > </div > ) ; return ( < Upload name = "avatar" listType = "pic-card" className = "avatar-uploader" showUploadList = { false } action = "https://www.mocky.io/v2/5cc8019d300000980a055e76" beforeUpload = {beforeUpload} onChange = { this .handleChange} > {imageUrl ? <img src = {imageUrl} alt = "avatar" style = { { width : '100%' } } /> : uploadButton} </ Upload > ) ; } } ReactDOM. render ( < Avatar /> , mountNode) ; .avatar-uploader > .emmet-upload { width : 128px; pinnacle : 128px; } After users upload picture, the thumbnail volition be shown in list. The upload button will disappear when count meets limitation.
import { Upload, Modal } from 'antd' ; import { PlusOutlined } from '@ant-blueprint/icons' ; function getBase64 ( file ) { render new Promise ( ( resolve, refuse ) => { const reader = new FileReader ( ) ; reader. readAsDataURL (file) ; reader. onload = ( ) => resolve (reader.upshot) ; reader. onerror = error => reject (fault) ; } ) ; } class PicturesWall extends React.Component { state = { previewVisible : fake , previewImage : '' , previewTitle : '' , fileList : [ { uid : '-one' , name : 'image.png' , status : 'washed' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-2' , proper name : 'image.png' , status : 'washed' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-iii' , proper noun : 'image.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-4' , name : 'paradigm.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-30' , pct : 50 , proper name : 'image.png' , status : 'uploading' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-five' , 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.name || file.url. substring (file.url. lastIndexOf ( '/' ) + 1 ) , } ) ; } ; handleChange = ( { fileList } ) => this . setState ( { fileList } ) ; render ( ) { const { previewVisible, previewImage, fileList, previewTitle } = this .state; const uploadButton = ( <div > < PlusOutlined /> <div style = { { marginTop : 8 } } > Upload </div > </div > ) ; render ( < > < Upload activeness = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "picture show-carte" fileList = {fileList} onPreview = { this .handlePreview} onChange = { this .handleChange} > {fileList.length >= 8 ? cipher : uploadButton} </ Upload > < Modal visible = {previewVisible} title = {previewTitle} footer = { nothing } onCancel = { this .handleCancel} > <img alt = "example" style = { { width : '100%' } } src = {previewImage} /> </ Modal > </ > ) ; } } ReactDOM. render ( < 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
Yous tin drag files to a specific area, to upload. Alternatively, you can also upload past selecting.
We can upload serveral files at once in modern browsers by 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 { 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 === 'mistake' ) { bulletin. error ( ` ${info.file.name} file upload failed. ` ) ; } } , onDrop ( eastward ) { console. log ( 'Dropped files' , e.dataTransfer.files) ; } , } ; ReactDOM. return ( < Dragger { ...props} > <p className = "emmet-upload-elevate-icon" > < InboxOutlined /> </p > <p className = "ant-upload-text" > Click or drag file to this area to upload </p > <p className = "ant-upload-hint" > Support for a unmarried or bulk upload. Strictly prohibit from uploading company data or other band files </p > </ Dragger > , mountNode, ) ; Upload files manually subsequently beforeUpload returns false.
import { Upload, Button, message } 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 : truthful , } ) ; // You can use any AJAX library you like fetch ( 'https://www.mocky.io/v2/5cc8019d300000980a055e76' , { method : 'POST' , trunk : formData, } ) . so ( res => res. json ( ) ) . then ( ( ) => { this . setState ( { fileList : [ ] , } ) ; bulletin. success ( 'upload successfully.' ) ; } ) . catch ( ( ) => { message. error ( 'upload failed.' ) ; } ) . finally ( ( ) => { this . setState ( { uploading : fake , } ) ; } ) ; } ; render ( ) { const { uploading, fileList } = this .country; const props = { onRemove : file => { this . setState ( country => { const alphabetize = state.fileList. indexOf (file) ; const newFileList = state.fileList. piece ( ) ; newFileList. splice (alphabetize, 1 ) ; render { fileList : newFileList, } ; } ) ; } , beforeUpload : file => { this . setState ( land => ( { fileList : [ ...land.fileList, file] , } ) ) ; return false ; } , fileList, } ; render ( < > < Upload { ...props} > < Button icon = { < UploadOutlined /> } > Select File </ Button > </ Upload > < Button type = "primary" onClick = { this .handleUpload} disabled = {fileList.length === 0 } loading = {uploading} style = { { marginTop : xvi } } > {uploading ? 'Uploading' : 'Start Upload' } </ Button > </ > ) ; } } ReactDOM. render ( < Demo /> , mountNode) ; If uploaded file is a picture show, the thumbnail can be shown. IE8/ix do not support local thumbnail show. Please use thumbUrl instead.
import { Upload, Button } from 'antd' ; import { UploadOutlined } from '@emmet-design/icons' ; const fileList = [ { uid : '-i' , name : 'xxx.png' , status : 'washed' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , thumbUrl : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-2' , name : 'yyy.png' , status : 'error' , } , ] ; ReactDOM. render ( < > < Upload action = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "picture" defaultFileList = { [ ...fileList] } > < Push button icon = { < UploadOutlined /> } > Upload </ Push > </ Upload > <br /> <br /> < Upload activeness = "https://world wide web.mocky.io/v2/5cc8019d300000980a055e76" listType = "picture" defaultFileList = { [ ...fileList] } className = "upload-list-inline" > < Button icon = { < UploadOutlined /> } > Upload </ Push button > </ Upload > </ > , mountNode, ) ; /* tile uploaded pictures */ .upload-list-inline .emmet-upload-listing-particular { float : left; width : 200px; margin-right : 8px; } .upload-list-inline [class*='-upload-list-rtl'] .ant-upload-list-item { bladder : right; } Limit files with maxCount. Will replace current one when maxCount is i.
import { Upload, Button, Infinite } from 'antd' ; import { UploadOutlined } from '@pismire-design/icons' ; ReactDOM. return ( < Space direction = "vertical" way = { { width : '100%' } } size = "large" > < Upload action = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "picture" maxCount = { ane } > < Button icon = { < UploadOutlined /> } > Upload (Max: 1 ) </ Button > </ Upload > < Upload action = "https://www.mocky.io/v2/5cc8019d300000980a055e76" listType = "picture" maxCount = { three } multiple > < Button icon = { < UploadOutlined /> } > Upload (Max: 3 ) </ Button > </ Upload > </ Space > , mountNode, ) ; Use Aliyun OSS upload instance.
import { Class, Upload, bulletin, Push button } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; class AliyunOSSUpload extends React.Component { state = { OSSData : { } , } ; async componentDidMount ( ) { look this . init ( ) ; } init = async ( ) => { try { const OSSData = await this . mockGetOSSData ( ) ; this . setState ( { OSSData, } ) ; } grab (error) { message. error (fault) ; } } ; // Mock become OSS api // https://assist.aliyun.com/document_detail/31988.html mockGetOSSData = ( ) => ( { dir : 'user-dir/' , elapse : '1577811661' , host : '//www.mocky.io/v2/5cc8019d300000980a055e76' , accessId : 'c2hhb2RhaG9uZw==' , policy : 'eGl4aWhhaGFrdWt1ZGFkYQ==' , signature : 'ZGFob25nc2hhbw==' , } ) ; onChange = ( { fileList } ) => { const { onChange } = this .props; console. log ( 'Aliyun OSS:' , fileList) ; if (onChange) { onChange ( [ ...fileList] ) ; } } ; onRemove = file => { const { value, onChange } = this .props; const files = value. filter ( v => 5.url !== file.url) ; if (onChange) { onChange (files) ; } } ; getExtraData = file => { const { OSSData } = this .country; render { key : file.url, OSSAccessKeyId : OSSData.accessId, policy : OSSData.policy, Signature : OSSData.signature, } ; } ; beforeUpload = async file => { const { OSSData } = this .land; const expire = OSSData.expire * thou ; if (elapse < Date. now ( ) ) { look this . init ( ) ; } const suffix = file.name. piece (file.name. lastIndexOf ( '.' ) ) ; const filename = Date. at present ( ) + suffix; file.url = OSSData.dir + filename; return file; } ; render ( ) { const { value } = this .props; const props = { name : 'file' , fileList : value, action : this .country.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 = ( ) => ( < Course labelCol = { { bridge : 4 } } > < Grade.Detail label = "Photos" name = "photos" > < AliyunOSSUpload /> </ Course.Item > </ Form > ) ; ReactDOM. render ( < FormPage /> , mountNode) ; By using itemRender, nosotros can integrate upload with react-dnd to implement drag sorting of uploadList.
import React, { useState, useCallback, useRef } from 'react' ; import { Upload, Push 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 blazon = 'DragableUploadList' ; const DragableUploadListItem = ( { originNode, moveRow, file, fileList } ) => { const ref = React. useRef ( ) ; const index = fileList. indexOf (file) ; const [ { isOver, dropClassName } , drop] = useDrop ( { take : type, collect : monitor => { const { index : dragIndex } = monitor. getItem ( ) || { } ; if (dragIndex === index) { return { } ; } return { isOver : monitor. isOver ( ) , dropClassName : dragIndex < alphabetize ? ' drop-over-downward' : ' drop-over-upwards' , } ; } , drib : detail => { moveRow (item.index, index) ; } , } ) ; const [ , drag] = useDrag ( { type, item : { index } , collect : monitor => ( { isDragging : monitor. isDragging ( ) , } ) , } ) ; drib ( elevate (ref) ) ; const errorNode = < Tooltip title = "Upload Error" > {originNode.props.children} </ Tooltip > ; return ( <div ref = {ref} className = { ` ant-upload-draggable-list-item ${isOver ? dropClassName : '' } ` } way = { { cursor : 'move' } } > {file.status === 'error' ? errorNode : originNode} </div > ) ; } ; const DragSortingUpload = ( ) => { const [fileList, setFileList] = useState ( [ { uid : '-ane' , proper name : 'image1.png' , status : 'washed' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-2' , name : 'image2.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-iii' , name : 'image3.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-4' , name : 'image4.png' , status : 'done' , url : 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png' , } , { uid : '-5' , proper noun : 'image.png' , status : 'error' , } , ] ) ; const moveRow = useCallback ( ( dragIndex, hoverIndex ) => { const dragRow = fileList[dragIndex] ; setFileList ( update (fileList, { $splice : [ [dragIndex, 1 ] , [hoverIndex, 0 , dragRow] , ] , } ) , ) ; } , [fileList] , ) ; const onChange = ( { fileList : newFileList } ) => { setFileList (newFileList) ; } ; return ( < DndProvider backend = {HTML5Backend} > < Upload action = "https://world wide web.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-elevate-sorting .pismire-upload-draggable-list-detail { border-superlative : 2px dashed rgba ( 0, 0, 0, 0 ) ; edge-bottom : 2px dashed rgba ( 0, 0, 0, 0 ) ; } #components-upload-demo-drag-sorting .ant-upload-draggable-listing-detail.drop-over-downward { border-bottom-colour : #1890ff ; } #components-upload-demo-elevate-sorting .emmet-upload-draggable-list-item.drop-over-up { border-top-color : #1890ff ; } Use progress for customize progress bar.
import { Upload, bulletin, Push } from 'antd' ; import { UploadOutlined } from '@ant-design/icons' ; const props = { proper name : 'file' , activeness : 'https://world wide web.mocky.io/v2/5cc8019d300000980a055e76' , headers : { authorization : 'dominance-text' , } , onChange ( info ) { if (info.file.status !== 'uploading' ) { console. log (info.file, info.fileList) ; } if (info.file.condition === 'done' ) { message. success ( ` ${info.file.name} file uploaded successfully ` ) ; } else if (info.file.status === 'error' ) { bulletin. fault ( ` ${info.file.name} file upload failed. ` ) ; } } , progress : { strokeColor : { '0%' : '#108ee9' , '100%' : '#87d068' , } , strokeWidth : iii , format : pct => ` ${ parseFloat (pct. toFixed ( ii ) ) } % ` , } , } ; ReactDOM. return ( < Upload { ...props} > < Push icon = { < UploadOutlined /> } > Click to Upload </ Push button > </ Upload > , mountNode, ) ; API#
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| accept | File types that tin be accustomed. See input take Aspect | string | - | |
| action | Uploading URL | string | (file) => Promise < string> | - | |
| beforeUpload | Hook function which will be executed before uploading. Uploading will be stopped with false or a rejected Promise returned. When returned value is Upload.LIST_IGNORE, the list of files that accept been uploaded will ignore it. Warning：this function is non 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 | role | - | |
| data | Uploading extra params or function which can return uploading extra params | object | (file) => object | Hope < object> | - | |
| defaultFileList | Default list of files that have been uploaded | object [ ] | - | |
| directory | Support upload whole directory (caniuse) | boolean | false | |
| disabled | Disable upload push button | boolean | false | |
| fileList | List of files that have been uploaded (controlled). Here is a common issue #2423 when using information technology | UploadFile[ ] | - | |
| headers | Fix request headers, valid to a higher place IE10 | object | - | |
| iconRender | Custom prove icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - | |
| isImageUrl | Customize if return < img /> in thumbnail | (file: UploadFile) => boolean | (inside implementation) | |
| itemRender | Custom item of uploadList | (originNode: ReactElement, file: UploadFile, fileList: object [ ], actions: { download: function, preview: function, remove: function }) => React.ReactNode | - | iv.sixteen.0 |
| listType | Built-in stylesheets, support for three types: text, flick or motion-picture show-carte | string | text | |
| maxCount | Limit the number of uploaded files. Volition supplant 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 tin select multiple files with CTRL holding down while multiple is set to be true | boolean | false | |
| name | The proper name of uploading file | string | file | |
| openFileDialogOnClick | Click open file dialog | boolean | truthful | |
| previewFile | Customize preview file logic | (file: File | Blob) => Promise < dataURL: cord> | - | |
| progress | Custom progress bar | ProgressProps (back up type="line" only) | { strokeWidth: 2, showInfo: false } | iv.3.0 |
| showUploadList | Whether to testify 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 | office: 4.7.0 |
| withCredentials | The ajax upload with cookie sent | boolean | false | |
| onChange | A callback function, can be executed when uploading land is irresolute, see onChange | function | - | |
| onDrop | A callback function executed when files are dragged and dropped into upload surface area | (effect: React.DragEvent) => void | - | 4.16.0 |
| onDownload | Click the method to download the file, pass the method to perform the method logic, practice non laissez passer the default jump to the new TAB | role(file): void | (Bound to new TAB) | |
| onPreview | A callback function, will be executed when file link or preview icon is clicked | role(file) | - | |
| onRemove | A callback function, will be executed when removing file push is clicked, remove event will exist prevented when return value is false or a Promise which resolve(false) or decline | office(file): boolean | Hope | - |
UploadFile#
Extends File with boosted props.
| Property | Clarification | Type | Default |
|---|---|---|---|
| name | File proper name | string | - |
| percent | Upload progress percent | number | - |
| condition | Upload status. Show dissimilar style when configured | mistake | success | done | uploading | removed | - |
| thumbUrl | Pollex paradigm url | string | - |
| uid | unique id. Will auto generate when not provided | string | - |
| url | Download url | string | - |
onChange#
The function volition be called when uploading is in progress, completed or failed.
When uploading state change, it returns:
{ file: { /* ... */ } , fileList: [ /* ... */ ] , event: { /* ... */ } , } -
fileFile object for the electric current operation.{ uid: 'uid' , // unique identifier, negative is recommend, to prevent interference with internal generated id name: 'xx.png' , // file name status: 'done' , // options：uploading, done, fault, removed. Intercepted file by beforeUpload don't have status field. response: '{"status": "success"}' , // response from server linkProps: '{"download": "image"}' , // additional html props of file link xhr: 'XMLHttpRequest{ ... }' , // XMLHttpRequest Header } -
fileListcurrent list of files -
resultresponse from server, including uploading progress, supported past advanced browsers.
FAQ#
How practise I implement upload server side?#
-
You can consult jQuery-File-Upload almost how to implement server side upload interface.
-
At that place is a mock example of express in rc-upload.
I desire to display download links.#
Delight set property url of each item in fileList to control content of link.
How to use customRequest?#
See https://github.com/react-component/upload#customrequest.
Why volition the fileList that's in control non trigger onChange status update when the file is not in the list?#
onChange will only trigger when the file is in the list, it will ignore any events removed from the listing. Please notation that at that place does exist a issues which makes an event nonetheless trigger even when the file is not in the list before 4.xiii.0.
Why does onChange sometimes render File object and other times return { originFileObj: File }?#
For compatible case, we return File object when beforeUpload render imitation. It will merge to { originFileObj: File } in next major version. Current version is compatible to get origin file past info.file.originFileObj. You tin alter this before major release.
Source: https://ant.design/components/upload/
0 Response to "Click to Upload Not Working Dropzone Js"
Post a Comment