wordpress upload images in custom page

Question

I have created a form for users in WordPress in a custom page, the code is below.

<div class="container" style="padding-top: 30px;width: 60%;">
    <div id="FormBlock">
        <form action="">
            <div class="row form-group">
                <div class="col-md-6">
                    <label for="lname">First Name:</label>
                    <input type="text" class="form-control" name="firstName" placeholder="Enter First Name..">
                </div>
                <div class="col-md-6">
                    <label for="lname">Last Name:</label>
                    <input type="text" class="form-control" name="lastName" placeholder="Enter Last Name..">
                </div>
            </div>
            <div class="row form-group" style="margin-bottom: -8px;">
                <div class="col-md-6">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" name="email" placeholder="Enter Email..">
                </div>
                <div class="col-md-2">
                    <label for="cell">Phone:</label>
                    <?php echo countrySelector(); ?>
                </div>
                <div class="col-md-4">
                    <div class="input-group">
                        <label for="">&nbsp;</label>
                        <input type="text" class="form-control" name="cellnumber" placeholder="Enter Phone Number..">
                        <label for="">&nbsp;</label>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-basic" id="verify">Verify</button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-6">
                    <label for="Citizenship">Country of Citizenship</label>
                    <?php echo CountryNames("Citizenship","Citizenship"); ?>
                </div>
                <div class="col-md-6">
                    <label for="residence">Country of Residence</label>
                    <?php echo CountryNames("Residence","Residence"); ?>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-12">
                    <label for="address">Residential Address</label>
                    <input type="text" class="form-control" name="address" placeholder="Enter your address..">
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-12">
                    <label for="ec2wallet">EC2 Wallet Address</label>
                    <input type="text" class="form-control" name="ec2wallet" placeholder="Enter your EC2 Wallet address..">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label for="Upload">Upload your documents</label>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-6">
                    <input type="file" name="identity" id="identity" class="form-control">
                    <label for="identity"><small>Upload proof of identity (Passport, Driver’s License, National Identification)</small></label>                 
                </div>
                <div class="col-md-6">
                    <input type="file" name="selfie" id="selfie" class="form-control">
                    <label for="selfie"><small>Take Selfie or Upload front facing picture</small></label>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-md-12">
                    <input type="file" name="residenceID" id="residenceID" class="form-control">
                    <label for="residenceID"><small>Upload proof of residence (ID Card containing your address or utility bill, credit card statement, bank statement or tax bill dated within last 3 months).</small></label>
                </div>
            </div>
        </form>
    </div>
</div>

now I have three fields in which user have to upload documents/pics and I want to use WordPress proper method to upload media in which WordPress create database entries and their metadata etc.. and also if an image is an upload then WordPress creates it multiple sizes like a thumbnail or anything like that.

here is a view of my form. Form View

can anyone help me or suggest me how can i do that? I tried using ajax uploader or jquery uploading method, but there I have to do many things myself like making db entries. is there any proper method I have to follow?

Answer 1

using ajax call you need to create function in functions.php file.

your ajax call like:

$("#YourButtnID").click(function(){
        var firstname = $('#fname').val();
        // get all the fields (input) like this..

        // and now for all the input type files.
        var identity = jQuery('#identity').prop('files')[0];
        var residence = jQuery('#residenceID').prop('files')[0];
        var selfie = jQuery('#selfie').prop('files')[0];

        //creating formData and inserting data into it
        var formData = new FormData();
        //action -> this will be your function name in functions.php
        formData.append('action','your_custom_function');
        //now all the data .. appending 
        formData.append('fname',firstname);

        //Your images
        formData.append('identity', identity);        
        formData.append('residence', residence);
        formData.append('selfie', selfie);
        $.ajax({
               type: "POST",
               url: ajaxurl,
               contentType: false,
               processData: false,
               data: formData,
               dataType: "JSON",
               success:function(data){
                   if(data['status']){
                      //All went well
                   }else{
                     // something went wrong
               },
               error:function(err){
                   // You might not have caught any exception
               }
        });

and now in your functions.php file, create function to get all this done

<?php
function your_custom_function(){
    // initial response is false by default
    $response = array ('status'=>false,'msg'=>'invalid code');

    // you can have server side validation here if you want 
    // i.e. if(!$_REQUEST['fname']) this means if this field is not sent.. then return relevant response
    if (!function_exists('wp_handle_upload')) {
        require_once(ABSPATH . 'wp-admin/includes/file.php');
    }    
    $yourDBTable = $wpdb->prefix.'yourDBTable';

    $uploadedfile = $_FILES['identity'];
    $upload_overrides = array('test_form' => false);
    $movefile = wp_handle_upload($uploadedfile, $upload_overrides);
    //after uploading to uploads DIR you will get url of your image here
    $id_url = $movefile['url']; 

    $uploadedfile = $_FILES['residence'];
    $upload_overrides = array('test_form' => false);
    $movefile = wp_handle_upload($uploadedfile, $upload_overrides);
    $resid_url = $movefile['url'];

    $uploadedfile = $_FILES['selfie'];
    $upload_overrides = array('test_form' => false);
    $movefile = wp_handle_upload($uploadedfile, $upload_overrides);
    $selfie_url = $movefile['url'];

    $user_data = array(
        'fname' => $_REQUEST['fname'],
        'photo_identity' => $id_url,
        'photo_selfie' => $selfie_url,
        'photo_residence' => $resid_url
    );
    try {
        $result = $wpdb->insert($yourDBTable,$user_data);
        $response['status']=true;
    } catch (Exception $e) {
        $response['msg']="Something went wrong";

    }
    echo json_encode($response);
    wp_die();
}