Welcome Guest, Not a member yet? Register   Sign In
Image upload using DropzoneJs how to post the file parameters to controller ?
#1

Hello Everybody,

I'm first time here & also beginner to Codeigniter, I'm developing one website for a real estate agency & here I have one form to get property details such as property name, price,address,contact no etc from the user & also the images of property using the DropzoneJs.

I have two method in a controller :

addProperty() -  Here I validate the form inputs and insert into my table.

UploadImages() - Here I do upload process of the images.

But when I insert the property images details into table I need the reference of the property id which performed the insertion in addProperty() method. addProperty() method has $result variable which gives the last inserted id.
Once the insertion of property details is success I want to do the upload process of the property images and also insertion of image details into my table.

Here What is working :


1.Upload of images working
2. Insertion of property data working.

But what I actually need is, I wan't to process the images and property data in the same method called addProperty(), So I can get the reference of the last inserted id.



Controller
Name : Home.php 
Methods : addProperty() , uploadImages()


PHP Code:
<?php if(!defined('BASEPATH')) exit('No direct script access allowed');

/**
 * Class :Home (HomeController)
 * Login class to control to authenticate user credentials and starts user's session.
 * @author : Kishor Mali
 * @version : 1.1
 * @since : 15 November 2016
 */
class Home extends CI_Controller
{
 
   /**
     * This is default constructor of the class
     */
 
   public function __construct()
 
   {
 
     parent::__construct();
 
     $this->load->model('property_model');

 
    }

 
   /**
     * Index Page for this controller.
     */
 
   public function index()
 
   {
 
       $data = array('title'=> 'Vierra Property Broker''main_content'=>'home');
 
       $this->load->view('template'$data);

 
   }

 
   /**
     * Loaading the submit property form.
     */

 
   public function listProperty()

 
   {

 
     $data = array('title'=> 'Vierra Property Broker - Submit your Property''main_content'=>'submit_property');
 
     $this->load->view('template'$data);




 
   }



 
   function addProperty()
 
   {

 
          $this->load->library('form_validation');

 
          //$this->form_validation->set_rules('prop_title','Villa Title','trim|required|max_length[128]');
 
         // $this->form_validation->set_rules('prop_status','Status','trim|required');
 
          //$this->form_validation->set_rules('prop_type','Type','trim|required');
 
          //$this->form_validation->set_rules('prop_price','Price','trim|required|numeric');
 
          //$this->form_validation->set_rules('prop_sqft','Sqft','trim|required|numeric');
 
          $this->form_validation->set_rules('prop_rooms','Rooms','trim|required|numeric');
 
          $this->form_validation->set_rules('prop_address','Address','trim|required|max_length[200]');
 
          $this->form_validation->set_rules('prop_owner_phone','Mobile Number','required|min_length[10]');
 
          $this->form_validation->set_rules('prop_owner_name','Owner Name','required|min_length[5]');
 
          $this->form_validation->set_rules('prop_owner_email','Owner Email','required|valid_email');
 
          //$this->form_validation->set_rules('prop_detailed_info','Detailed Info','trim|required|max_length[2000]');
 
          //$this->form_validation->set_rules('prop_status','Current Status','trim|required');

 
          if($this->form_validation->run() == FALSE)
 
          {
 
              $this->listProperty();
 
          }
 
          else
 
          {


 
              $prop_title ucwords(strtolower($this->security->xss_clean($this->input->post('prop_title'))));
 
              $prop_status ucwords(strtolower($this->security->xss_clean($this->input->post('prop_status'))));
 
              $prop_type ucwords(strtolower($this->security->xss_clean($this->input->post('prop_type'))));
 
              $prop_price $this->security->xss_clean($this->input->post('prop_price'));
 
              $prop_sqft $this->security->xss_clean($this->input->post('prop_sqft'));
 
              $prop_rooms $this->security->xss_clean($this->input->post('prop_rooms'));
 
              $prop_address $this->security->xss_clean($this->input->post('prop_address'));
 
              $prop_owner_name $this->security->xss_clean($this->input->post('prop_owner_name'));
 
              $prop_owner_email $this->security->xss_clean($this->input->post('prop_owner_email'));
 
              $prop_owner_phone $this->security->xss_clean($this->input->post('prop_owner_phone'));
 
              $prop_detailed_info $this->security->xss_clean($this->input->post('prop_detailed_info'));
 
              $prop_current_status $this->security->xss_clean($this->input->post('prop_current_status'));









 
              //$userInfo = array('email'=>$email, 'password'=>getHashedPassword($password), 'roleId'=>$roleId, 'name'=> $name,
 
                                  //'mobile'=>$mobile, 'createdBy'=>$this->vendorId, 'createdDtm'=>date('Y-m-d H:i:s'));

 
               $propertyInfo = array('title'=>$prop_title'status'=>$prop_status'type'=>$prop_type'price'=>$prop_price,
 
                                     'sqft'=>$prop_sqft'rooms'=>$prop_rooms'address'=>$prop_address'name'=>$prop_owner_name,
 
                                     'email'=>$prop_owner_email'phone'=>$prop_owner_phone'detailedInfo'=>$prop_detailed_info,
 
                                     'currentStatus'=>$prop_current_status);


 
              $this->load->model('property_model');
 
              $result $this->property_model->addNewProperty($propertyInfo);

 
              if($result 0)

 
              {

 
                 //$propertyImgUpload = uploadImages($result);
 
                  $this->session->set_flashdata('success''Thank you for submiting your property with us!, Our team will contact you shortly');
 
              }
 
              else
 
              {
 
                  $this->session->set_flashdata('error''Submission of property failed, Contact [email protected]');
 
              }

 
              redirect('/submit-property');
 
          }





}

function 
uploadImages()
{


 
       if (!empty($_FILES)) {
 
       $count_img count($_FILES['file']['name']);

 
     foreach($_FILES['file']['tmp_name'] as $key => $value) {


 
       $tempFile $_FILES['file']['tmp_name'][$key];
 
       $fileName $_FILES['file']['name'][$key];
 
       $targetPath 'property-images/';
 
       $targetFile $targetPath $fileName ;
 
       if(move_uploaded_file($tempFile$targetFile))



 
       {





 
         echo "Success";

 
       }

 
       else {

 
         echo "Failed";

 
       }
 
  }

}

}
}

