Перетащите jQuery & Ajax загрузите файл и отправьте html данные формы все вместе

Question

Я хочу, чтобы пользователь мог перетаскивать PDF-файл и чтобы у него была модальная форма для быстрого заполнения формы о файле. Когда пользователь нажимает кнопку «Отправить», файл и данные формы передаются с помощью Ajax в файл php, чтобы затем загрузить файл и данные были обработаны в БД.

script. js

// On drop calls uploadFile Function and appends to formData object
    $("#dropzone").on ('drop', function (e) {
        e.preventDefault();
        $(this).removeClass('dropzone dragover').addClass('dropzone');
        $("#myModal").removeClass("hidden").addClass("visible");


        var file = e.originalEvent.dataTransfer.files;
        uploadFile(file);
    });

    var uploadFile = function(files){
        formData = new FormData();
        formData.append("file", files);
        var x;
        for (x = 0; x < files.length; x = x + 1){
            let file = files[x];
            formData.append('files[]', file);
        } 
    };

// On Form submit all data is saved to values and Ajax call to users.php
    $("form").on('submit', function(e) {
        // e.preventDefault();
        var values = $(this).serialize();
        $("#myModal").removeClass("visible").addClass("hidden");
        url = 'app/forms/users.php'

        $.ajax({
            type: 'POST',
            url: 'app/forms/users.php',
            processData: false,
            contentType: false,
            cache: false,
            data: { formData, values },
            dataType: 'json',
            success: console.log("Done")
        });
    });

Здесь я сталкиваюсь с проблемами. Я могу использовать console.log (Array.from (formData)) во всех точках взаимодействия, прежде чем пользователь выполнит отправку. Но когда пользователь отправляет форму, кажется, что formData исчезает из существования.

пользователей. php

} else if ($_POST['dispatch'] == 'file_upload') {

        // Upload File
        var_dump($_FILES);
        var_dump($_POST);

        $errors = [];
        $target_dir = 'F:\wamp64\www\blank\dev\uploads/';
        $extensions = ['pdf', 'PDF'];
        $all_files = count($_FILES['file']['tmp_name']);

        for ($i = 0; $i < $all_files; $i++) {  
            $file_Name = $_FILES['file']['name'][$i];
            $file_Tmp = $_FILES['file']['tmp_name'][$i];
            $file_Type = $_FILES['file']['type'][$i];
            $file_Size = $_FILES['file']['size'][$i];
            $tmp = explode('.', $_FILES['file']['name'][$i]);
            $file_ext = strtolower(end($tmp));

            $file = $target_dir . date('U')."-".basename($file_Name);

            if (!in_array($file_ext, $extensions)) {
                $errors[] = 'Extension not allowed: ' . $file_Name . ' ' . $file_Type;
            }

            if ($file_Size > 9000000000000000000) {
                $errors[] = 'File size exceeds limit: ' . $file_Name . ' ' . $file_Type;
            }

            move_uploaded_file($file_Tmp, $file);

        if ($errors) print_r($errors);
        }
        // Process to DB

В настоящее время единственные данные, которые я могу найти, это formData из самой формы , Если есть какая-то информация, которую я пропустил, которая может быть полезна, просто дайте мне знать. Либо мне нужно go об этом по-другому, либо я просто что-то упускаю.

Любая помощь приветствуется. Спасибо.