CODEWITHSUNDEEP
pythonflask
timman
timman

Reputation: 489

Flask Internal server error : How to handle request to server when posting form data to extract value from form correctly?

I've got an app, frontend is React, and backend is Flask with a single app.py file. After I try to submit the form using a post request, I get an internal server error 500 in my JS console and in the terminal it says: 'NoneType' object has no attribute 'upper'. This error arises after I click the submit button of the form. So it looks like the backend is not handling the request correctly.

I've tried restarting my flask server and I've added CORS to the app. I will post frontend code as well in case that helps to show context.

I guess I'm just wondering if my backend code is correctly handling the request to extract the value inputText from the textarea part of the form, or if something else is amiss? Is it reaching the server at all?

The app.py code:

from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)
app.debug = True
CORS(app)

@app.route('/process', methods=['POST'])
def result():
        text = request.form.get('inputText')
        upper_text = text.upper()
        print(upper_text)

        return upper_text

I set proxy: "http://localhost:5000" in package.json.

React Form Component code:

import React, { useState } from "react";
import axios from "axios";
import Button from '@material-ui/core/Button';
import { TextField } from '@material-ui/core';
import DisplayUpper from './DisplayUpper';


function Form() {
  const [inputText, setInputText] = useState("");
  const [fetchedData, setFetchedData] = useState("");
  const [isSubmitted, setSubmitted] = useState(false);
  

  const handleSubmit = (e) => {
   setSubmitted(true)
    
    console.log("button clicked");

    const config = {
      headers: {'Access-Control-Allow-Origin': '*'}
 

     };

    axios
      .post("http://localhost:5000/process", {
        inputText: inputText,
      }, config)
      .then((res) => {
        console.log("res", res);
        setFetchedData(res.data);
      })
      .catch((er) => {
        console.log(er);
      });
      
    }

    
  return (
    <div>
    <form onSubmit={handleSubmit} method="post">
      <label>
        Enter Text :
        <TextField multiline={true} variant="outlined"
          name="inputText"
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
        />
      </label>
      <Button variant="contained" color="primary" type="submit" name="Submit">
        SUBMIT
      </Button>
    </form>
{isSubmitted && <DisplayUpper/>}
    </div> 
    );
    }


export default Form;

Upvotes: 2

Views: 957

Answers (1)

PotentialStyx
PotentialStyx

Reputation: 442

In this case axois is sending json data, so to access that data you can use request.json (instead of request.form). Once you replace request.form with request.json the code should work.

Upvotes: 2

Related Questions