@wannaby/wanna-ant-uploader

Wanna Ant Design custom Uploader

Modified attributes:

- uploadListWrapperRender(uploadListNode: ReactElement, fileList: object[]) => React.ReactNode

Returns: custom wrapper of the whole component

fileList

List of files that have been processed

uploadListNode

ReactComponent that contains all items of uploadList rendered by itemRender

- itemRender(originNode: ReactElement, file: object, onRemove: function, fileList: object[])

Custom item of uploadList

onRemove

A function that can be executed to remove file from file list

Usage

import { Upload } from 'wanna-ant-uploader';

const App = () => (
  <>
    <Upload
        uploadListWrapperRender={(uploadListNode, fileList) => (
            <>
                Global uploader Wrapper

                {uploadListNode}
            </>
        )}
        itemRender={(originNode, file, onRemove, fileList) => (
            <>Upload list item</>
        )

       }>
        Some child content
    </Upload>
  </>
);

When To Use

Uploading is the process of publishing information (web pages, text, pictures, video, etc.) to a remote server via a web page or upload tool.

• When you need to upload one or more files.
• When you need to show the process of uploading.
• When you need to upload files by dragging and dropping.

API

Property	Description	Type	Default	Version
accept	File types that can be accepted. See input accept Attribute	string	-
action	Uploading URL	string | (file) => Promise	-
beforeUpload	Hook function which will be executed before uploading. Uploading will be stopped with false or a rejected Promise returned. Warning：this function is not supported in IE9	(file, fileList) => boolean | Promise	-
customRequest	Override for the default xhr behavior allowing for additional customization and ability to implement your own XMLHttpRequest	function	-
data	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	false
disabled	Disable upload button	boolean	false
fileList	List of files that have been uploaded (controlled). Here is a common issue #2423 when using it	object[]	-
headers	Set request headers, valid above IE10	object	-
iconRender	Custom show icon	(file: UploadFile, listType?: UploadListType) => ReactNode	-
isImageUrl	Customize if render <img /> in thumbnail	(file: UploadFile) => boolean	(inside implementation)
uploadListWrapperRender	Component wrapper	(uploadListNode: ReactElement, fileList: object[])
itemRender	Custom item of uploadList	(originNode: ReactElement, file: UploadFile, onRemove: function, fileList?: object[]) => React.ReactNode	-	4.7.0
listType	Built-in stylesheets, support for three types: text, picture or picture-card	string	text
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 to be true	boolean	false
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: 2, showInfo: false }	4.3.0
showUploadList	Whether to show default upload list, could be an object to specify showPreviewIcon, showRemoveIcon, showDownloadIcon, removeIcon and downloadIcon individually	boolean | { showPreviewIcon?: boolean, showDownloadIcon?: boolean, showRemoveIcon?: boolean, removeIcon?: ReactNode | (file: UploadFile) => ReactNode, downloadIcon?: ReactNode | (file: UploadFile) => ReactNode }	true	function: 4.7.0
transformFile	Customize transform file before request	Function(file): string | Blob | File | Promise<string | Blob | File>	-
withCredentials	The ajax upload with cookie sent	boolean	false
onChange	A callback function, can be executed when uploading state is changing, see onChange	function	-
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	(Jump to new TAB)
onPreview	A callback function, will be executed when file link or preview icon is clicked	function(file)	-
onRemove	A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is false or a Promise which resolve(false) or reject	function(file): boolean | Promise	-

onChange

The function will be called when uploading is in progress, completed or failed.

When uploading state change, it returns:

{
  file: { /* ... */ },
  fileList: [ /* ... */ ],
  event: { /* ... */ },
}

1. file File object for the 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, error, 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
   }

2. fileList current list of files

3. event response from server, including uploading progress, supported by advanced browsers.

FAQ

How to implement upload server side?

• You can consult jQuery-File-Upload about how to implement server side upload interface.
• There is a mock example of express in rc-upload.

I want to display download links.

Please set property url of each item in fileList to control content of link.

How to use customRequest?

See https://github.com/react-component/upload#customrequest.