Asked  7 Months ago    Answers:  5   Viewed   42 times

I want to upload image on the server on change event of jQuery but using codeigniter csrf I am able to upload image only one time. How can I upload images using ajax for multiple requests.Please keep in mind when I set this

config['csrf_protection'] = FALSE;

then I am able to send multiple request jQuery onchange event but when csrf_protection is going to be false then I think there is no advantage of csrf. so the question is how can I send multiple requests using ajax while csrf_protection is enable. My jquery code is following

$("#avatar").change(function(){
    var link = $("#avatar").val();     
    $.ajax({
        url : "<?php echo base_url('main/test'); ?>",
        type: 'post',
        data: {'<?php echo $this->security->get_csrf_token_name(); ?>':'<?php echo $this->security->get_csrf_hash(); ?>',"id":"hello","link":link},            
        success : function(data)
        {   
            alert(data);
        }  
    });
});

 Answers

88

In my opinion you should try to recreate your csrf token each request

Try this code example...

For the js funcion

var csrfName = '<?php echo $this->security->get_csrf_token_name(); ?>',
    csrfHash = '<?php echo $this->security->get_csrf_hash(); ?>';
("#avatar").change(function(){
    var link = $("#avatar").val();

    var dataJson = { [csrfName]: csrfHash, id: "hello", link: link };

    $.ajax({
        url : "<?php echo base_url('main/test'); ?>",
        type: 'post',
        data: dataJson,            
        success : function(data)
        {   
            csrfName = data.csrfName;
            csrfHash = data.csrfHash;
            alert(data.message);
        }  
    });
});

and for the controller

public function test() { 
    $config['upload_path'] = './uploads/'; 
    $config['allowed_types'] = 'gif|jpg|png'; 
    $config['max_size'] = 500; 
    $config['max_width'] = 260; 
    $config['max_height'] = 260; 

    $reponse = array(
                'csrfName' => $this->security->get_csrf_token_name(),
                'csrfHash' => $this->security->get_csrf_hash()
                )

    $this->load->library('upload', $config); 
    if (!$this->upload->do_upload('link')) { 
        $reponse['message'] = "error"; 
    } 
    else { 
        $data = array('upload_data' => $this->upload->data()); 
        $image_name = $data['upload_data']['file_name']; 
        $reponse['message'] = $image_name; 
    } 

    echo json_encode($reponse);
}

Let me know and good luck

Note: When someone ask you for posting more data to the question, don't post it as a comment or answer, it's better to edit the question itself and adding the stuff

Wednesday, March 31, 2021
 
Lance
answered 7 Months ago
69

you are doing it wrong.

try this

    <input type="hidden" name="<?php echo $this->security->get_csrf_token_name(); ?>" value="<?php echo $this->security->get_csrf_hash();?>" />

the value must be what codeigniter calculates for the csrf token.

or use form helper and codeigniter will add this hidden field automatically.

Wednesday, March 31, 2021
 
shin
answered 7 Months ago
65

Add the CSRF token to your data option before posting:

 $.ajax({
    type: "POST",
    url: $this.attr("action"),
    data: {'<?php echo $this->security->get_csrf_token_name(); ?>':'<?php echo $this->security->get_csrf_hash(); ?>',/*....your data....*/},
    beforeSend: function() {
        mensaje.html('<p><img src="public/frontend/img/miniloader.gif"><span><small> Iniciando..</small></span></p>');
    }
})

The CSRF token needs to be sent with each request so it should be specified by the data. The echo statement does this. You can add this separately and serialize, but I've shown what you are missing.

Saturday, May 29, 2021
 
dmp
answered 5 Months ago
dmp
16

you need to send data option as object

try this

 .....
 url: "<?=base_url()?>.index.php/sms/get_dept_employee",
 data: {"id":id},
 dataType:"json",
 ....

and get the posted value as id in your controller..

$id=$this->input->post('id');
....
Saturday, May 29, 2021
 
shin
answered 5 Months ago
47

I found a solution to my problem by modifying the success function of the ajax post:

success: function(data) {
    $.each(data, function(i, data) {
        $('#type').append("<option value='" + data.id_type + "'>" + data.name + "</option>");
    });
}

Which append the value into the drop down.

<select name="type" id="type">
    <option value="">-- Select Type --</option>
</select>

I just gave the id of the select block into the success function of the ajax post and appended the value. It works but there is a problem which is when I change the selection of the first dropdown new value appears but the values which were showing for the previous selection doesn't go away.

Friday, August 13, 2021
 
Shibbir
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :