DropzoneJS Multiple Image Upload With Input Data

[PHPLazy]

Hello Guys,

 

I'm developing one website for submitting property and I used DropzoneJS library to drag and drop upload images of properties. I want to upload images on button click and also post the form input values to get all the values along with the images.

 

HTML Code :

<?php
require_once("functions.php");
require_once("nav_header.php");











 ?>





<!-- Sub banner start -->
<!--<div class="sub-banner overview-bgi">
    <div class="overlay">
        <div class="container">
            <div class="breadcrumb-area">
                <h1>Submit Property</h1>

            </div>
        </div>
    </div>
</div>
<!-- Sub Banner end -->

<!-- Submit Property start -->
<div class="content-area-7 submit-property">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
    <!--<div id="error_message" class="notification-box">
    </div>-->


            </div>
            <div class="col-md-12">
                <div class="submit-address">
                    <form name = "property_form" id="property_form">
                        <div class="main-title-2">
                            <h1><span>Tell Me</span> Something About Your Property</h1>
                        </div>
                        <div class="search-contents-sidebar mb-30">
                            <div class="form-group">
                                <label>Property Title</label>

                                <input data-validation="length alphanumeric" data-validation-length="min10" data-validation-error-msg="Propererty title should be minumm 44 characters" class="input-text" name="prop_title" placeholder="Property Title">
                                <span class="val_prop_title"></span>
                            </div>

                            <div class="row">
                                <div class="col-md-6 col-sm-6">
                                    <div class="form-group">
                                        <label>Status</label>
                                        <select class="selectpicker search-fields" name="prop_status">
                                            <option value="Sale">For Sale</option>
                                            <option value="Rent">For Rent</option>
                                        </select>
                                        <span class="val_prop_status"></span>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6">
                                    <div class="form-group">
                                        <label>Type</label>
                                        <select class="selectpicker search-fields" name="prop_type">
                                            <option value="Modern">Modern</option>
                                            <option value="Traditional">Traditional</option>
                                            <option value="Arabic">Arabic</option>

                                        </select>
                                        <span class="val_prop_type"></span>

                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3 col-sm-6">
                                    <div class="form-group">
                                        <label>Price (Dirham)</label>
                                        <input data-validation="number" data-validation-error-msg="Please enter the property price in digits." class="input-text" name="prop_price" placeholder="AED">
                                        <span class="val_prop_price"></span>

                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="form-group">
                                        <label>Sqft</label>
                                        <input data-validation="number" data-validation-error-msg="Please enter the Sqft of your property" class="input-text" name="prop_area" placeholder="SqFt">
                                        <span class="val_prop_area"></span>

                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="form-group">
                                        <label>Bed Rooms</label>
                                        <select class="selectpicker search-fields" name="prop_rooms">

                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>

                                        </select>
                                        <span class="val_prop_rooms"></span>

                                    </div>
                                </div>
                                <!-- <div class="col-md-3 col-sm-6">
                                    <div class="form-group">
                                        <label>Bathroom</label>
                                        <select class="selectpicker search-fields" name="1">
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                            <option>6</option>
                                        </select>
                                    </div>
                                </div> -->
                            </div>
                        </div>


                        <div class="main-title-2">
                            <h1><span>Location</span></h1>
                        </div>
                        <div class="row mb-30 ">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <label>Address</label>
                                    <input data-validation="required" class="input-text" name="prop_address"  placeholder="Address">
                                </div>
                                <span class="val_prop_address"></span>

                            </div>



                        </div>
                        <div class="main-title-2">
                                                    <h1><span>Upload</span> Photos Of Villa </h1>
                                                </div>
                                                <div id="myDropZone" class="dropzone dropzone-design mb-10">
                                                    <div class="dz-default dz-message" data><span>Drop files here to upload</span></div>
                                                </div>
                        <div class="main-title-2">
                            <h1><span>Detailed</span> Information</h1>
                        </div>



                        <div class="row mb-30">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Detailed Information</label>
                                    <textarea class="input-text" data-validation="required" data-validation-error-msg="Please tell me something about your property" name="prop_message" placeholder="Detailed Information"></textarea>
                                </div>
                                <span class="val_prop_message"></span>
                            </div>
                        </div>
                        <!--<div class="row mb-30">
                            <div class="col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label>Building Age <span>(optional)</span></label>
                                    <select class="selectpicker search-fields" name="years">
                                        <option>0-1 Years</option>
                                        <option>0-5 Years</option>
                                        <option>0-10 Years</option>
                                        <option>0-20 Years</option>
                                        <option>0-40 Years</option>
                                        <option>40+Years</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label>Bedrooms (optional)</label>
                                    <select class="selectpicker search-fields" name="1">
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                        <option>6</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label>Bathrooms (optional)</label>
                                    <select class="selectpicker search-fields" name="1">
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                        <option>6</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <label class="margin-t-10">Features (optional)</label>
                                <div class="row">
                                    <div class="col-lg-4 col-sm-4 col-xs-12">
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="checkbox1" type="checkbox">
                                            <label for="checkbox1">
                                                Free Parking
                                            </label>
                                        </div>
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="checkbox2" type="checkbox">
                                            <label for="checkbox2">
                                                Air Condition
                                            </label>
                                        </div>
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="checkbox3" type="checkbox">
                                            <label for="checkbox3">
                                                Places to seat
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-sm-4 col-xs-12">
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="checkbox4" type="checkbox">
                                            <label for="checkbox4">
                                                Swimming Pool
                                            </label>
                                        </div>
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="checkbox5" type="checkbox">
                                            <label for="checkbox5">
                                                Laundry Room
                                            </label>
                                        </div>
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="checkbox6" type="checkbox">
                                            <label for="checkbox6">
                                                Window Covering
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-sm-4 col-xs-12">
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="checkbox7" type="checkbox">
                                            <label for="checkbox7">
                                                Central Heating
                                            </label>
                                        </div>
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="checkbox8" type="checkbox">
                                            <label for="checkbox8">
                                                Alarm
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>-->
                        <div class="main-title-2">
                            <h1><span>Contact</span> Details</h1>
                        </div>
                        <div class="row">
                            <div class="col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label>Name</label>
                                    <input data-validation="required" data-validation-error-msg="Please enter your name." class="input-text" name="prop_owner_name" placeholder="Name">
                                    <span class="val_prop_owner_name"></span>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label>Email</label>
                                    <input data-validation="email" class="input-text" name="prop_owner_email" placeholder="Email">
                                    <span class="val_prop_owner_email"></span>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label>Phone</label>
                                    <input data-validation="number" data-validation-error-msg="Please enter your contact " class="input-text" name="prop_owner_phone"  placeholder="Phone">
                                    <span class="val_prop_owner_phone"></span>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <button type="submit" name="submit" id="btn-submit">
                                  <span class="btn button-sm button-theme">Submit</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
  $.validate({
  lang: 'es'
});
</script>
<!-- Submit Property end -->

<?php
require_once("nav_footer.php");
 ?>

 

 

Jquery Code :

 

  // Dropzone initialization
    Dropzone.autoDiscover = false;
    $(function () {
        $("div#myDropZone").dropzone({

            url: 'submit_property_data.php',
            addRemoveLinks: true,
            autoProcessQueue: false,
            addRemoveLinks: true,
            parallelUploads: 1,
            maxFilesize: 2,
            maxFiles:11


        });
    });

 

 

Anybody help me to upload images on button click and also post the input field values with it