?>


View

Name : submit_property.php

PHP Code:
<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>

 
           <?php
                $this
->load->helper('form');






 
               $error $this->session->flashdata('error');
 
               if($error)
 
               {
 
                 echo '<div class="notification-box">'.$error.'</div>';

 
               }

 
               $success $this->session->flashdata('success');
 
               if($success)
 
               {
 
                 echo '<div class="notification-box">'.$success.'</div>';

 
               }

 
               ?>

                <div id="error_msg" class="alert alert-danger wow fadeInRight delay-01s" role="alert" style="visibility: visible; animation-name: fadeInRight;">
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                  <strong>Oops!</strong>, Please fix the following errors and submit again
                </div>

            <div class="col-md-12">
                <div class="submit-address">


                    <form name="property-form" action="<?php echo base_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>



                            <div class="col-md-12">
                              <button type="submit" id="submit-all" class="btn button-sm button-theme">Submit
                            </button>

                            </div>
                            <script src="<?php echo base_url('assets/frontend/js/addProperty.js'); ?>"></script>

                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div> 


Jquery (Perform dropzone upload)

Code:
/**
* File : addUser.js
*
* This file contain the validation of add user form
*
* Using validation plugin : jquery.validate.js
*
* @author Sarath Chandran
*/

 $(document).ready(function(){

   $("#error_msg").hide();


     var addPropertyForm = $("#property-form");

     var validator = addPropertyForm.validate({

        rules:{
            //prop_title :{ required : true },
            //prop_status : { required : true, selected : true },
            //prop_type : {required : true, selected: true },
     prop_rooms : {required : true, selected: true },
     prop_address :{ required : true },
     prop_owner_name :{ required : true },
     //prop_detailed_info :{ required : true },
     prop_owner_email :{ required : true, email : true },
     prop_owner_phone :{ required : true, digits : true },
            //prop_price : { required : true, digits : true },
     //prop_sqft : { required : true, digits : true }


        },
        messages:{
            //prop_title :{ required : "Please enter title of villa" },
            //prop_status : { required : "Please select status", selected : "Please select atlease one option" },
     //prop_type : { required : "Please select type of villa", selected : "Please select atlease one option" },
     prop_rooms : { required : "Please select bed rooms", selected : "Please select atlease one option" },
            prop_address : { required : "Please enter address of villa"},
     prop_owner_name : { required : "Please enter name of owner"},
     prop_owner_email : { required : "Please enter email of owner", email : "Please enter valid email"},
     prop_owner_phone : { required : "Please enter phone of owner", digits : "Please enter valid phone no"},
     //prop_price : { required : "Please enter price of villa", digits : "Please enter price in digits"},
     //prop_detailed_info : { required : "Please enter detailed information"},
     //prop_sqft : { required : "Please enter size of villa", digits : "Please enter size in Sqft"}

        },



})



Dropzone.autoDiscover = false;

   $("div#myDropzone").dropzone({

       url: 'image-upload',
       addRemoveLinks: true,
       paramName: "file",
       maxFiles:11,
       autoProcessQueue: false,
       uploadMultiple: true,
       acceptedFiles: "image/*",
       maxFilesize: 1,
       parallelUploads: 10,

       init: function () {

           var myDropzone = this;

           document.getElementById("submit-all").addEventListener("click", function(e) {
                       // Make sure that the form isn't actually being sent.
                       e.preventDefault();



             $(window).scrollTop(0);

             //e.preventDefault();

             if ( $("#property-form").valid() ) {
               myDropzone.processQueue();

             }

             });





           this.on('sending', function(data, xhr, formData) {
           formData.append("prop_title", jQuery("#prop_title").val());
           formData.append("prop_title", jQuery("#prop_title").val());

                 alert("Data is sending");

           });

           this.on("sendingmultiple", function(data, xhr, formData) {
           formData.append("prop_title", jQuery("#prop_title").val());
           formData.append("prop_title", jQuery("#prop_title").val());

       });

           this.on("complete", function (file) {
             if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {

                 alert("Completed Upload");
                 //$("#property-form").submit();
           }

         });






 }



});


});



