I have a form with multiple form inputs and image upload using dropzone. The image upload area has a class called dropzone. When I put the class dropzone into the form the entire upload area style is going.
Means the uploaded thumbnails showing out side of the upload area. I want to use the dropzone without changing the class dropzone in from. I tried initialising the dropzone programatically but that time the images is not posting into the controller.
Dropzone :
Code:
Dropzone.options.propertyForm = {
maxFiles:11,
autoProcessQueue: false,
paramName: "file",
uploadMultiple: true,
acceptedFiles: "image/*",
maxFilesize: 1,
parallelUploads: 100,
init: function () {
var myDropzone = this;
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
console.log('Click');
e.preventDefault();
e.stopPropagation();
$(window).scrollTop(0);
if ( $("#property-form").valid() ) {
myDropzone.processQueue();
$("#property-form").submit();
}
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
console.log('send event');
});
this.on("successmultiple", function(files, response) {
console.log(response);
});
this.on("errormultiple", function(files, response) {
console.log('error');
});
}
};
HTML Form :
Code:
<form name="property-form" action="<?php echo site_url() ?>list-property" enctype="multipart/form-data" 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">
<?php echo form_error('prop_title'); ?>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Status</label>
<select class="form-control required" id="prop_status" name="prop_status">
<option value="">Select</option>
<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="form-control required" id="prop_type" name="prop_type">
<option value="">Select</option>
<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">
<?php echo form_error('prop_price'); ?>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="form-group">
<label>Sqft</label>
<input class="input-text" name="prop_sqft" id="prop_sqft" placeholder="SqFt">
<?php echo form_error('prop_sqft'); ?>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="form-group">
<label>Bed Rooms</label>
<select class="form-control required" name="prop_rooms" id="prop_rooms">
<option value="">Select</option>
<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>
<?php echo form_error('prop_address'); ?>
</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">
<?php echo form_error('prop_owner_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">
<?php echo form_error('prop_owner_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">
<?php echo form_error('prop_owner_phone'); ?>
</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_detailed_info" name="prop_detailed_info" placeholder="Detailed Information"></textarea>
</div>
<?php echo form_error('prop_detailed_info'); ?>
</div>
</div>
<div class="col-md-12">
<button type="submit" id="submit-all" class="btn button-sm button-theme">Submit</button>
</div>
</form>
Code:
<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>
