Login

sarath_unrelax · 06-12-2019, 05:34 AM

(06-12-2019, 05:32 AM)hc-innov Wrote: OK.
I'm writing an example. Leave me 10 minutes.

Ok. Can you make the changes in my code ?

So it will be more useful

sarath_unrelax · 06-12-2019, 05:39 AM

Buddy I need only data being uploaded on submit click, we already set autoProcessQueue = false is it fine ?

hc-innov · 06-12-2019, 06:20 AM

A complete exemple:

controller (I just print_r or echo variables for the javscript console)

PHP Code:
<?php
class Test extends CI_Controller {
    public function __construct() {
        parent::__construct();
        $this->load->helper('url_helper');
    }
    
    public function index() {
        $this->load->library('form_validation');
        $this->form_validation->set_rules('name','nom','required');
        
        if ($this->form_validation->run() === FALSE) {           
            $this->load->view('upload');            
        } else {
            
            if (!empty($_FILES)){
                print_r($_FILES);
            } else {
                echo '$_FILES is empty';
            }
        }
    }
} 

The view upload

PHP Code:
<html>
    <head>
        <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/dropzone.js"></script>
        <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/newjavascript.js" /></script>
        <link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">
    </head>
    <body>
    <form action="<?php echo site_url().'/test/index'; ?>" enctype="multipart/form-data" method="post" class="dropzone" id="property-form">
        
        <div class="dropzone-preview">
            
        </div>
        <input type="text" name="name">
        <button type="submit" value="OK"></button>
    </form>
    </body>
</html> 

the good javascript (newjavascript):

Code:
Dropzone.options.propertyForm = {

       maxFiles:11,

       autoProcessQueue: false,

       uploadMultiple: true,

       acceptedFiles: "image/*",

       maxFilesize: 1,

       parallelUploads: 11,

       init: function () {

           var myDropzone = this;

           this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {

               console.log('Click');

             e.preventDefault();

             e.stopPropagation();

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

            });

        }  

    }

the response in my console:
send event newjavascript.js:22:15
Array
(
    [file] => Array
        (
            [name] => Array
                (
                    [0] => mcd.png
                )

            [type] => Array
                (
                    [0] => image/png
                )

            [tmp_name] => Array
                (
                    [0] => /tmp/php1B29UX
                )

            [error] => Array
                (
                    [0] => 0
                )

            [size] => Array
                (
                    [0] => 12549
                )

        )

)

evrything works

sarath_unrelax · 06-12-2019, 06:28 AM

(06-12-2019, 06:20 AM)hc-innov Wrote: A complete exemple:

controller (I just print_r or echo variables for the javscript console)

PHP Code:
<?php class Test extends CI_Controller {     public function __construct() {         parent::__construct();         $this->load->helper('url_helper');     }          public function index() {         $this->load->library('form_validation');         $this->form_validation->set_rules('name','nom','required');                  if ($this->form_validation->run() === FALSE) {                        $this->load->view('upload');                     } else {                          if (!empty($_FILES)){                 print_r($_FILES);             } else {                 echo '$_FILES is empty';             }         }     } }

The view upload

PHP Code:
<html>     <head>         <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/dropzone.js"></script>         <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/newjavascript.js" /></script>         <link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">     </head>     <body>     <form action="<?php echo site_url().'/test/index'; ?>" enctype="multipart/form-data" method="post" class="dropzone" id="property-form">                  <div class="dropzone-preview">                      </div>         <input type="text" name="name">         <button type="submit" value="OK"></button>     </form>     </body> </html>

the good javascript (newjavascript):

Code:
Dropzone.options.propertyForm = { maxFiles:11, autoProcessQueue: false, uploadMultiple: true, acceptedFiles: "image/*", maxFilesize: 1, parallelUploads: 11, init: function () { var myDropzone = this; this.element.querySelector("button[type=submit]").addEventListener("click", function(e) { console.log('Click'); e.preventDefault(); e.stopPropagation(); 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'); }); } }

the response in my console:
send event newjavascript.js:22:15
Array
(
    [file] => Array
        (
            [name] => Array
                (
                    [0] => mcd.png
                )

            [type] => Array
                (
                    [0] => image/png
                )

            [tmp_name] => Array
                (
                    [0] => /tmp/php1B29UX
                )

            [error] => Array
                (
                    [0] => 0
                )

            [size] => Array
                (
                    [0] => 12549
                )

        )

)

evrything works

Buddy u there ?

hc-innov · 06-12-2019, 06:40 AM

yes, follow my example and understand it.

Copy the code in your editor.
I explain:
I don't use jquery, it's not important and not necessary.

If you want to pass all input , you must add class dropzone to your form.
After, you can call Dropzone.options.propertyForm=... (propertyForm is the camelized ID of the form element)

options uploadMultiple: true and parallelUploads are important.

DropzoneJS send a XHR request(Ajax) to the url (attribute action).
It send the $_FILES and $_POST.

because it's an ajax call, don't use redirect in your PHP code, use it in your javascript.

sarath_unrelax · 06-12-2019, 06:41 AM

Still not working in my side bro

hc-innov · 06-12-2019, 06:46 AM

My code works. test it with my controller, my view and my javascript

sarath_unrelax · 06-12-2019, 06:53 AM

(06-12-2019, 06:46 AM)hc-innov Wrote: My code works. test it with my controller, my view and my javascript

Buddy, can you help me with my project, I will attach here

hc-innov · 06-12-2019, 06:58 AM

send your code

sarath_unrelax · 06-12-2019, 06:59 AM

Let me send you the google drive link ?