0

I have a form in which I am taking file input that is image, then I send data to my controller with a ajax call but my controller is not getting any file. It is showing me the error {"error":"

You did not select a file to upload.</p>"} My Form

<form action="#" id="formParking" enctype="multipart-form-data">
    <div class="input-group">
      <div class="col-xs-12 col-sm-4  no_padding">
        <label class="">Attachment</label>
      </div>
      <div class="col-xs-12 col-sm-8">
        <div class="col-xs-12 no_space"><input type="file" id="images" name="images" multiple="multiple" /></div>
      </div>
    </div>
    <div class="input-group">
      <div class="col-xs-12 col-sm-4 no_padding"> </div>
      <div class="col-xs-12 col-sm-8"> <a class="btn blue green text-center" id="btnSave" onclick="saveParking()" >Add</a> </div>
    </div>
</form>

Ajax Call

function saveParking()
{
    var url;
    url = "link_to_controller_function";
    $.ajax({
        url : url,
        type: "POST",
        data: $('#formParking').serialize(),
        dataType: "JSON",
        success: function(data)
        {
            if(data.status) //if success close modal and reload ajax table
            {
                location.reload();
            }
        },
        error: function (jqXHR, textStatus, errorThrown)
        {
            alert('Error adding / update data');
        }
    });
}

My Controller

$config['upload_path']          = base_url().'uploads';
$config['allowed_types']        = 'gif|jpg|png';
$config['max_size']             = 100;
$config['max_width']            = 11111;
$config['max_height']           = 76118;

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

if (!$this->upload->do_upload('images'))
{
        $error = array('error' => $this->upload->display_errors());

        echo json_encode($error);
}
else
{
        $data = array('upload_data' => $this->upload->data());

        echo json_encode($data);
}
Usama Iftikhar
  • 183
  • 2
  • 14

4 Answers4

1

Addd processData and contentType in your ajax to deal with form when you are posting it using ajax

$.ajax({
    url : url,
    type: "POST",
    data: $('#formParking').serialize(),
    dataType: "JSON",
    processData: false,
    contentType: false,
    success: function(data)
    {
        if(data.status) //if success close modal and reload ajax table
        {
            location.reload();
        }
    },
    error: function (jqXHR, textStatus, errorThrown)
    {
        alert('Error adding / update data');
    }
});

also add this attribute enctype="multipart/form-data" to your form tag as

<form action="#" id="formParking" enctype="multipart/form-data">
RAUSHAN KUMAR
  • 5,846
  • 4
  • 34
  • 70
1

correct this

enctype="multipart/form-data"

1

it seems there is the problem with your ajax code, please use FormData instead of serialize for file upload.

Example:

$("#uploadForm").on('submit',(function(e) {
e.preventDefault();
$.ajax({
    url: "upload.php",
    type: "POST",
    data:  new FormData(this),
    contentType: false,
    cache: false,
    processData:false,
    success: function(data){
    $("#gallery").html(data);
    },
    error: function(){}             
});
}));

For more info See: http://phppot.com/jquery/php-ajax-multiple-image-upload-using-jquery/

Naveen Pal
  • 64
  • 5
  • now its giving me error "The upload path does not appear to be valid." – Usama Iftikhar Jan 10 '18 at 12:59
  • you need to change "data:new FormData(this)" and set remain url as it was in your code. Actuly it may not submitting the image/file on form submit by serialise method. – Naveen Pal Jan 11 '18 at 07:04
1

the ajax submission

$("#ID").submit(function(e){
e.preventDefault();
var formData = new FormData(this);
jQuery.ajax({
    url : $(this).attr('action') or url,
    type : $(this).attr('method') or method,
    data : formData,
    success:function(response){
        //do whatever you want
    },
    cache: false,
    contentType: false,
    processData: false
});

});

Your Have to change

$config['upload_path'] = base_url().'uploads';

to

$config['upload_path'] = './uploads/';

on base_url().'uploads' you are pointing the path to a website.

and of course you have to create uploads directory In root.

Arif Sajal
  • 123
  • 2
  • 9