JSFiddle - React, Tailwind, and code Playground

HTML

<form action="#" method="post" accept-charset="utf-8" enctype="multipart/form-data">
    <input type="file" name="file" id="file">
    <input id="submit_button" type="submit" name="deploy" href="#" value="import" />
</form>
    <!-- https://github.com/malsup/form/ -->
<script src="/assets/js/form/jquery.form.js" type="text/javascript"></script>
<div id="dialog-modal" title="Basic modal dialog" style="display:none;">
    <p>my message</p>
</div>

JavaScript

$('form').on('submit', function (e) {
    $("#dialog-modal").dialog({
        height: 140,
        modal: true
    });

    $(".ui-dialog-titlebar").hide();
    e.preventDefault();
    // prevent native submit
    $(this).ajaxSubmit({
        url: '/unitary/import_ajax',
        type: 'post',
        dataType: 'json',
        iframe: true,
        success: function (data) {
            $('#dialog-modal').hide();
            $('.ui-widget-overlay').hide();
            $('.ui-front').hide();
            if (data == 'error') {
                alert('<?php echo lang('
                invalid_file ') ?>');
            } else {
                var event = jQuery.Event;
                submitForm(event, data);
            }
        }
    })
});

function submitForm(event, data) {
    $form = $(event.target);

    var jsoned_array = JSON.stringify(data);
    var method = "post";
    var path = "/unitary/create_multiple"
    var form = document.createElement("form");

    form.setAttribute("method", method);
    form.setAttribute("action", path);

    var name = "input"
    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", name);
    hiddenField.setAttribute("value", jsoned_array);

    form.appendChild(hiddenField);

    document.body.appendChild(form);
    form.submit();

}