Jump to content
Sign in to follow this  
PHPLazy

DropzoneJS Multiple Image Upload With Input Data

Recommended Posts

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.