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;


Read more here: https://stackoverflow.com/questions/66327918/flask-internal-server-error-how-to-handle-request-to-server-when-posting-form

Content Attribution

This content was originally published by timman at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: