Update upload file template

InvenTree/part/templates/part/bom_upload/upload_file.html

@@ -14,21 +14,22 @@
 {% endblock %}
 
 {% block actions %}
+<!--
+<button type='button' class='btn btn-outline-secondary' id='bom-info'>
+    <span class='fas fa-info-circle' title='{% trans "BOM upload requirements" %}'></span>
+</button>
+-->
+<button type='button' class='btn btn-primary' id='bom-upload'>
+    <span class='fas fa-file-upload'></span> {% trans "Upload BOM File" %}
+</button>
+<button type='button' class='btn btn-success' id='bom-submit' style='display: none;'>
+    <span class='fas fa-sign-in-alt'></span> {% trans "Submit BOM Data" %}
+</button>
 {% endblock %}
 
 {% block page_info %}
 <div class='panel-content'>
-    <p>{% blocktrans with step=wizard.steps.step1 count=wizard.steps.count %}Step {{step}} of {{count}}{% endblocktrans %}
-    {% if description %}- {{ description }}{% endif %}</p>
 
-    <form action="" method="post" class='js-modal-form' enctype="multipart/form-data">
-    {% csrf_token %}
-    {% load crispy_forms_tags %}
-
-    {% block form_buttons_top %}
-    {% endblock form_buttons_top %}
-
-    {% block form_alert %}
     <div class='alert alert-info alert-block'>
         <strong>{% trans "Requirements for BOM upload" %}:</strong>
         <ul>
@@ -36,22 +37,29 @@
             <li>{% trans "Each part must already exist in the database" %}</li>
         </ul>
     </div>
-    {% endblock %} 
 
-    <table class='table table-striped' style='margin-top: 12px; margin-bottom: 0px'>
-    {{ wizard.management_form }}
-    {% block form_content %}
-    {% crispy wizard.form %}
-    {% endblock form_content %}
+    <div id='non-field-errors'>
+        <!-- Upload error messages go here -->
+    </div>
+
+    <!-- This table is filled out after BOM file is uploaded and processed -->
+    <table class='table table-striped table-condensed' id='bom-import-table'>
+        <thead>
+            <tr>
+                <th style='max-width: 500px;'>{% trans "Part" %}</th>
+                <th>{% trans "Quantity" %}</th>
+                <th>{% trans "Reference" %}</th>
+                <th>{% trans "Overage" %}</th>
+                <th>{% trans "Allow Variants" %}</th>
+                <th>{% trans "Inherited" %}</th>
+                <th>{% trans "Optional" %}</th>
+                <th>{% trans "Note" %}</th>
+                <th><!-- Buttons Column --></th>
+            </tr>
+        </thead>
+        <tbody></tbody>
     </table>
 
-    {% block form_buttons_bottom %}
-    {% if wizard.steps.prev %}
-    <button name="wizard_goto_step" type="submit" value="{{ wizard.steps.prev }}" class="save btn btn-outline-secondary">{% trans "Previous Step" %}</button>
-    {% endif %}
-    <button type="submit" class="save btn btn-outline-secondary">{% trans "Upload File" %}</button>
-    </form>
-    {% endblock form_buttons_bottom %}
 </div>
 {% endblock page_info %}
 
@@ -64,4 +72,34 @@ $('#bom-template-download').click(function() {
     downloadBomTemplate();
 });
 
+$('#bom-upload').click(function() {
+
+    constructForm('{% url "api-bom-extract" %}', {
+        method: 'POST',
+        fields: {
+            bom_file: {},
+            part: {
+                value: {{ part.pk }},
+                hidden: true,
+            },
+            clear_existing: {},
+        },
+        title: '{% trans "Upload BOM File" %}',
+        onSuccess: function(response) {
+            $('#bom-upload').hide();
+
+            $('#bom-submit').show();
+
+            constructBomUploadTable(response);
+
+            $('#bom-submit').click(function() {
+                submitBomTable({{ part.pk }}, {
+                    bom_data: response,
+                });
+            });
+        }
+    });
+
+});
+
 {% endblock js_ready %}

InvenTree/templates/js/translated/bom.js

@@ -172,34 +172,20 @@ function submitBomTable(part_id, options={}) {
     getApiEndpointOptions(url, function(response) {
         var fields = response.actions.POST;
 
-        constructForm(url, {
+        inventreePut(url, data, {
             method: 'POST',
-            fields: {
-                clear_existing: {},
+            success: function(response) {
+                window.location.href = `/part/${part_id}/?display=bom`;
             },
-            title: '{% trans "Submit BOM Data" %}',
-            onSubmit: function(fields, opts) {
-
-                data.clear_existing = getFormFieldValue('clear_existing', {}, opts);
-
-                $(opts.modal).modal('hide');
-
-                inventreePut(url, data, {
-                    method: 'POST',
-                    success: function(response) {
-                        // TODO: Return to the "bom" page
-                    },
-                    error: function(xhr) {
-                        switch (xhr.status) {
-                        case 400:
-                            handleFormErrors(xhr.responseJSON, fields, options);
-                            break;
-                        default:
-                            showApiError(xhr, url);
-                            break;
-                        }
-                    }
-                });
+            error: function(xhr) {
+                switch (xhr.status) {
+                case 400:
+                    handleFormErrors(xhr.responseJSON, fields, options);
+                    break;
+                default:
+                    showApiError(xhr, url);
+                    break;
+                }
             }
         });
     });