soaanyip / react-fileupload Goto Github PK

chooseFile: (files) => { this.state.files = files; this.props.creatingFiles(); return true; }
when I did this, I couldn't get the files' list, I guess possibly the problem of this pointer

Hi, dude. I use this component for uploading pictures on my project. So, I faced with issue. I not see how I can track progress for each file if user uploaded multiple files. Because I should know some identification for each file which been uploaded. But I can't find example for it.

Can you help me with it? Maybe some example or something else?

Thx.

var file = _this3.files[key];
var fileFieldName = _this3.fileFieldName(file);
formData.append(fileFieldName, file);

触发条件：

选择上传

I get this error:

Error: Parsing file node_modules/react-fileupload/src/FileUpload.js: Unexpected token (196:16) (I've removed the full path for brevity).

To replicate:

• npm install babel babelify --save-dev
• Add the following to package.json
  "browserify": { "transform": [ [ "babelify", { "blacklist": [ "regenerator" ] } ] ] }
• npm install react-fileupload --save
• browserify -r react-fileupload

In the README you are missing </button> (it just says <button ref="uploadBtn">upload<button>)

已经解决，在 beforeUpload 中添加处理，并且 return false;
然后通过 filesToUpload 来传入处理过的图片文件即可

PS: filesToUpload 还是得通过 options 的方式来上传，组件并没有提供 filesToUpload 这个方法(建议可以换一个方法名以避免被 options 中的 filesToUpload 覆盖了)

能够做到选择文件之后继续添加文件吗？
目前貌似没有这个接口。

上传中文文件名的文件时候会有问题，PHP的$_FILES数组为空
用 fileFieldName 这个属性去处理一下就好了，但不知道这应该是哪部分的锅

This error is happening to me when trying to add an attatchment while on IE9.
Clicking the add attatchment button will display the file explorer, after selecting any file the error
is displayed in the browser console. This means I cannot do any upload on IE9 so far.

PD: IE11 and Chrome are working fine as expected

Hey,

loving this component! 多謝！

I'm potentially uploading pretty large files, and I'd like to be able to stop the upload somehow.

Do you think you could provide a way to abort the XHR request? I realize right now it's encapsuled in commonUpload, so we'd either have to pull it outside of that function (so I can call this.refs.uploader.abort()), or maybe we could at least provide a workaround by, say, aborting if the user returns true (or false?) from within the progress callback? What do you think?

这个我控制台打印的数据 !

Hey @SoAanyip ,
Love this component! I'm using it to upload files to a sailsjs server.

Salis uses Skipper as a body parser. Skipper has hhis quirky bug where it will ignore all text fields sent after the file upload. This gives a bit buggy behaviour.

I propose a simple ordering option which tells the component which ones to append first. I'd be happy to add this to it. What are your thoughts on this?

I think it has something to do with react 16 and webpack.
Is there a quick fix?

Thank you for your time.

main.min.js?1502:1 Uncaught TypeError: Cannot read property 'shape' of undefined
    at Object.eval (main.min.js?1502:1)
    at t (main.min.js?1502:1)
    at eval (main.min.js?1502:1)
    at eval (main.min.js?1502:1)
    at eval (main.min.js?1502:1)
    at eval (main.min.js?1502:1)
    at Object../node_modules/react-fileupload/dist/main.min.js (bundle__b7b5b9e7cd.js:7663)
    at __webpack_require__ (bundle__b7b5b9e7cd.js:679)
    at fn (bundle__b7b5b9e7cd.js:89)
    at eval (testc.jsx?a25c:6)

I wanted to use this component for a mobile website and we wanted to support older Android browsers.

Currently, the implementation is too specific to checking for IE. If possible, please use feature detection instead so that old non-IE browsers will get the fallback form implementation.

I also need the fallback form to render the paramAddToField fields as hidden fields so that the Rails CSRF token is included, otherwise the request will be rejected.

the code following

<li><i>2、考场记录单</i>
	<FileUpload ref="fileUpload1" options={fileupload}>
               <button ref="chooseAndUpload">上传附件</button>
        </FileUpload>
</li>
<li><i>3、考场纪律</i>
	<FileUpload ref="fileUpload2" options={fileupload}>
		<button ref="chooseAndUpload">上传附件</button>
	</FileUpload>
</li>
<li><i>4、企业logo</i>
	<FileUpload options={fileupload}>
		<button ref="chooseAndUpload">上传附件</button>
	</FileUpload>
</li>

this code has three fileUpload component,
when the user upload filing, how can i make sure the user click anyone fileUpload;

在我的页面中有需要使用多个FileUpload组件实现上传功能。
然而我发现，在IE9中，如果在同一个页面中使用多个FileUpload组件只有第一个上传按钮会生效。
查看代码发现，你们在处理IE9的多文件上传时，针对每次上传都创建了一个独立的form表单。你们用全局变量currentIEID用来区分每个新增的form。
我认为这里的关键问题就是你们使用了全局变量作为区分，如果我需要实例化多个FileUpload组件，各个FileUpload组件之间将无法区分。

If your FileUpload node contains NULL child, a TypeError is raised.

            React.Children.forEach(props.children, function (child) {
                if (child.ref == 'chooseAndUpload') {
                    chooseBtn = child;
                    flag++;
                } else {
                    flag == 0 ? before.push(child) : flag == 1 ? middle.push(child) : '';
                }
            });

It's a common feature to prepare optional element and initialize them as null. Would it be possible to force check that child is not null ?

For instance:

render() {
  let myOptionalElement = null;
  if (false) {
    myOptionalElement = <span>i'm optional</span>
  }
  return (
    <FileUpload>
      {myOptionalElement}
    </FileUpload>
  );
}

lastModified:1500718673968
lastModifiedDate:
Sat Jul 22 2017 18:17:53 GMT+0800 (**标准时间)
name:"fdsa.zip"
size:0
type:""
webkitRelativePath:""

Package.json is pointing the main script to src/FileUpload.js, please change it to dist/main.js to allow projects that don't use JSX to use this package.

Thanks!

如题。

是否有设置上传接口调用时配置header的入口？

Just imagine that I need in some cases made the "Browse" button not clickable, when user doesn't have permissions to upload the file or the whole page is in read-only mode

when i use setstate in uploadSuccess, render() does not call

https://facebook.github.io/react/docs/more-about-refs.html
"ref=" syntax is now deprecated

ie9 下 能否手动上传 ? 就是先选文件后上传

ie9下 能否支持上传后的回调事件?

谢谢
:)
👍

