ReactJS Ajax File Upload

Question

I'm trying to upload a file with React but am unsure of the best way to do so. I'm trying to store the file on change but that doesn't appear to be working. I'm currently getting the error Uncaught TypeError: Illegal invocation on submit.

Is there a better approach to uploading files with React?

File change & upload functions:

changeFile: function(e) {
            this.setState({csvFile: e.target.files[0]});
        },

importFile: function() {
            data = new FormData();
            data.append('file', this.state.csvFile);
            $.ajax({
                type: "POST",
                url: "/csv/import",
                data: data,
                dataType: "JSON"
            }).done(function(json){
                alert("hooray!");
            });
        },

JSX:

    <div>
        <input type="file" onChange={this.changeFile}/>
        <button onClick={this.importFile}>Import</button>
    </div>

Use react-file-uploader npmjs.com/package/react-file-uploader — Nikhil Ranjan
– Nikhil Ranjan, Commented Apr 11, 2016 at 7:31

Ryan King · Accepted Answer · 2016-04-11 07:56:53Z

2

Ugh, turns out I just needed to add the following to my ajax call:

processData: false,
contentType: false

OR

importFile: function() {
            data = new FormData();
            data.append('file', this.state.csvFile);
            $.ajax({
                type: "POST",
                url: "/csv/import",
                data: data,
                dataType: "JSON",
                processData: false,
                contentType: false
            }).done(function(json){
                alert("hooray!");
            });
        },

answered Apr 11, 2016 at 7:56

Ryan King

3,70612 gold badges51 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jackypan1989 · Accepted Answer · 2016-04-11 07:33:14Z

1

The setState is an async function, so you cant get state immediately.
You can try with callback to check your file.

this.setState({
  ...
}, function(){
  ...
  console.log(...);
});

ref: https://facebook.github.io/react/docs/component-api.html#setstate

answered Apr 11, 2016 at 7:33

jackypan1989

2,8661 gold badge15 silver badges11 bronze badges

2 Comments

Ryan King Over a year ago

Thanks, but this creates a new problem on submit: Uncaught TypeError: Illegal invocation

jackypan1989 Over a year ago

It's a jQuery error. use formdata or jQuery config. see stackoverflow.com/questions/12755945/…

Collectives™ on Stack Overflow

ReactJS Ajax File Upload

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related