• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
How to make dropzone upload without setting class dropzone in form ?

#1
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>


What I tried :

I tried getting the dropzone programatically but that time, the images is not posting to the controller because the form also has the action attribute. Without form action attribute I can't validate using the Codeigniter  form validation.

What I need :

1. I need the dropzone posted to my controller without adding the class in <form> element. Because here

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>

Here I'm showing the upload area for the images. The class I'm used is dropzone so when I use the same class name in form element the entire form is getting changed.

I got what I'm expecting ?
Reply


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


Users browsing this thread:
1 Guest(s)


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2019 MyBB Group.