projid is not properly matching foreign key

Question

Recently I have created a form which is connected to 2 tables 1 with files and other with projects while submitting the form you can upload files as well more then 1 as uploader I am using is dropzone.js and ebveryone knows that dropzone submits files having different form when someone uploads file and do not submits the form the id conflicts let suppose I upload files but then I decide not to submit the form what happens here is files are saved in the database when next user comes and fills and submits the form along with uploading the files what happens here is the id allotted to the previous files will matched with the current I believe by reviewing the code you will understand what I have done and what I need I do not know how to explain but some times the files are submitting with wrong projects

dropzone upload code

<?php 
require_once("../../../includes/connection.php");

if(!empty($_FILES)){

    $targetDir = "../../uploads/";
    $fileName = $_FILES['file']['name'];
    $targetFile = $targetDir.$fileName;

    //Getting ID to match with the submitted project form details
    $query_get = mysqli_query($connection, "SELECT * FROM projects ORDER BY proj_id DESC LIMIT 1");
    while($id = mysqli_fetch_assoc($query_get)) {
        $uid = $id["proj_id"];
    }
    $uid1 = $uid+1;//This id will becomes imaginary now as if the files and form were submitting at a time the i would have used mysqli_insert_id but in this case i cannot use

    if(move_uploaded_file($_FILES['file']['tmp_name'],$targetFile)){
        //insert file information into db table
        $conn = mysqli_query($connection, "INSERT INTO files (proj_id, file_name, uploaded) VALUES('$uid1', '".$fileName."','".date("Y-m-d H:i:s")."')");
    }

}

?>

This is my startproject form submit function

function add_project($connect) {
    $fname       = $_POST["first_name"];
    $lname       = $_POST["last_name"];
    $proj_name   = $_POST["proj_name"];
    $email       = $_POST["email"];
    $end_date    = $_POST["end_date"];
    $skype       = $_POST["skype"];
    $company_url = $_POST["url"];
    $detail1     = mysqli_real_escape_string($connect, $_POST["details1"]);
    $detail2     = mysqli_real_escape_string($connect, $_POST["details2"]);
    $detail3     = mysqli_real_escape_string($connect, $_POST["details3"]);
    $upload_date = date("F-d-Y");
    $query2      = "INSERT INTO projects (first_name, last_name, proj_name, end_date, detail1, detail2, detail3, email, uploaded_date, skype_name, company_url, status) VALUES ('$fname', '$lname', '$proj_name', '$end_date', '$detail1', '$detail2', '$detail3', '$email', '$upload_date', '$skype', '$company_url', 'submit')";
    $confirm2    = mysqli_query($connect, $query2);
}

Thank you I believe this is a typically asked question but I hope someone can understood and can help me out

Answer 1

There are two options to solve your problem:

1. Return the ID from the first request (dropzone.js) and include it in the second request (form submit)
2. Change your configuration to upload the files on form submit (with the form data) so requiring only one submit

Option 1 - You can listen for the dropzone .on("success") event and assigned the returned ID to the form data for the second submit to associated them together.

Dropzone.options.myDropzone = {
  init: function() {
        myDropzone.on("success", function(file, responseText) {
            console.log(responseText);
            // assign the associating data
        });
    }
};

If your php script handling the dropzone upload, you would output the ID

if(move_uploaded_file($_FILES['file']['tmp_name'],$targetFile)){
    //insert file information into db table
    $conn = mysqli_query($connection, "INSERT INTO files (proj_id, file_name, uploaded) VALUES('$uid1', '".$fileName."','".date("Y-m-d H:i:s")."')");
    // output the id
    if ($conn) echo $uid1;
}

Note: It would be better to insert into projects table to get the new projid rather than assume that the upload will be the next id, and then update that projid on second submit. This is because another user may upload at the same time and overlap with the second submit.

Option 2 - It is possible to upload form data with dropzone. You need to add the form elements within the dropzone form.

<form id="my-dropzone" class="dropzone">
  <div class="dropzone-previews"></div>
  <!-- place your form fields here -->
  <button type="submit">Submit data and files!</button>
</form>

In the dropzone config you set autoProcessQueue: false and then on submit of the form you process the queue.

// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
  // Make sure that the form isn't actually being sent.
  e.preventDefault();
  e.stopPropagation();
  myDropzone.processQueue();
});

There are other events you may like to make use of:

// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
  // Gets triggered when the form is actually being sent.
  // Hide the success button or the complete form.
});
this.on("successmultiple", function(files, response) {
  // Gets triggered when the files have successfully been sent.
  // Redirect user or notify of success.
});
this.on("errormultiple", function(files, response) {
  // Gets triggered when there was an error sending the files.
  // Maybe show form again, and notify user of error
});