react-component / upload

React Upload

rc-upload

React Upload

Development

npm install
npm start

Example

http://localhost:8000/

online example: https://upload.react-component.vercel.app/

Feature

• support IE11+, Chrome, Firefox, Safari

install

Usage

var Upload = require('rc-upload');
var React = require('react');
React.render(<Upload />, container);

API

props

name	type	default	description
name	string	file	file param post to server
style	object	{}	root component inline style
className	string	-	root component className
disabled	boolean	false	whether disabled
component	"div"	"span"	"span"
action	string | function(file): string | Promise<string>		form action url
method	string	post	request method
directory	boolean	false	support upload whole directory
data	object/function(file)		other data object to post or a function which returns a data object(a promise object which resolve a data object)
headers	object	{}	http headers to post, available in modern browsers
accept	string		input accept attribute
capture	string		input capture attribute
multiple	boolean	false	only support ie10+
onStart	function		start upload file
onError	function		error callback
onSuccess	function		success callback
onProgress	function		progress callback, only for modern browsers
beforeUpload	function	null	before upload check, return false or a rejected Promise will stop upload, only for modern browsers
customRequest	function	null	provide an override for the default xhr behavior for additional customization
withCredentials	boolean	false	ajax upload with cookie send
openFileDialogOnClick	boolean	true	useful for drag only upload as it does not trigger on enter key or click event

onError arguments

1. err: request error message
2. response: request response, not support on iframeUpload
3. file: upload file

onSuccess arguments

1. result: response body
2. file: upload file
3. xhr: xhr header, only for modern browsers which support AJAX upload. since 2.4.0

customRequest

Allows for advanced customization by overriding default behavior in AjaxUploader. Provide your own XMLHttpRequest calls to interface with custom backend processes or interact with AWS S3 service through the aws-sdk-js package.

customRequest callback is passed an object with:

• onProgress: (event: { percent: number }): void
• onError: (event: Error, body?: Object): void
• onSuccess: (body: Object): void
• data: Object
• filename: String
• file: File
• withCredentials: Boolean
• action: String
• headers: Object

methods

abort(file?: File) => void: abort the uploading file

License

rc-upload is released under the MIT license.

upload's Issues

移动端上传问题

2.0.4 版本 使用拍照上传可以成功，但是选择相册没有上传而是直接onsuccess 返回的参数为“”

Can I preview the image after uploaded?

Can I preview the image after uploaded?

form 不能嵌套

<form>
<Upload />
<form>

ie9 渲染出错，需要将 upload form 移到 body 上然后绝对定位

ie8下，服务器端应该返回怎么样的结果

我在做ie8下的调试，但是不是很明白你们提供的IE8/9的Note的意思。
项目后端用的nodejs，目前返回的结果是

    <script>document.domain="localhost"</script>  + {} //发送过来的数据中好像没有domain，我这里返回“”或者null也都不可以

前端会提醒返回document.domain的script标签，并且显示拒绝访问。
后端返回的数据有问题吗
谢谢

How to cancel the upload in between of an upload process.

While uploading, I wanted a button which on clicking aborts the upload process.
I guess onProgress must be having something which does this.
I tried returning false or empty promise in onProgress, which doesn't works.

Thanks

reqs[uid].abort is not a function

触发场景: 使用自定义上传事件customRequest，当用户点击上传列表的取消按钮的时候报错：

reqs[uid].abort is not a function

更改AjaxUploader.jsx组件中
判断为

if (reqs[uid].abort) {
    reqs[uid].abort();
    delete reqs[uid];
}

修复

跨域ajax请求,遇到的问题

请问 onchange 的返回详细格式是什么？

{
   uid: 'uid',      // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
   name: 'xx.png'   // 文件名
   status: 'done',  // 状态有：uploading done error removed
   response: '{"status": "success"}',  // 服务端响应内容
}
file 除了这些字段还有那些？thumbUrl 是这里的吗？？

fileList 的格式是这样的吗

[{
        uid: -1,
        name: 'xxx.png',
        status: 'done',
        url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
        thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
      }]

event 具体是什么??

麻烦了 谢谢
@afc163

fix data support for form iframe upload in ie8/9

data 属性没放到 form 里

I couldn't find out how to limit the file size

I couldn't find out how to limit the file size

how to use props "accept"?

Description is crude, and use not illustrated in example.

`customRequest` callback 上的 `filename` 容易误导

customRequest callback 上参数上的 filename 给人直观感觉为用户所上传的文件名，而实际上却是 props.name，比较容易误导

使用flash上传

感觉iframe不怎么靠谱啊，各种问题。

beforeUpload 中 Promise.reject 的处理

@shepherdwind

你好，我在 beforeUpload中 如果抛出了Promise.reject的异常，IE和火狐等浏览器都会出现
Unhandled promise rejection的错误；

能否在源码 AjaxUploader文件里面的upload方法里面：

if(before&&before.then) { before.then(...) }

添加一个异常捕获处理？

if(before&&before.then) { before.then(...).catch((err)=>{}) }

Can not get ref inside Upload

<Upload>
  <input ref="xx" />   // can not get this refs when componentDidMount
</Upload>

upload/src/Upload.jsx

Line 58 in 9b5b6e1

const { Component } = this.state;

是否支持直传到OSS服务器

用STS临时授权的方式上传

upload上传文件携带cookie的问题

XMLHttpRequest可以在跨域请求时发送认证信息，但在默认情况下HTTP Cookies和HTTP 认证是不被发送的。要发送Preflighted 认证请求需要设置XMLHttpRequest对象的withCredentials属性。

