How to upload type file Using datatables codeigniter database

Question

I want to the name of file to db and then the file to my storage server ?

My view

   <form method="post" id="add_form" class="form-horizontal form-label-left" action="<?php echo site_url('bunyi_pasal/save') ?>" enctype="multipart/form-data">
    <div class="form-group"> 
        <label for="file" class="col-sm-1 control-label"> File </label>
        <div class="col-sm-1">
            <input type="file" id="file_pasal" name="file_pasal" class="file file-loading"> 
        </div>
    </div>     
    <div class="col-xs-12 col-md-12 col-lg-12 " align="navbar-right">
        <button type="submit" name="submit" class="btn btn-success btn-lg" style="width:50%">Save</button>
    </div>  
</form>

My DataTables

<script type="text/javascript">
    $(document).ready(function () {
        var save_method;
        var del = $(this).data('delete');
        $(".select2").select2({width: 'resolve', dropdownAutoWidth: true});
        $('#date').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            format: 'YYYY-MM-DD',
            calender_style: "picker_2"
        }, function (start, end, label) {
            //console.log(start.toISOString(), end.toISOString(), label);
        });
        $('#add_form').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                id_pasal: {
                    validators: {
                        notEmpty: {
                            message: ' Data Pasal Not Empty'
                        },
                    }
                },
                point: {
                    validators: {
                        notEmpty: {
                            message: ' Point Not Empty'
                        },
                    }
                },
                isi_bunyi_pasal: {
                    validators: {
                        notEmpty: {
                            message: ' Bunyi Pasal Not Empty'
                        },
                    }
                },
            },
            submitHandler: function (validator, form, submitButton) {
                $.post(form.attr('action'), form.serialize(), function (result) {
                    //  console.log(result);
                    //window.location.href = result.redirect;
                    if (result.retCode == 0) {
                        new PNotify({
                            title: 'Success',
                            text: result.info,
                            type: 'success',
                            styling: 'bootstrap3'
                        });
                        setTimeout(function () {
                            location.reload(true);
                        }, 1000);
                    } else {
                        new PNotify({
                            title: 'Response',
                            text: result.info,
                            type: 'error',
                            styling: 'bootstrap3'
                        });
                    }
                }, 'json');
            }
        });
    });
</script>

My Controller

public function __construct() {
    parent::__construct();
    $this->load->model('General');
    $this->load->helper(array('form', 'url'));
}

public function save() {
    $this->output->enable_profiler(TRUE);
    $response = array();
    if ($this->input->is_ajax_request()) {
        $id_bunyi_pasal = $this->input->post('id_bunyi_pasal');
        if (empty($id_bunyi_pasal)) {
            if (!empty($_FILES['file_pasal']['name'])) {
                //$config['upload_path'] = 'asset/data_pasal/';
                $config['upload_path'] = UPLOAD_DIR . '/asset/data_pasal';
                $config['allowed_types'] = 'doc|docx|pdf|jpg|jpeg';
                $config['file_name'] = $_FILES['file_pasal']['name'];
                //Load upload library and initialize configuration
                $this->load->library('upload', $config);
                $this->upload->initialize($config);
                if ($this->upload->do_upload('file_pasal')) {

                    $uploadData = $this->upload->data();
                    $file_pasal = $uploadData['file_name'];
                } else {
                    $file_pasal = '';
                }
            } else {

                $file_pasal = '';
            }
            $data_post = array(
                'id_bunyi_pasal'  => '',
                'id_pasal'        => $this->input->post('id_pasal'),
                'point'           => $this->input->post('point'),
                'isi_bunyi_pasal' => trim($this->input->post('isi_bunyi_pasal')),
                'file'            => $file_pasal,
                'keterangan'      => $this->input->post('keterangan'),
            );
            $return_id = $this->general->save($data_post, "tb_bunyi_pasal");
            $response['info'] = " Create Data Success ";
            $response['retCode'] = 0; //Success
            print_r($data_post);
            exit(0);
        }
        echo json_encode($response);
    } else {
        exit('Access Denied');
    }
}

Parameter output by inspect :

id_pasal:32 point:a isi_bunyi_pasal: Test Upload keterangan: Test Upload submit:

No File to send with method post when i click button save.

see: https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload — Alex, Dec 24 '17 at 20:15
What you might want to do is use a preexisting library like dropzone or bluemp and append the other form data you wish to add to the plugin on submit. — Alex, Dec 24 '17 at 20:16
can you tell me about my case because the case have attribut form others. the link is one component about case....please help me ? — user2753405, Dec 25 '17 at 05:14

score 0 · Answer 1 · answered Dec 25 '17 at 05:46

AJAX by default doesn't handle file uploads (atleast without some help).

You should use Dropzone.

Configure it so it doesn't auto process the queue autoProcessQueue: false

Look up the sending event in the docs. You can append your form values like so:

myDropzone.on("sending", function(file, xhr, formData) {
  formData.append("name", "somevalue");
  formData.append("name2", "somevalue2");
});

or see: Adding more data to Dropzone.js post

So generally:

Do your validation, if it passes...
Initialize the dropzone plugin and trigger a upload
Append the form values in the sending event
Print your success or error messages (dropzone errors can be triggered in the backend with a 400 header)

Good luck!

How to upload type file Using datatables codeigniter database

1 Answers1