Routes

Code:
$route['image-upload'] = 'home/uploadImages';

How I can process the form inputs and image data in the same method called addProperty() ?
Reply
#2

Hello there,

Before trying to check and correct your codes which probably failed and that's why you're writing here, let me post an example which works for me:

for VIEW : 

PHP Code:
<div class="dropzone-upload-image">

 
   <form action="<?php echo base_url('admin/add_image_for_project/'.$this->uri->segment(3).''); ?>" 
 
       class="dropzone" id="my-awesome-dropzone" >
 
   </form>
        
</
div

$this->uri->segment(3) is where my ID was in the url. That's why I needed.

And don't forget to add the necessary Js parts on top : 

<script src="<?php echo base_url('necessary-parts-admin/js/jquery.js');?>"></script>
<script src="<?php echo base_url('necessary-parts-admin/js/dropzone.js');?>"></script>
<script src="<?php echo base_url('necessary-parts-admin/js/mine.js');?>"></script>
<link rel="stylesheet" href="<?php echo base_url('necessary-parts-admin/js/css/dropzone.css')?>" />

within mine.js I have a feedback to see what has been uploaded:

Code:
Dropzone.autoDiscover = false;
$(function(){


 var myDropzone = new Dropzone('#my-awesome-dropzone');

myDropzone.on("complete", function(file){
    var img = "<img src='http://localhost/my_project_name/upload/projects/" + file.name + "' />" ;
    var tr= "<div class='images'>" + img +  "</div>";
    $('#uploaded-images').append(tr);

 });

});


Controller : 

PHP Code:
public function add_image_for_project($id){


 
       $config['upload_path'] = 'upload/projects/'// I'm not uploading within Codeigniter folders
 
       $config['overwrite'    False;
 
       $config['allowed_types'] = "jpg|gif|png";

 
       //$this->load->library('upload', $config);
 
       $this->upload->initialize($config);
 
       if($this->upload->do_upload('file')){

 
           //echo $this->upload->data("file_name");
 
           $file_name $this->upload->data("file_name");

 
           $data = array(
 
             'project_id' => $id,
 
             'project_image_name' => $file_name,
 
             'project_image_link' => base_url(array('upload/projects/'.$this->upload->data("file_name")))

 
           );

 
           $this->load->model('My_Backend_model');
 
           $result $this->My_Backend_model->lets_add_project_image($data);
 
           if($result){
 
             $this->session->set_flashdata('success''Your Image has been uploaded! ');
 
             redirect($_SERVER['HTTP_REFERER']);
 
           }

 
       }

 
     

MODEL: 

PHP Code:
public function lets_add_project_image($data = array()){
 
 $query  $this->db->insert('project_images',$data);
 
  return $query;
 
 


And don't forget to configure your config/autoload line (most probably 61) : UPLOAD is important

$autoload['libraries'] = array('database','session', 'upload');  

PLUS. Let me give you a tip: If you feel stucked about last inserted id bla bla, place "input form" and "image upload" forms on different pages. And redirect the user to the "image upload" page after s/he has posted the form successfully... In short, if post is success redirect to image_upload_page with an url which contains the id Wink


Regards.
Reply




Theme © iAndrew 2016 - Forum software by © MyBB