Hi,

Thanks for the great component. Is there a full working example to check out? Or a demo?

Omid

请问是否可以在回调函数中获取上传到formData中的图片二进制流呢？

Hi, is there any feature/callback to be called to clear / remove the selected file from native input?
in this case
<input type="file" name="ajax_upload_file_input" accept="image/*" multiple="" style="display: none;">

This is the result of the console I print !

Update: This is because the FileUpload component doesn't use the "name" (aka "fileFieldName") provided by the client as the key of the uploaded file.

It is a server issue. The server side expects FormData with
I am trying to use this component bu have got a "400" error. Don't know where the issue is but the stack trace is as follows.

commonUpload @ FileUpload.js:474
commonChange @ FileUpload.js:251
LinkedValueUtils.executeOnChange @ LinkedValueUtils.js:129
_handleChange @ ReactDOMInput.js:106
ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js:71
executeDispatch @ EventPluginUtils.js:79
executeDispatchesInOrder @ EventPluginUtils.js:102
executeDispatchesAndRelease @ EventPluginHub.js:43
executeDispatchesAndReleaseTopLevel @ EventPluginHub.js:54
forEachAccumulated @ forEachAccumulated.js:23
EventPluginHub.processEventQueue @ EventPluginHub.js:259
runEventQueueInBatch @ ReactEventEmitterMixin.js:18
ReactEventEmitterMixin.handleTopLevel @ ReactEventEmitterMixin.js:34
handleTopLevelWithoutPath @ ReactEventListener.js:93
handleTopLevelImpl @ ReactEventListener.js:73
Mixin.perform @ Transaction.js:136
ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:94
ReactEventListener.dispatchEvent @ ReactEventListener.js:204

IE input onChange event have different behavior. It fires when you clear input value. You can check this fiddle https://jsfiddle.net/5b5y3yt0/
So file uploading in IE 11 runs 3 times in a row.

Could you please add files length check before uploading.

react更新到15.4.2版本后，react-fileupload组件似乎不能用了，无法获取click事件

https://github.com/SoAanyip/React-FileUpload/blob/master/src/FileUpload.js#L66

这里为什么要用这个 _updateProps 方法，主要是解决什么问题？如果是设置默认值的话不是有 getDefaultProps 吗？

按照例子来报错，错误完整信息：Element ref was specified as a string (ajax_upload_file_input) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).

`
render() {
console.log(this);
console.log("===");

return (

  <div className="page2-page">
    <PageHead title="导入历史订单" description="xxxx。"/>
    <Tab defaultActiveKey="taobao-import" onChange={this.handleChange}>
      {
        tabs.map(item => <TabPane key={item.key} tab={item.tab}
                                  onClick={this.handleClick}></TabPane>)
      }
    </Tab>
    <DownLoadItem/>
    <div className="title">
      第二步： 上传历史订单
    </div>
    <div className="content">
      <FileUpload options={this.uploadOptions}>
        <p>You have uploaded {this.state.rate}</p>
        <Button ref="chooseAndUpload" type="primary">选中文件</Button>
      </FileUpload>

    </div>
  
  </div>
);

}
`
为什么当上传的时候，this.state.rate没有值？不会变化为什么？

uploading: function (progress) {
console.log(this)
let rate = progress.loaded / progress.total + '%';
this.setState({rate})
console.log('loading...', rate)
message.error(Upload failed，)
}

Getting the following warning:

Warning: FileUpload: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

Versions:

    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-fileupload": "^2.4.0",

I used React-Fileupload in my project and i have a label to display the file name selected and i have written my own upload process on button click event.

`<FileUpload ref='fileload' options={options} className='row'>
    <div className='large-10 small-9 columns'>
        <input type='text' id="fileName" placeholder='filename'  onChange={this.fileTextChange}/>
    </div>
    <div ref="chooseBtn" className='large-2 small-2 columns'>
        <button ref="chooseBtn" className='button icon-button'>
            <i className="icon-folder-open"></i>
        </button>
    </div>
    <div className='large-12 large-centered columns'>
        <button ref="uploadBtn" className='expanded button' onClick={this.uploadFile} >
            <span> UPLOAD </span>
        </button>
    </div>                                    
</FileUpload>`

When i select a file the file name is displayed in the textbox, and when i remove the file name in the text box and select the file again then the chooseFile method is not triggered.

Could plesase help me how fileupload if we choose the same file again?

Thanks.

if I select more than one file, i can get only one progress event of all the files.
then i can only get one progress bar.
i want to get every file's progress bar.

建议给出完整的demo。对于初始入门react的来说还是比较有必要的。谢谢！

年前好像还支持拖拽的 现在好像不能拖动文件上传了

现在是只要执行commonUpload方式便会清除input的值，不管成功与否

has been blocked by CORS policy: Request requires preflight, which is disallowed to follow cross-origin redirect. when i use react-fileupload, i get this error, how can I fix it