title: Get data from a dropdown menu with FastAPI
body: <p>In a FastAPI project, you can easily get data from a HTML form to the back-end. There are built-in ways to get data from a text input, a file upload, etc. However, dropdown menus don't seem to work in my project. FastAPI developer Tiangolo has <a href="https://github.com/tiangolo/fastapi/issues/246#issuecomment-575981995" rel="nofollow noreferrer">addressed the issue after being requested</a> and <a href="https://fastapi.tiangolo.com/tutorial/path-params/#predefined-values" rel="nofollow noreferrer">made a tutorial page including dropdown menus</a>. I tried to follow the same steps as him but I cannot get data from a dropdown menu into my backend.</p>
  <p>My code looks like this:</p>
  <ul>
  <li><code>view.py</code> : contains the enum with the dropdown values, and generates the html template.</li>
  </ul>
  <pre><code>class dropdownChoices(str, Enum):
      water = &quot;WATER&quot;
      fire = &quot;FIRE&quot;
      electric = &quot;ELECTRIC&quot;
      grass = &quot;GRASS&quot;
      donut = &quot;DONUT&quot;
  
  @router.get('/upload')
  def upload(request: Request):
      return templates.TemplateResponse('upload.html', context={'request': request, 'choices': [e.value for e in dropdownChoices]})
  </code></pre>
  <ul>
  <li><code>upload.html</code> : the template that will display my form, containing the dropdown menu.</li>
  </ul>
  <pre><code>&lt;form action=&quot;/upload&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;choices_dropdown&quot;&gt;Choose:&lt;/label&gt;
          &lt;select id=&quot;choices_dropdown&quot; name=&quot;dropdown_choices&quot;&gt;
              {% for choice in choices %}
              &lt;option value={{choice}}&gt;{{choice}}&lt;/option&gt;
              &lt;!-- The choices are correctly displayed in the dropdown menu --&gt;
              {% endfor %}
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;!-- More form actions including file upload and checkbox. These work. --&gt;
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;upload_file&quot;&gt;Choose Upload File:&lt;/label&gt;
          &lt;input type=&quot;file&quot; class=&quot;form-control-file&quot; name='upload_file' id=&quot;upload_file&quot;&gt;
          &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; name='overwrite_existing' id=&quot;flexCheckChecked&quot;&gt; Overwrite existing
      &lt;/div&gt;
      &lt;button id=&quot;upload&quot; type='submit' class=&quot;btn btn-primary&quot;&gt;Upload&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <ul>
  <li><code>main.py</code> : handles data from the form.</li>
  </ul>
  <pre><code># Gets data from upload.html
  @app.post(&quot;/upload&quot;)
  async def handle_form(request: Request,
                        choice: str = &quot;WATER&quot;,
                        upload_file: UploadFile = File(...),
                        overwrite_existing: bool = Form(False)):
      print(choice) #does NOT work: always print default (&quot;WATER&quot;)
      print(overwrite_existing) #Works, prints true or false depending on input
      contents = await upload_file.file.read() #Works, file is later read etc
      return templates.TemplateResponse('upload.html', context={'request': request,
                                                                'choices': [e.value for e in view.dropdownChoices]})
  </code></pre>
  <p>I feel like I have followed the tutorial thoroughly, yet I <strong>always</strong> get the default choice. If I don't put a default choice in my <code>handle_form()</code> method, I get nothing at all.
  I don't understand why the user's choice form the dropdown menu is not transmitted like the rest.</p>