CodeIgniter AJAX file not uploading

Question

My form in view is

<?php 
      $attributes = array('id' => 'myForm');
      echo form_open_multipart('', $attributes); ?>

    <div class="form-group">
        <label for="image">Main Image</label>
        <input type="file" class="form-control-file" id="image" name="image" aria-describedby="fileHelp">
    </div>

    <div style="text-align:center">
        <button type="button" class="btn btn-primary" id="add">ADD</button>
        <button type="reset" class="btn btn-primary">Reset</button>
    </div>
<?php echo form_close(); ?>

And my script is as follows

<script>

    $("#add").click(function () {

        var image = $("#image").val() ;

        $.ajax({
            type: "POST",
            url: "<?php echo site_url('form/addArticleData'); ?>",
            data: { 

                image: image,

            },
            dataType: "html",
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                if(data) {
                    alert($.trim(data));
                    $("#myForm")[0].reset();
                } else {
                    alert("Some Error Occurred. Please Try Again!!!");
                }
            }, error: function() {
                alert("ERROR!");
            }
        });
    });
</script>

And my addArticleData function inside the controller form contains

if(isset($_FILES["image"]["name"]))  
    { 
        $config = array(
            'upload_path' => "images",
            'allowed_types' => "*",
            'overwrite' => TRUE,
            'max_size' => "2048000", // Can be set to particular file size , here it is 2 MB(2048 Kb)
            'max_height' => "768",
            'max_width' => "1024"
        );
        $this->load->library('upload', $config);
        if($this->upload->do_upload('image'))
        {
            $data = array(

                'image' => $this->input->post('image')

            );
            //print_r($data);
            if($this->modal->insert($data, 'admin')) {
                echo "DATA INSERTED SUCCESSFULLY";
            }
        }
        else {
            echo "ERROR";
        }
    } else {
        echo "FILE NOT SET";
    }

The problem is that whenever I tried to execute this script it alerts FILE NOT SET. And if I print $_FILES using print_r($_FILES);exit; it alerts an empty array.

Further if I try commented print_r($data);exit; and remove all the lines preceding it then it alerts the name of the image uploaded as C:\fakepath\image.png

I just can't understand why this is not working. Please HELP

is datatype and URL are ok ?? Check that alert or console.log is coming in function or not .... and if it is image coming from that JQuery than dataType cannot be HTML — Rush.2707, Jul 12 '17 at 14:46
To perform uploads with AJAX you need to use [`formData()`](https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData) — Jay Blanchard, Jul 12 '17 at 14:47
A file `` value does not contain the file....just the name string. — charlietfl, Jul 12 '17 at 14:47

score 3 · Answer 1 · answered Jul 12 '17 at 14:47

3

.val() is only going to give you the filename not the actual file.
To upload the file you need to use a FormData object and add the file to it

$("#add").click(function () {

    var image = $("#image").prop('files')[0] ;
    var data = new FormData();
    data.append('image', image);
    $.ajax({
        type: "POST",
        url: "<?php echo site_url('form/addArticleData'); ?>",
        data: data,
        dataType: "html",
        contentType: false,
        cache: false,
        processData: false,
        success: function(data) {
            if(data) {
                alert($.trim(data));
                $("#myForm")[0].reset();
            } else {
                alert("Some Error Occurred. Please Try Again!!!");
            }
        }, error: function() {
            alert("ERROR!");
        }
    });
});

answered Jul 12 '17 at 14:47

Musa

96,336
17
118
137

This is right answer but still i would doubt on the "dataType: "html",". I think this should change – Rush.2707 Jul 12 '17 at 14:49
@Rush.2707 well the code shows that the response is text, which is fine for html. – Musa Jul 12 '17 at 14:51
Still the same error – pokemon Jul 12 '17 at 14:58
Actually I have several field and I am appending all as `var data = new FormData(); data.append('id or name',value); data.append('id or name', value); data.append('id or name', value); data.append('id or name', value); data.append('id or name', value); data.append('image', image); data.append('id or name', value);` – pokemon Jul 12 '17 at 15:00
Please HELP , I can't figure it out – pokemon Jul 12 '17 at 15:23
So `print_r($_FILES);` still gives you an empty array? What does `print_r($_POST);` give you? – Musa Jul 12 '17 at 17:47

CodeIgniter AJAX file not uploading

1 Answers1