Croppie Working on Localhost, but not on live shared hosting

104 Views Asked by At

I got a problem with no error message. I don't know why this happen. My code working 100% on localhost. But when I upload the code to live shared hosting, there is nothing happen after uploading process. I am using codeigniter 3. This is my html code:

                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <form method="post" enctype="multipart/form-data">
                                <div class="modal-header bg-dark">
                                    <h5 class="modal-title">Edit Gambar Profil</h5>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>
                                <div class="modal-body text-center">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="alert alert-warning">
                                                Sebelum melanjutkan, pastikan Foto Profil yang Anda upload sudah tepat. Hanya berkas <b>JPG</b> dan <b>PNG</b> yang diperbolehkan. Maksimal ukuran berkas <b>2 MB</b>.
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <input type="file" class="form-control-uniform-custom" name="gambar" accept="image/*" id="upload" required>
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <center>
                                            <div id="upload-demo" style="width:350px"></div>
                                            <div id="upload-demo-i"></div>
                                            </center>
                                        </div>
                                    </div>
                                    
                                    
                                </div>

                                <div class="modal-footer" id="upload_footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button class="btn bg-dark upload-result"><i class="icon-check pr-2"></i> Set Gambar Profil</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

And this is my javascript code:

<script>
        $("#upload-demo").hide();
        $("#upload_footer").hide();
        
        //Mulai crop Image
        $uploadCrop = $('#upload-demo').croppie({
            enableExif: true,
            viewport: {
                width: 320,
                height: 320,
                //type: 'circle'
            },
            boundary: {
                width: 350,
                height: 350
            }
        });

        $('#upload').on('change', function () {
            $("#upload-demo").show();
            $("#upload_footer").show();
            var reader = new FileReader();
            reader.onload = function (e) {
                $uploadCrop.croppie('bind', {
                    url: e.target.result
                }).then(function(){
                    console.log('jQuery bind complete');
                });
            }
            reader.readAsDataURL(this.files[0]);
        });

        $('.upload-result').on('click', function (ev) {
            $uploadCrop.croppie('result', {
                type: 'canvas',
                size: 'viewport'
            }).then(function (resp) {
                $.ajax({
                    url: "<?php echo base_url('profil/postfotoprofil');?>",
                    type: "POST",
                    data: {"image":resp, "no_register" : "<?php echo sesuser('no_register');?>"},
                    success: function (data) {
                        console.log(data);
                        html = '<img src="' + resp + '" />';
                        $("#upload-demo-i").html(html);
                    }
                });
            });
        });
        //Akhir Crop image
    </script>

And this is my post ajax url controller:

public function postfotoprofil()
    {
        header("Access-Control-Allow-Headers: Authorization, Content-Type");
        header("Access-Control-Allow-Origin: *");
        $post = $this->input->post();
        $data = $post['image'];
        list($type, $data) = explode(';', $data);
        list(, $data)      = explode(',', $data);
        $data = base64_decode($data);
        $imageName = $post['no_register'].'.png';
        unlink('sekolah_berkas/user/'.$imageName);
        if(file_put_contents('sekolah_berkas/user/'.$imageName, $data)){
            $post_data      = array(
                "gambar"        => $imageName
            );
            $hajar  = $this->db->update("pengguna", $post_data, array("no_register" => $post['no_register']));
            if($hajar){
                $this->session->set_flashdata('pesen', '<script>sukses("proses");</script>');
            }else{
                $this->session->set_flashdata('pesen', '<script>gagal("proses");</script>');
            }
        }else{
            $this->session->set_flashdata('pesen', '<script>gagal("proses");</script>');
        }
        redirect(base_url("profil"));
    }

Anyone knows about this, please help.

Problem Solved

Alright guys... thank you very much for reply to my thread. The problem is only on the submit button. I change my code from :

<button class="btn bg-dark upload-result"><i class="icon-check pr-2"></i> Set Gambar Profil</button>

become like this :

<a class="btn bg-dark upload-result"><i class="icon-check pr-2"></i> Set Gambar Profil</a>

and the problem solved. With (button) syntax you will submit immediately to server. Therefore you don't have much time while submitting. Then I change it to syntax (a) and really solved my problem. Look like small problem, with no error message you will get headache.

0

There are 0 best solutions below