I am send dropzone file through ajax but it show ERROR : "You did not select a file to upload" in Codeigniter 3

Question

View

Image

  <!------------------------ Bootstarp Source File ------------------------>
  <link rel="stylesheet"  href="<?php echo base_url('assets/source_files/bootstrap.min.css');?>" >

  <!------------------------ Dropzone Source File ------------------------>
  <link rel="stylesheet"  href="<?php echo base_url('assets/source_files/dropzone.min.css');?>" >

  <label class="form_lable">Select Image </label>
<div class="dropzone-container col-md-6"  id="demo-dropzone" >  
    `your text`
   <p >

        <div class="dz-default dz-message" >
           <div class="dz-icon">
               <i class="demo-pli-upload-to-cloud icon-5x"></i>
           </div>
               <div>                          
                    <span class="dz-text">Drop files to upload</span>
                    <p class="text-sm text-muted">or click to pick manually</p>
               </div>
        </div>
               <div class="fallback">
                 <input type="file" name="userfile" id="userfile"   />
               </div>
    </p>
</div>

  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary" id="submit_btn">Submit</button>
  </div>
</form>

">

">

">

$('#demo-dropzone').dropzone({ url:"", autoProcessQueue: false, addRemoveLinks: true, multiple:false, uploadMultiple:true, // uplaod files in a single request parallelUploads: 1, maxFiles: 1, maxFilesize: 500, acceptedFiles: ".jpg, .png, .jpeg", init: function() { var myDropzone = this; myDropzone.on('maxfilesexceeded', function(file) { this.removeAllFiles(); this.addFile(file); }); this.on("removedfile", function(file) {

            });
            // Update selector to match your button
            $("#submit_btn").click(function(e) {
                e.preventDefault();
                myDropzone.processQueue();  
               
            });
            this.on("successmultiple", function(file, response) {
                if (response && file) {
                    console.log(response); 
                    
                }
            });

        }
    });

# Controller
<?php

defined('BASEPATH') OR exit('No direct script access allowed'); 
class Image_upload extends CI_Controller
{
    public function index(){
        $this->load->view('image_send');
    }

`File upload funxction`
    public function do_upload(){
   
        $image_name = $_FILES['file']['name'][0];
       $target= $_FILES['file']['tmp_name'][0];

        $target_file = basename($image_name);
        $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
        $custom_file=basename(uniqid().'.'.$imageFileType);

     if(is_dir('upload_image')){
        echo "is present";
     }
     else{
        mkdir('upload_image');
     }

     $config['upload_path']      = 'upload_image/';
     $config['allowed_types']    = 'gif|jpg|png|jpeg';
     $config['file_name']        = $image_name;


     $this->upload->initialize($config);
     $this->load->library('upload',$config);

     if ($this->upload->do_upload('userfile'))
     {
        $data = array('upload_data' => $this->upload->data());

        print_r($data);
     }
     else
     {
        
        $error = array('error' => $this->upload->display_errors());
        print_r($error);
     }


    }
    
}

?>

Answer 1

First of all you need to fix your view to have tag to warp out your input.

<form role="form" id="yourFormId" action="#" method="post" enctype='multipart/form-data'></form>

Second, get your form id and set the ajax like this

var frm = $('#yourFormId');
frm.submit(function (e) {

    e.preventDefault();

    var form_data   = new FormData();
    var file_data   = $('#yourFileInputID').prop('files')[0];
    form_data.append('file', file_data);

    $.ajax({

        type        : "POST",
        url         : TheUrl,
        processData : false,
        contentType : false,
        cache       : false,
        data        : form_data,
        dataType    : 'json',
        success: function (data) {
          //Your Code Goes Here..//
        }, error: function () {
          // Your Code Goes Here //
        }
    });
});