1

I am new to react. My goal is to let the user upload a file and send the file data to the server. I only want the user to upload csv file so to validate that I wrote an onChange fnction to test. But when I run this I get an error saying:

Failed to compile.

./src/pages/adddata/AddData.jsx
Line 13: 'validateFile' is not defined no-undef
Line 13: 'e' is not defined no-undef

Search for the keywords to learn more about each error.

Shown below is my code:

import {withStyles} from '@material-ui/core'
import PropTypes    from 'prop-types'
import * as React   from 'react'
import styles       from './AddData.styles'
import axios from 'axios'

class AddData extends React.Component {

  render() {

    const {classes} = this.props

    validateFile(e)
    {
      // let file= e.target.file;
      console.log("d")
    }

    return (
        <div className={classes.container}>
        <form onSubmit={this.handleSubmit}>
          <label>Name:</label> 
          <input type="text" name="dataset_name" className={classes.text} placeholder="Enter dataset name"></input><br/>
            <label>Type:</label>  
          <select name="data_format" className={classes.text}>
            <option value="null">Select Type of File</option>
            <option value="csv">CSV</option>
          </select><br/>
          <label>Select file: </label>          
          <input type="file" name="dataset_csv" className={classes.browse} onChange={this.validateFile.bind(this)}></input><br/>
            <input type="submit" value="Submit" className={classes.submit}></input>
        </form>
        </div>
    )
  }

}

AddData.propTypes = {
  classes: PropTypes.object.isRequired,
  theme  : PropTypes.object.isRequired,
}

export default withStyles(styles, {withTheme: true})(AddData)

What am I doing wrong?

0

2 Answers 2

2

Do not create handler functions inside render() as render executes several times in component life cycle (on every state change). Below will fix the problem

class AddData extends React.Component {

  validateFile(e)
  {
      // let file= e.target.file;
    console.log("d")
  }

  render() {

    const {classes} = this.props

    return (
        <div className={classes.container}>
        <form onSubmit={this.handleSubmit}>
          <label>Name:</label> 
          <input type="text" name="dataset_name" className={classes.text} placeholder="Enter dataset name"></input><br/>
            <label>Type:</label>  
          <select name="data_format" className={classes.text}>
            <option value="null">Select Type of File</option>
            <option value="csv">CSV</option>
          </select><br/>
          <label>Select file: </label>          
          <input type="file" name="dataset_csv" className={classes.browse} onChange={this.validateFile.bind(this)}></input><br/>
            <input type="submit" value="Submit" className={classes.submit}></input>
        </form>
        </div>
    )
  }

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

Comments

2

Move the validateFile function outside render function, beside it everything else looks good :)

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.