$_FILES Array getting empty when using $this->form_validation->run()

try this (not in JQUERY).
remove the die() in your controller and the redirect function.

Code:

Dropzone.options.propertyForm({
      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) {
            e.preventDefault();
            e.stopPropagation();
            $(window).scrollTop(0);

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

            }

            });
                  // 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');
           });

       }  
   });

Buddy,
Where I have to try this piece of code ?

try this (not in JQUERY).
remove the die() in your controller and the redirect function.

Code:

Dropzone.options.propertyForm({
      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) {
            e.preventDefault();
            e.stopPropagation();
            $(window).scrollTop(0);

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

            }

            });
                  // 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');
           });

       }  
   });

Buddy,
Where I have to try this piece of code ?

In my .js file right ?

try this (not in JQUERY).
remove the die() in your controller and the redirect function.

Code:

Dropzone.options.propertyForm({
      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) {
            e.preventDefault();
            e.stopPropagation();
            $(window).scrollTop(0);

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

            }

            });
                  // 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');
           });

       }  
   });

Buddy,
Where I have to try this piece of code ?

In my .js file right ?

Buddy,I have to put in my addProperty.js file or with the html form directly. ?

In your javascript code.
the full version:

Code:

$(document).ready(function(){
  $("#error_msg").hide();
    var addPropertyForm = $("#property-form");

    var validator = addPropertyForm.validate({
       rules:{
        prop_rooms : {required : true, selected: true },
        prop_address :{ required : true },
        prop_owner_name :{ required : true },
        prop_owner_email :{ required : true, email : true },
        prop_owner_phone :{ required : true, digits : true },
       },
       messages:{
        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"}
       }
   });




  Dropzone.options.propertyForm({
      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) {
            e.preventDefault();
            e.stopPropagation();
            $(window).scrollTop(0);

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

            }

            });
                  // 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');
           });

       }  
   });
});

In your javascript code.
the full version:

Code:

$(document).ready(function(){
  $("#error_msg").hide();
    var addPropertyForm = $("#property-form");

    var validator = addPropertyForm.validate({
       rules:{
        prop_rooms : {required : true, selected: true },
        prop_address :{ required : true },
        prop_owner_name :{ required : true },
        prop_owner_email :{ required : true, email : true },
        prop_owner_phone :{ required : true, digits : true },
       },
       messages:{
        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"}
       }
   });




  Dropzone.options.propertyForm({
      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) {
            e.preventDefault();
            e.stopPropagation();
            $(window).scrollTop(0);

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

            }

            });
                  // 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');
           });

       }  
   });
});

Still $_FILES is empty

Nothing in console. We didn't specified the url for dropzone?

Attached Files

Thumbnail(s)
   

you must add the class dropzone to your form and dropzone autodiscover the form and the action. It can send your datas and your files in one xhr request.
You must remove the class dropzone to your div.

it's OK?

You mentioned Dropzone.options.propertyForm({

Actually property-form or propertyForm ?

Like this ?

Code:

<form name="property-form" class="dropzone" action="<?php echo base_url() ?>list-property" enctype="multipart/form-data" method="post" id="property-form">

Is it okay ?

Any changes required here ?

Code:

<div id="myDropzone" class="dropzone-design mb-10">
                         <div class="dz-default dz-message" data=""><span>Drop files here to upload</span></div>
                                               </div>

OK.
I'm writing an example. Leave me 10 minutes.