File Upload error - PHP and React

Question

I am trying to use React to trigger PHP script for file uploading and saving it in another folder location. I could do it through normal HTML/PHP but when i try to do it using react, i get the following error. Below is the entire code for it. If anyone can look at it and guide me through this, it would be highly appreciated.

<body>
<div id="container" class="center" >
<!-- This element's contents will be replaced with your component. -->
</div>
<script type="text/jsx">
var Form = React.createClass({
    getInitialState() {
        return {
            fileInput: "",
        };
    },

    _onFileChange: function (event) {
        this.setState({fileInput: event.target.value});
    },

    handleSubmit(event) {
        event.preventDefault();
        var data = this.state;
        $.ajax({
            type: "POST",
            crossDomain: true,
            url: "http://localhost:8082/PFT/uploads.php",
            data: data,
            success: function(data){
                alert(data);
                $('#para').html(data);
            },
            error:function(data)
            {
                alert("Data sending failed");
            }
        });
    },

    render() {
        return (
                <form onSubmit={this.handleSubmit}>

                    <input id="fileInput" name="fileInput" type="file" value={this.state.fileInput} onChange={this._onFileChange} />
                    <button type="submit">Submit</button><br/><br/><br/>
                    <paragraph id="para" color="red">   Result will be printed here </paragraph>
                </form>

        )
    }
});

React.render(<Form />, document.getElementById('container'));
</script>
</body>

PHP File :

  <?php header('Access-Control-Allow-Origin: *');

  $target_path = "uploads/";

 $target_path = $target_path . basename ( $_FILES['fileInput']['name']);

 if(move_uploaded_file ($_FILES['fileInput']['tmp_name'], $target_path)) {
  echo "The file ".  basename ( $_FILES['fileInput']['name']).
  " has been uploaded";
 } else{
  echo "There was an error uploading the file, please try again!";
 }
?>

Error :

 ! ) Notice: Undefined index: fileInput in C:\wamp\www\PFT\uploads.php on line 5
   Call Stack
  # Time    Memory  Function    Location
  1 0.0010  242344  {main}( )   ..\uploads.php:0

damio · Accepted Answer · 2016-04-14 22:50:53Z

1

You're not uploading a file, that's why your $_FILES is empty.

See this example taken from here for how to upload a file with react:

uploadfile: function(){ 
  var file = this.refs.file.getDOMNode().files[0];
  var reader = new FileReader();
  reader.onload = function(output){
    fileUpload.set({
      file: output.target.result 
    });
    fileUpload.save();
  }.bind(this));

  reader.readAsDataURL(file);
},
render: function(){
  <form onSubmit={uploadFile}>
    <input type="file" name="file" ref="file" defaultValue={this.state.file} /><br /> 
    <input type="submit" />
  </form>
}

Alternatively, you can just do a normal form generated with React:

return (<form action="uploads.php" method="post" enctype="multipart/form-data">
    <input type="file" name="fileInput">
    <input type="submit" value="Upload">
</form>);

answered Apr 14, 2016 at 22:50

damio

6,3613 gold badges42 silver badges58 bronze badges

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

4 Comments

user6195820 Over a year ago

where should i put this return command in my code? I have an handle submit function already, can i remove that instead of this?

damio Over a year ago

In your render() function. You can remove the onSubmit then, yes

damio Over a year ago

then my advice is to start with some basic html/php uploading tutorial before doing it with react: davidwalsh.name/basic-file-uploading-php

user6195820 Over a year ago

I have done uploading files using html/php. I was trying to do the same on react and hence the issue. I face error only while doing with react code and not during html/php.

Collectives™ on Stack Overflow

File Upload error - PHP and React

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related