CODEWITHSUNDEEP
phpajaxcodeigniterimage-upload
Nehal Abubakar
Nehal Abubakar

Reputation: 31

Cannot upload image using AJAX Codeigniter

I'm trying to upload image to phpmyadmin database and have select BLOB type for image storage in database, I'm trying to upload image using jQuery but the issue is that my new FormData(this) is not any values in the form and due to that after going in the controller function if doesn't goes in if condition and moves towards else and returns the response as some error has occurred.

I have tried many different ways to pass the data but none of them is working:

My View

<!DOCTYPE html>
<html>
<head>
    <title><?php echo $title; ?></title>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/bootstrap/css/bootstrap-grid.min.css">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/bootstrap/css/bootstrap-reboot.min.css">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/bootstrap/css/bootstrap.min.css">
    <script src="https://use.fontawesome.com/e26d097cd9.js"></script>

</head>
<body>
    <div class="container">
        <br><br><br>
        <h3 class="text-center">Uploading Image Using AJAX</h3>
        <div id="message"></div>
        <form method="POST" id="upload_image" enctype="multipart/form-data">
            <input type="file" name="imageFile" id="image_file">
            <br><br>
            <button type="submit" class="btn btn-info" name="upload" id="upload">Upload </button>
        </form>
        <div class="uploaded_image">

        </div>
    </div>

    <!-- <script type="text/javascript" src="<?php echo base_url(); ?>assets/bootstrap/js/jquery.js"></script> -->
    <script type="text/javascript" src="<?php echo base_url(); ?>assets/bootstrap/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>assets/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>assets/bootstrap/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $('#upload_image').submit(function(e){
        // $('#upload_image').on('submit', function(e){
            e.preventDefault();
            // var formData = $('#uploaded_image').serialize();
            // alert(formData);
            if($('#image_file').val() == ''){
                alert('Please Attach a File');
            }
            else{
                // alert("Hello");
                $.ajax({
                    url: "<?php echo base_url(); ?>main/ajax_upload",
                    type: "POST",
                    // data:new FormData(this),
                    data: new FormData($('#upload_image')[0]),
                    // data: {
                    //  fileName: $("input[name='imageFile']").val().split("\\").pop(),
                    //  // file: $("input[name='imageFile']").val()
                    // },
                    // data: new FormData($('#upload_image')[0]),
                    contentType: false,
                    cache: false,
                    processType: false,
                    dataType: 'JSON',
                    beforeSend: function(){
                        $('#upload').append('<i class="fa fa-spinner fa-spin"></i>');
                    },
                    success: function(data){
                        $('#upload .fa-spinner').remove();
                        $('#uploaded_image').html(data);

                        $('#message').html(data.message);
                    }
                });
            }
        });
    </script>
</body>
</html>

My Controller

public function ajax_upload(){
        // echo "<script>alert('hello')</script>";
        if(isset($_FILES['image_file']["name"])){
        // if(isset($_FILES['imageFile'])){
            $config['upload_path'] = './upload/'; 
            $config['allowed_types'] = 'jpg|jpeg|png|gif';

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

            if(!$this->upload->do_upload('imageFile')){
                // echo $this->upload->display_errors();
                $error['message'] = $this->upload->display_errors();
                echo json_encode($error);
            }
            else{
                $data = $this->upload->data();
                // echo "<img src=" . base_url() . "upload/" . $data["file_name"] . ">";
                echo '<img src="'.base_url().'upload/'.$data["file_name"].'">';
            }
        }
        else{
            $error['message'] = "An Error Occured";
            echo json_encode($error);
        }
    }

Upvotes: 0

Views: 194

Answers (2)

Hasta Dhana
Hasta Dhana

Reputation: 4719

On your ajax config, you should set the processData to false to prevent the data values getting converted to a query string : 

                    processData: false,

Upvotes: 1

Rotimi
Rotimi

Reputation: 4825

In your data variable, you are referencing the wrong form ID.

It should be 

data: new FormData($('#upload_image')[0]),

Upvotes: 1

Related Questions