ReactJS Ajax File Upload

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>
jquery ajax file-upload reactjs
bhargav

Answers 1

Submit Answer
  • kishan patel

    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!");
            });
        },

Related Articles