0

I am trying to upload a pic for which I have used the following code.

HTML:(I want that pic to be uploaded without submitting the form.)

    <form id="chapThumb" method="post" action="<?php echo base_url();?>index.php/Admin/createChapter" enctype="multipart/form-data">
         <input type="file" name="thumbpic" id="thumbpic">
         <p class="FS12">Upload a thumbnail Image for the Chapter</p>
         <input type="text" class="form-control" name="chname" placeholder="Enter chapter name"><br>
         <input type="button" class="form-control" name="thumb" value="Upload" id="thumb">
         <input class="dp-btn2" type="submit" value="Create" name="submit">
    </form>

JQuery:

$(document).ready(function(){
            $("#thumb").on('click',function(){
                var x = $("#thumbpic").val();
                console.log('x:'+x);
                jQuery.ajax({
                    type: 'POST',
                    dataType: "json",
                    url: "<?php echo base_url();?>index.php/Admin/createChapterThumb",
                    data: {"thumbpic":x},
                    success:function(response){
                        console.log("response"+response);
                        var msg = response.message;
                        var stat = response.status;
                        var da = response.da;
                        console.log('msg:'+msg+',stat:'+stat+',da:'+da);
                        if(stat == 'success'){
                            //some code
                        }
                        else{
                            //some code
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) { 
                        console.log("Status: " + textStatus); console.log("Error: " + errorThrown); 
                    }
                });
            });
        });

Controller:

public function createChapterThumb(){
        if($this->input->is_ajax_request()) {
            $this->load->model('DPModel');
            $config['upload_path']          = 'uploads/chapters/thumbs/temp';
            $config['file_name']            = 'chapThumb';
            $config['allowed_types']        = 'gif|jpg|png';
            $config['max_size']             = 100;
            $this->load->library('upload', $config);
            if ( ! $this->upload->do_upload('thumbpic'))
            {
                $data['status'] = 'error';
                $data['message'] = $this->upload->display_errors();
                echo json_encode($data);
            }
            else
            {
                $data['status'] = 'success';
                $data['message'] = $this->upload->data();
                echo json_encode($data);
            }
            exit;
        }
        //$res = $this->customerModel->insertChapter();
    }

When upload button is clicked am getting the following error in console:

msg:You did not select a file to upload.,stat:error

akhil regonda
  • 159
  • 2
  • 13
  • You cannot get the value of `` the way you are trying. You will need to use a javascript `FormData` object. Lots of examples on Stackoverflow and elsewhere on the web. – DFriend Oct 08 '17 at 20:42
  • See this: https://stackoverflow.com/questions/46633610/multiple-file-upload-in-each-inputs-using-codeigniter-and-ajax – Brian Gottier Oct 09 '17 at 02:40

1 Answers1

0

Change the line $config['upload_path'] = 'uploads/chapters/thumbs/temp'; in controller function to below.

$config['upload_path'] = './uploads/chapters/thumbs/temp/';

Also, set the file permission of the folder to 777.

anees ma kader
  • 87
  • 1
  • 1
  • 10