0

500 Error with the line data:this.state.selectedFile. If this is removed then I get the values of name and message in my inbox. I'm using FormSubmit to enable unlimited form responses. The form works perfectly fine if I give a static value to the selected file, then I'm getting the base64 format of it - which I don't want. I need name,message and the selected file, be it pdf or img to come to my mail but not in base64 format.

import axios from 'axios';
 
import React,{Component} from 'react';
 
export default class Upload extends Component {
    state = {selectedFile: null};
    onFileChange = event => {
      this.setState({ selectedFile: event.target.files[0] });
    };
    onFileUpload = (e) => {
    e.preventDefault();
      console.log(this.state.selectedFile);
    fetch("https://formsubmit.co/ajax/xyzkrithika02@gmail.com", {
        method: "POST",
        headers: { 
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            name: "FormSubmit",
            message: "bruhh",
            data:this.state.selectedFile //Without this line I'm receiving the name and message to my email
        })
    });
}
    fileData = () => {
      if (this.state.selectedFile) { 
        return (
          <div>
            <h2>File Details:</h2>          
            <p>File Name: {this.state.selectedFile.name}</p>
          </div>
        );
      } else {
        return (
          <div>
            <br />
            <h4>Choose before Pressing the Upload button</h4>
          </div>
        );
      }
    };
    
    render() {
    
      return (
        <div>
            <form onSubmit={this.onFileUpload}>
                <input type="file" onChange={this.onFileChange} />
                <button type ="submit">
                  Upload
                </button>
            </form>
          {this.fileData()}
        </div>
      );
    }
  }

Error

  • 1
    Please have a look at [how to ask a good question](https://stackoverflow.com/help/how-to-ask). Meanwhile, I think [this](https://stackoverflow.com/a/36082038/11583240) can be of some help to you. – need_to_know_now Mar 30 '21 at 04:38
  • Please show us your 500 Error. – Sanat Gupta Mar 30 '21 at 04:51
  • Upload.js:13 POST https://formsubmit.co/ajax/chkrithika02@gmail.com 500 Upload.onFileUpload @ Upload.js:13 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070 ..................... – Krithika Krishna Prakash Mar 30 '21 at 06:17

0 Answers0