CODEWITHSUNDEEP
pythontwitter-bootstrapflaskjinja2
Frank0013
Frank0013

Reputation: 61

Include radio buttons on python flask webpage

I'm trying to build a webpage as part of a bigger application, where the user is able to upload csv files. There are three different types of csv's. On uploading I want to perform some checks on these files. Some of the checks are general, like file name exists and the .csv extension. And some are csv type specific, for which I have written some code with the CSVValidator package. These checks include column name check and data type check.

On the webpage I would like the user to toggle a radio button to make a choice which of the three types he/she is going to upload. This choice can then be used to select the write validation for that specific type of file.

Now I'm struggling with 'request'. Since I already have a request for the upload button, how do I include one for the radio buttons. I don't get any response from the radio buttons yet. Please help me out.

The code I have written so far:

@app.route("/upload", methods=['GET', 'POST'])
def upload():
  if request.method == "POST":
    if request.files:
      csv = request.files['csv']
      if csv.filename == '':
        print('CSV file must have a name')
        return redirect(request.url)
      if not csv_extention(csv.filename):
        print('This is not a correct CSV file')
        return redirect(request.url)


      button = request.form['choice_csv']
      if button == '1': 
        if check_csv_type1(filename) is False:
          print('Check the errors')
          print(result)
        else:
          filename = secure_filename(csv.filename)
          csv.save(os.path.join(app.config['CSV_UPLOADS'] + '/realised', filename))
        print('CSV file saved')
        return redirect(request.url)
      elif button == '2':
        if check_csv_type2(filename) is False:
          print('Check the errors')
          print(result)
        else:
          filename = secure_filename(csv.filename)
          csv.save(os.path.join(app.config['CSV_UPLOADS'] + '/contracts', filename))
        print('CSV file saved')
        return redirect(request.url)
      elif button == '3':
        if check_csv_type3(filename) is False:
          print('Check the errors')
          print(result)
        else:
          filename = secure_filename(csv.filename)
          csv.save(os.path.join(app.config['CSV_UPLOADS'] + '/pipeline', filename))
        print('CSV file saved')
        return redirect(request.url)
      return render_template('public/upload_csv.html')

And this is the HTML code:

{% extends "public/templates/public_template.html" %}

{% block title %}Upload csv{% endblock title %}

{% block main %}
<div class="container">
  <!-- First row -->
  <div class="row mb-4">
      <h2>Upload csv files</h2>
      <label>Tick the box for the kind of file you want to upload, select the month and year of the first period of data and then browse and upload.</label>
  </div>
  <!-- Second row, first column -->
  <div class="row">
    <div class="col-sm-3 col-md-4 col-lg-4 mb-4">
      <form action="/upload-csv" method="POST" type="radio">
        <div class="form-group">
          <div class="custom-control custom-radio mb-2">
            <input type="radio" class="custom-control-input" value="1" id="realised" name="choice_csv">
            <label class="custom-control-label" for="realised">Realised</label>
          </div>
          <div class="custom-control custom-radio mb-2">
            <input type="radio" class="custom-control-input" value="2" id="contracts" name="choice_csv">
            <label class="custom-control-label" for="contracts">Contracts</label>
          </div>
          <div class="custom-control custom-radio mb-2">
            <input type="radio" class="custom-control-input" value="3" id="pipeline" name="choice_csv">
            <label class="custom-control-label" for="pipeline">Pipeline</label>
          </div>
        </div>
      </form>
    </div>
    <!-- Second row, second column -->
    <div class="col-sm-9 col-md-6 col-lg-8 mb-4">
      <div class="input-append date" id="datepicker" data-date="12-02-2012" data-date-format="mm-yyyy">
        <input size="12" type="text" value="02-2012">
        <span class="add-on"><i class="icon-th"></i></span>
      </div>
      
    </div>
  </div>
</div>
<div class="container">   
  <form action="/upload-csv" method="POST", enctype="multipart/form-data">
    <div class="form-group">
      <div class="custom-file">
        <input type="file" class="custom-file-input" name="csv" id="csv">
        <label class="custom-file-label" for="csv">Select csv file</label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Upload csv file</button>
  </form>
</div>
{% endblock main %}

Upvotes: 0

Views: 767

Answers (1)

Andre.IDK
Andre.IDK

Reputation: 2047

You currently have two forms on your page, unless you're gathering all your fields/items on the client's side with some custom JS code all the fields you want to be included in the request should be in the same form.

Take for instance this form:

<form action="/action_page" method="post">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="first_name"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="last_name"><br><br>
  <input type="submit" value="Submit">
</form>

This, when submitted, will perform a POST request to the /action_page route and will include two fields: first_name and last_name.

Additionally, while it won't have any effect, your first form has an incorrect type=radio, this kind of attribute is allowed on input elements.

I suggest you take a look at these two pages:

Upvotes: 1

Related Questions