Trying to submit 2 forms(a form and a image upload) on flask

I have two forms, I need a single submit button for two forms(a normal form and a upload). I’ve tried to use javascript but It would only upload the 2nd form which is the image upload. I’m sorry if the code looks weird as I’m still new to it.

{% extends "Base.html" %}
{% block title %}title{% endblock %}

{% block content %}
{% from "includes/_formHelper.html" import render_field %}
<div class="container" style="width:50em;">
<h1 class="display-4">Create Products</h1>
<form method="POST" action=" " id="firstform">
  <div class="form-group">
    {{ render_field(form.product_name, class="form-control") }}
  </div>
  <div class="form-group">
    {{ render_field(form.brand, class="form-control") }}
  </div>
  <div class="form-group">
    {{ render_field(form.category, class="form-control") }}
  </div>
  <div class="form-group">
    {{ render_field(form.quantity, class="form-control") }}
  </div>
    </form>
<form method="post" action="/" enctype="multipart/form-data" id="secondform">
    <h4>Select a file to upload</h4>
        <dl>
            <p>
                <input type="file" name="file" class="form-control" required>
            </p>
        </dl>
    </form>
  <br>
    <button type="submit" value="Submit" class="btn btn-primary" onclick="submitForms()">Save Products</button>
</div>
<style>
  h1{
  text-align:center;
  }
  p{
  color:#212529;
  font-size:16px;
  }
  h4{
  color:#212529;
  font-size:16px;
  }
</style>
{% endblock %}

JavaScript:

<script language="javascript">
submitForms = function(){
  document.getElementById("firstform").submit();
  document.getElementById("secondform").submit();
}
</script>