Upload file with Uppy after form submit via AJAX

Uppy
1

Hello,

I am using the Uppy file uploader for uploading files.
Now I have a form that sends data as AJAX, and the server stores form data in DB.
Along with the form, I want to attach an Uppy file to the record which was uploaded in the form. So once both record and file upload, i want a success message back from the server,

The first form record will store data in DB, then files will be stored.

How to trigger file upload with the form submit?

//Below is AJAX request

jQuery.ajax({
    type: "POST",
    url:
        $("#expense_id").val() == ""
            ? "/purchases/expenses/store"
            : "/purchases/expenses/update",
    data: $("#addExpenseForm").serialize(),
    success: function(data) {
        if (data.val == 1) {
            //Success notification..
            _Notification(data);
    },
    error: function(xhr) {
        $("#errors").text("");
        jQuery.each(xhr.responseJSON.errors, function(key, value) {
            $("#errorbox").show();
            $("#errors").append("<p>" + value + "</p>");
        });
    }
}); //AJAX End

//Below is Uppy upload function

var _StoreExpenseFile = function() {
    const XHRUpload = Uppy.XHRUpload;
    const Dashboard = Uppy.Dashboard;

    var id = "#storefile";
    var expense_id = $("#id").val();

    var options = {
        proudlyDisplayPoweredByUppy: false,
        target: id,
        inline: true,
        replaceTargetContent: true,
        showProgressDetails: true,
        note: "Only PDF, jpeg, img, files allowed.",
        height: 470,
        metaFields: [
            { id: "name", name: "Name", placeholder: "file name" },
            {
                id: "caption",
                name: "Caption",
                placeholder: "describe what the image is about"
            }
        ],
        browserBackButtonClose: true
    };

    var uppyDashboard = Uppy.Core({
        autoProceed: false,
        restrictions: {
            maxFileSize: 5000000, // 1mb
            maxNumberOfFiles: 5,
            minNumberOfFiles: 1
        },
        meta: {
            expense_id: expense_id //Pass additional meta data for process.
        }
    });

    uppyDashboard.use(Dashboard, options);
    uppyDashboard.use(XHRUpload, {
        endpoint: "/files/store/expensefile",
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
        },
        formData: true,
        fieldName: "file"
    });
};