Jump to content

PHP Dropzone Image Upload With Multiple Form Inputs

PHPLazy

By PHPLazy
in PHP Coding Help

 Share

Recommended Posts

PHPLazy Member

PHPLazy

Posted
Posted

Hello,

 

I'm developing one website for a real-estate agency. I have a html form that is used to submit property details, There is multiple form inputs and also I need to upload multiple property images using Dropzone JS multiple image upload.

Here I'm validating form inputs using jQuery Validation library. Validation works perfect and data Is being to posted to php file called submit_property_data.php. But when I implement the Dropzone JS image upload its not working.

 

JS File (property-submit.js)

  

$('document').ready(function() {
  $("#notification-property").hide();

  /* handling form validation */
  $("#property-form").validate({
    rules: {
      prop_title: "required",
      prop_price: {
        required: true,
        digits: true
        },
      prop_area: {
        required: true,
        digits: true
      },
      prop_address: "required",
      prop_message: {
        required: true,
        minlength: 10,
        maxlength: 2000
      },
      prop_owner_name: "required",
      prop_owner_email: {
        required: true,
        email: true
      },
      prop_owner_phone: {
        required: true,
        digits: true
      },
    },
    messages: {
      'prop_title': {
        required: "Please enter title for your property"
      },
      prop_price: {
        required: "Please enter price of your property",
        digits: "Please enter price in digits (AED)"
      },
      prop_area: "Please enter Sqft of your property",
      prop_address: "Please enter address of your property",
      prop_message: {
        required: "Please enter detailed Information",
        minlength: "Please enter something about your property in 50 - 20000 characters",
        maxlength: "Please enter something about your property in 50 - 20000 characters"
      },

			prop_owner_name: "Please enter your name",
			prop_owner_email: {
				required: "Please enter your email address",
				email: "Please enter valid email address"

			},
			prop_owner_phone: {
				required: "Please enter your phone number",
				digits: "Please enter valid phone number"

			},
    },
    submitHandler: submitPropertyForm
  });

  /* Handling login functionality */
  function submitPropertyForm() {
    var data = $("#property-form").serialize();
    $.ajax({
      type: 'POST',
      url: 'submit_property_data.php',
      data: data,
      beforeSend: function() {
        $("#submit-button").html('<span class="glyphicon glyphicon-transfer"></span> &nbsp; Submiting ...');
      },
      success: function(response) {
        if (response == "ok") {
          console.log(1);
          document.getElementById("property-form").reset();
          $("#notification-property").html('<b> ' + response + ' !</b>').show();
          //setTimeout(' window.location.href = "dashboard.php"; ',4000);
        } else {
          $("#notification-property").fadeIn(1000, function() {
            $("#notification-property").html('<b>' + response + ' !</b>').fadeOut();
            $("#submit-button").html('&nbsp; Send');
          });
        }
      },
			complete:function(){
											 $('body, html').animate({scrollTop:$('form').offset().top}, 'slow');
									 }
    });
    return false;
  }

    $("#submit-button").bind('click', function() {
	  if ( $("#property-form").valid() ) {
		  submitPropertyForm();
	  } else {
		  console.log('form invalid');
	  }
  })


		Dropzone.autoDiscover = false;
		$(function () {
				$("div#myDropzone").dropzone({

						url: 'submit_property_data.php',
						addRemoveLinks: true,
						maxFiles:11,
						uploadMultiple: true,
						autoProcessQueue: false,
						parallelUploads: 10,

						init: function () {

								var myDropzone = this;

								// Update selector to match your button
								$("#submit-button").click(function (e) {
										e.preventDefault();
										myDropzone.processQueue();
								});


								this.on('sending', function(file, xhr, formData) {
										// Append all form inputs to the formData Dropzone will POST
										var data = $('#property-form').serializeArray();
										$.each(data, function(key, el) {
												formData.append(el.name, el.value);
										});
								});

									this.on("success", function(file, responseText) {
											alert(responseText);
									});

							},


				});
		});


});

 

HTML File (submit-property.php)

  

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

!-- 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 id="notification-property" class="notification-box">sd</div>

            <div class="col-md-12">
                <div class="submit-address">
                    <form name = "property-form" method="post" 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 class="input-text" name="prop_title" id="prop_title" placeholder="Property Title">

                            </div>

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

                                        </select>

                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3 col-sm-6">
                                    <div class="form-group">
                                        <label>Price (Dirham)</label>
                                        <input class="input-text" name="prop_price" id="prop_price" placeholder="AED">

                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="form-group">
                                        <label>Sqft</label>
                                        <input class="input-text" name="prop_area" id="prop_area" placeholder="SqFt">

                                    </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" id="prop_rooms">

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

                                        </select>

                                    </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 class="input-text" id="prop_address" name="prop_address"  placeholder="Address">
                                </div>

                            </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">
                                    <textarea class="input-text" id="prop_message" name="prop_message" placeholder="Detailed Information"></textarea>
                                </div>
                            </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="opt_parking" name="opt_parking" value="1" type="checkbox">
                                            <label for="checkbox1">
                                                Free Parking
                                            </label>
                                        </div>
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="opt_air_condition" name="opt_air_condition" value="1" type="checkbox">
                                            <label for="checkbox2">
                                                Air Condition
                                            </label>
                                        </div>
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="opt_seat" name="opt_seat" value="1" 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="opt_swimming" name="opt_swimming" value="1" type="checkbox">
                                            <label for="checkbox4">
                                                Swimming Pool
                                            </label>
                                        </div>
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="opt_laundary" name="opt_laundary" value="1" type="checkbox">
                                            <label for="checkbox5">
                                                Laundry Room
                                            </label>
                                        </div>
                                        <div class="checkbox checkbox-theme checkbox-circle">
                                            <input id="opt_window_covering" name="opt_window_covering" value="1" 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="opt_parking" name="opt_parking" value="1" 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 class="input-text" name="prop_owner_name" id="prop_owner_name" placeholder="Name">
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label>Email</label>
                                    <input class="input-text" name="prop_owner_email" id="prop_owner_email" placeholder="Email">
                                </div>
                            </div>

                            <div class="col-md-4 col-sm-4">
                                <div class="form-group">
                                    <label>Contact No</label>
                                    <input class="input-text" name="prop_owner_phone" id="prop_owner_phone" placeholder="Phone">
                                </div>
                            </div>



                            </div>
                            <div class="col-md-12">
                                <button type="button" name="submit-button" id="submit-button">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="property-submit.js"></script>
<script src="js/dropzone.js"></script>

</html>

 

PHP File (submit_property_data.php)

  

<?php
echo "ok";
require_once("functions.php");


$ds          = DIRECTORY_SEPARATOR;  //1
$storeFolder = 'villas-images';
$encpt_data = rand(1000,5000);

if (!empty($_FILES)) {

   $tempFile = $_FILES['file']['tmp_name'];          //3

   $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;  //4

   $targetFile =  $targetPath.$_FILES['file']['name'];  //5

   if(move_uploaded_file($tempFile,$targetFile))
   {

     echo '<b>Success</b>';


   }
}
?>

 

What I actually need ?

 

I need to validate the form inputs first & upload the images once the form is valid also I need to post all the inputs to my php file called submit_property_data.php

Also I need the image inputs to store into my database.

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

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.

×
 Share
Go to topic listing
×
×
  • 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.