我到源码改了withCredentials属性为true，这时候请求头才会携带cookie，当请求头没有cookie的时候，后台返回的是不在线状态

IE9, couldn't limit the file size

https://github.com/react-component/upload/blob/master/src/IframeUploader.jsx
Line 64 :
onChange = () => {
const target = this.getFormInputNode();
// ie8/9 don't support FileList Object
// http://stackoverflow.com/questions/12830058/ie8-input-type-file-get-files
const file = this.file = {
uid: getUid(),
name: target.value,
};

so, beforeUpload can't get file size

upload上传文件过大

rc-upload如何分片上传文件？

Why not return response's header

In some case, the user need to get some information from the response header in OnSuccess callback.
Why not add this?

选择文件后如何阻止文件上传

在上传之前，有时候需要对已选择的文件进行校验，例如大小、类型等等。
目前可以在onStart中进行校验，但是校验失败时，无法阻止上传请求的发送。

SSR support

现在 Upload 在 node 环境下渲染会用 IframeUploader，浏览器下渲染会用 AjaxUploader，导致两边渲染结果不同，做 SSR 的时候 React 会有警告。

JWT support?

请问一下 upload 组件在 post 时候怎样在添加 headers 里面加入token 信息呢？

比如：

Authorization: Bearer .....

建议: upload 组件不要 action ， 换成回调 promise

用 action 对前后端都有要求，一点都不利于扩展。
修改为一个 promise 回调这样只需要在前端处理就可以了

怎么改请求的方法为PUT ？

最近用antd Upload组件上传文件时，发现组件默认的是使用POST方法，且没有办法改，请问是否支持PUT上传文件？不支持是否有什么方案解决？谢谢

阿里云oss参数错误

阿里OSS上传文件忽略file字段之后的参数，amazon s3同样存在该问题

request.js 39行放到44行后面可以解决。

后端接口要返回什么样的数据

后端要返回什么样的数据啊？
刚写的代码，onChange事件发现只有uploading 状态

上传文件带cookie

如题，上传时没有带cookie，导致需要登录的应用在上传的时候无法成功。可否加上在请求中加上credential.

经过测试request.js中加上

  xhr.withCredentials = true;

就可以

IOS11上图片为HEIC格式是否支持上传

IOS11上图片为HEIC格式是否支持上传?

Only when status == 200 will resulting success

upload/src/request.js

Line 53 in 0d4054c

if (xhr.status !== 200) {

这个地方不应该写成只能是200吧，例如 204 no content 之类的，也应该允许为success

abort with customRequest

I have an Upload form item that uses a customRequest. I'm getting an error when trying to leave the page:

AjaxUploader.js:185 Uncaught TypeError: Cannot read property 'abort' of undefined
at eval (webpack:///./~/rc-upload/lib/AjaxUploader.js?:185:18)

How can i manually abort the upload or signal to AjaxUploader that the request was completed through the custom request?

beforeUpload返回图片压缩后的Blob对象时，依然使用原file对象

upload时有判断必须是file对象，可不可以加上Blob对象的判断

IE10 中第二次上传同一文件不触发 onChange

问题如标题所述。调试信息如下图，https://github.com/react-component/upload/blob/master/src/AjaxUploader.jsx#L29 el.value = ''; 执行后无效果。

IE11 和其他主流浏览器中未发现此问题。

Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response

在跨域上传时出现的错误，发现来自这一行，这里是不是要做判断？

xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

https://github.com/react-component/upload/blob/master/src/request.js#L68

上传的默认超时时间怎么设置

online example link is broken.

404 not found returned.

上传网络资源

上传网络图片资源到指定服务器该怎么做呢，好像点击上传没有提供回调，都是打开本地文件

请问如何和表单数据一起提交

由于打开后是直接上传了。如果是通过data来传递表单数据.那么后台该如何获取。我后台是node.js. express;

cancel upload

how to cancel upload
this.refs.inner.abort is not supplied

form 放入 iframe

<iframe url='data:<form></form>'>

避免 form 嵌套

父页面设置了 document.domain 时报错

[email protected]

请教下最新版本（2.3.7）以上package.json的module字段的意义

最新版本中（2.3.7），package.json多了一个字段："module": "./es/index"，请问是什么意思？

图片 beforeUpload 时的宽高检测

我的尝试是：

beforeUpload={(file) => {
    const img = new Image()
    img.src = URL.createObjectURL(file)
    img.onload = () => {
        // ... 进行 naturalWidth, naturalHeight 检测 
    }
}}

但是在 onload 时，没有办法在 beforeUpload 里 return false，
只能够在上传完成后进行宽高检测吗？

data参数中出现双引号会出错

for (const key in data) { if (data.hasOwnProperty(key)) { inputs.push(); } }
源代码中这里用拼字符串的方式插入表单节点，如果data[key]中有双引号，会造成值设置失败。
建议改成createElement之后设置value的方式插入节点。

较大的文件上传中的时候想要取消上传有什么方法吗？

看到内部有提供abort方法，但在外面取不到

Domain Problem

请教下，这个问题不是很明白。
IE9,后端响应格式已经设置text/html,内容也有添加<script>document.domain=***</script>,
报参数无效。

iOS拍摄的照片上传后出现逆时针90度旋转

rt，能否根据图片exif-orientation属性进行相应的图片旋转，保持图片的正常显示

使用 reqwest 2.x

https://github.com/ded/reqwest

试试这个，统一下

不知道为啥要 require React

在加了FormData polyfill的IE9里面会使用ajaxUploader从而导致失败

如题，
建议判断的时候改成无法模仿的File