Upload PDF file to MYSQL database with Ajax, PHP

Question

I want to upload a pdf file from user input into my mysql database. I have supplied code that shows a users registration form with the pdf upload input type. I want to post this via AJAX to my php script to be entered into my database. I cannot get this code working. Any suggestions would be appreciated?

Snippet of form input -

    <form id='form1'>
               <label>Are you a:</label>
                    <select name="type" id="type">
                            <option>Select...</option>
                            <option value="teacher">Teacher</option>
                            <option value="school">School</option>
                        </select><br>

                    <label>Teaching Council Number / School Roll 
 Number</label>
                    <input type="text" name="userNo" id="userNo" 
 value="" required><br>

                    <label>Full Name / School Name</label>
                    <input type="text" name="name" id="name" required> 
 <br>

                    <label>Level:</label>
                    <select name="level" id="level">
                            <option>Select...</option>
                            <option value="primary">Primary</option>
                            <option 
 value="secondary">Secondary</option>
                        </select><br>

                    <label>Phone Number</label>
                    <input type="number" name="phoneNo" id="phoneNo" 
 data-clear-btn="false" pattern="[0-9]*" value=""><br>

                    <label>Address</label>
                    <input type="text" name="location" id="location" 
 placeholder="" required><br>

                    <label>Email</label>
                    <input type="email" id="email" data-clear- 
btn="false" required><br>

                    <label for="password">Password</label>
                    <input type="password" name="password" 
 id="password" value="" required><br>

                    <label for="password">Confirm Password</label>
                    <input name="password_confirm" required="required" 
 type="password" id="password_confirm" oninput="check(this)" /><br>




                    <label for="file">Curriculum Vitae <i>(PDF only) 
</i></label>
                    <input type="file" name="file" id="cv" value="cv" 
 accept=".pdf"><br>

                    <label for="file">Garda Vetting <i>(PDF only)</i> 
</label>
                    <input type="file" name="gardavetting" 
 id="gardavetting" value="gardavetting" accept=".pdf"><br>

                    <label>LinkedIn URL <i>(optional)</i></label>
                    <input type="text" id="linkedin" name="linkedin"> 
 <br>


                    <button type="submit" id="submit1" name="submit1" 
 onclick="myFunction1();">Submit</button><br>
                  </form>
    </div>

PHP -

<?php



// Selecting Database 

include_once 'dbh.php';

//Here we fetch the data from the URL that was passed from our HTML 
form
$type2 = $_POST['type'];
$userNo2 = $_POST['userNo'];
$name2 = $_POST['name'];
$level2 = $_POST['level'];
$phoneNo2 = $_POST['phoneNo'];
$location2 = $_POST['location'];
$email2 = $_POST['email'];
$password2 = $_POST['password'];
$cv2 = $_POST['cv'];
$gardavetting2 = $_POST['gardavetting'];
$linkedin2 = $_POST['linkedin'];

   $sql = "INSERT INTO users (type, userNo, name, level, phoneNo, 
location, email, password, cv, gardavetting, linkedin) VALUES 
('$type2', '$userNo2', '$name2', 

'$level2','$phoneNo2','$location2','$email2','$password2','$cv2','$gardav etting2','$linkedin2');";

   mysqli_query($conn, $sql);
 ?>

JS -

function myFunction1() {
var type = document.getElementById("type").value;
var userNo = document.getElementById("userNo").value;
var name = document.getElementById("name").value;
var level = document.getElementById("level").value;
var phoneNo = document.getElementById("phoneNo").value;
var location = document.getElementById("location").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
var cv = document.getElementById("cv").value;
var gardavetting = document.getElementById("gardavetting").value;
var linkedin = document.getElementById("linkedin").value;

var dataString = '&type=' + type + '&userNo=' + userNo + '&name=' + 
name + '&level=' + level + '&phoneNo=' + phoneNo + '&location=' + 
location + '&email=' + email+ '&password=' + password + '&cv=' + cv + 
 '&gardavetting=' + gardavetting + '&linkedin=' + linkedin ;

if (  type== '' || userNo == '' || name == '' || level == '' || 
phoneNo == '' || location == '' || email == '' || password == '' || cv 
 == '' || gardavetting == '')
{
    alert("Please Fill All Fields");
}
else
{
 //AJAX code to submit form.
    $.ajax({
        type: "POST",
        url: "http://localhost:8888/EduSubOct/signup.php",
        data: dataString,
        cache: false,
        success: function(html) {
            alert("Information Entered Successfully");
        }
    });
}
return false;

Answer 1

Try This Code For File Store & Insert

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>
    <form id="form">
        <label for="file">Curriculum Vitae <i>(PDF only)</i></label>
        <input type="file" name="file" id="cv" value="cv" accept=".pdf"><br>

        <label for="file">Garda Vetting <i>(PDF only)</i></label>
        <input type="file" name="gardavetting" id="gardavetting" value="gardavetting" accept=".pdf"><br>

        <label>LinkedIn URL <i>(optional)</i></label>
        <input type="text" id="linkedin" name="linkedin"> <br>

        <button type="submit" id="submit1" name="submit1">Submit</button><br>
    </form>
</body>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script>
    $('#form').on('submit', function(e) {
        e.preventDefault();
        var form=document.getElementById('form');
        var fdata=new FormData(form); 
        $.ajax({
            type: "POST",
            url: 'insert.php',
            data: fdata,
            contentType: false,
            cache: false,
            processData:false,
            success: function(result)
            { 
                if(result == 0)
                {
                    alert('file stored');
                }else{
                    alert('something went wrong');
                }
            }
        });
    });
</script>
</html>

insert.php

<?php
$servername = "host";
$username = "server database username";
$password = "server database password";
$dbname = "your db name";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$type2 = $_POST['type'];
$userNo2 = $_POST['userNo'];
$name2 = $_POST['name'];
$level2 = $_POST['level'];
$phoneNo2 = $_POST['phoneNo'];
$location2 = $_POST['location'];
$email2 = $_POST['email'];
$password2 = $_POST['password'];
$gardavetting2 = $_POST['gardavetting'];
$linkedin2 = $_POST['linkedin'];

// STORE PDF FILE IN FOLDER
if(isset($_FILES['file']['name']))
{
    $cpath="resume/";
    $file_parts = pathinfo($_FILES["file"]["name"]);
    $file_path = 'resume'.time().'.'.$file_parts['extension'];
    move_uploaded_file($_FILES["file"]["tmp_name"], $cpath.$file_path);
    $cv2 = $file_path;
}

$sql = "INSERT INTO users (type, userNo, name, level, phoneNo, 
location, email, password, cv, gardavetting, linkedin) VALUES('$type2', '$userNo2', '$name2', '$level2','$phoneNo2','$location2','$email2','$password2','$cv2','$gardav etting2','$linkedin2');";

if($sql){
    echo '0';
}

mysqli_query($conn, $sql);

?>

If you store any file like(image,pdf,video) then use form serialize method or form data method to avoid errors. Here i give a code for store pdf file in local folder and insert in mysql database using AJAX without page refresh we can get result.