I have tried to send csrf token codeigniter with dropzone, but it gives the error 'The action you have requested is not allowed'. can you help me for fix send csrf token, thanks
Dropzone.autoDiscover = false;
var img= '<?= $min_images?>';
var myDropzone = new Dropzone("#my-dropzone", {
url: "<?= base_url("agribisnis/do_upload") ?>",
acceptedFiles: "image/jpeg,image/jpg,image/png",
maxFilesize: 0.5,
maxFiles:img,
uploadMultiple: false
}
);
myDropzone.on('sending', function(file, xhr, formData) {
/* ini kalo pakai csrf di codeigniter */
formData.append("<?php echo $this->security->get_csrf_token_name(); ?>","<?php echo $this->security->get_csrf_hash(); ?>");
});
Related
In Header.php
<script type="text/javascript">
var CFG = {
url: '<?php echo $this->config->item('base_url');?>',
token: '<?php echo $this->security->get_csrf_hash();?>'
};
$.ajaxSetup({
beforeSend:function(jqXHR, Obj){
Obj.data += '&token='+CFG.token;
}
});
</script>
In Controller
function get_master_law_tree_details(){
$csrf = $this->security->get_csrf_hash();
log_message('debug','entity.get_master_law_tree_details - Starting');
if($this->input->is_ajax_request()){
header("Content-type: application/json; charset=utf-8");
$this->tree_date = $this->ltm->get_master_law_tree_details($this->security->xss_clean($_POST));
echo json_encode(array("data" => $this->tree_date,'token'=> $csrf));
}
log_message('debug','entity.get_master_law_tree_details - Ending');
}
I have set token in header.php file which automatically add token in ajax call.
I am submitting a form using ajax with enabling CSRF protection to true in config.php. First time, the form is submitting well but second time it's showing error "Forbidden. The Action you requested is not allowed. 403". How can I securely submit form using ajax by enabling CSRF protection to true.
Below is the ajax function I am using.
$('#loginfrmbtn').on('click', function(){
$(this).prop('disabled', true);
var formdata=$('#loginfrm').serialize();
$.ajax({
type: 'POST',
data: formdata,
url: '<?php echo base_url('logincheck');?>',
dataType: 'json',
success: function(res){
$('#loginfrmbtn').prop('disabled', false);
console.log(res);
}, error: function(jqXHR){
console.log(jqXHR);
}
})
})
Try to use the headers option of the jQuery ajax function (https://api.jquery.com/jquery.ajax/) to send the csrf token within each request like so:
$.ajax({
...
headers:{
'X-CSRF-TOKEN': $( 'input[id="csrf_tsecurity"]' ).val(),
},
...
});
And the following codeigniter config:
public $CSRFTokenName = 'csrf_tsecurity';
public $CSRFHeaderName = 'X-CSRF-TOKEN';
public $CSRFRegenerate = false;
This is my blade code:
<script>
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(document).ready(function(){
$(window).load(function(){
var topic_id = $("#topic").text();
var post = $("#post").text();
var url_id = "/posts/"+post+"/readStatus";
$("#topic").hide();
var users_id = $("#user").text();
$("#user").hide();
$.ajax({
async:true,
method:"post",
url:url_id,
topic_id:topic_id,
users_id:users_id,
processData: false,
contentType: false,
success:function(response){
console.log(response);
$("#message").html(response);
}
},"json");
});
});
Route::post('/posts/{post_id}/readStatus',function(){
if(Request::ajax()){
//In routes.php
$post = App\Post::find($post_id);
if(auth()->guest())
return "Not user Not read";
else{
$user = App\User::find(auth()->user()->id);
$post->attach($user);
return "Read";
}
//return Response::json(Request::all());
}
});
I get an 500 Internal server error .I found that $post_id in url doesn't hold any value inside.If I give any constant value in $post_id like 1,2... I get the answer.I don't want to use forms to achieve.I gave an ajax call as page loads.
You have to define $post_idas your function argument.
Route::post('/posts/{post_id}/readStatus',function($post_id){
...
});
I read this: https://github.com/enyo/dropzone/wiki/Set-URL-dynamically but i dont got success... :(
I have 1 form...
And i send the inputs with ajax.
The ajax returns the new id of user. in this moment i want to change de url dropzone for to set path to id of the new user.
$.ajax({
type: "POST",
url: "class/inserir.php?funcao=teste",
data: formdata,
dataType: "json",
success: function(json){
if(json.sucesso=="sim"){
alert("Wait! Sending Pictures.");
this.options.url = "class/upload_img.php?"+json.id;
myDropzone.processQueue();
}else{
location.href="home.php?ir=cad_animal&cad=nao&erro="+json.erro;
}
}
});
var myDropzone = new Dropzone("#imagens", {
url: "class/upload_imgteste.php",
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 1, // MB
addRemoveLinks : true,
dictResponseError: "Não foi possível enviar o arquivo!",
autoProcessQueue: false,
thumbnailWidth: 138,
thumbnailHeight: 120,
});
sorry for my bad english!
Thanks for all.
You may add a function on dropzone's "processing" event listener.
Dropzone.options.myDropzone = {
init: function() {
this.on("processing", function(file) {
this.options.url = "/some-other-url";
});
}
};
Here is the link where I got the code and it works for me: https://github.com/enyo/dropzone/wiki/Set-URL-dynamically
change this
this.options.url = "class/upload_img.php?"+json.id;
to this
myDropzone.options.url = "class/upload_img.php?"+json.id;
Does that work?
New answer for an old question only because I found this answer and the link to the dropzone wiki and didn't like it. Modifying the options of the plugin multiple times like that seems very wrong.
When dropzone uses some options it runs it through a resolveOption function passing in a files array. In the current branch you can define a function for the options: method, url and timeout.
Here's a complete working example including delaying for the ajax:
Dropzone.autoDiscover = false;
const doStuffAsync = (file, done) => {
fetch('https://httpbin.org/get').then((response) => {
file.dynamicUploadUrl = `https://This-URL-will-be-different-for-every-file${Math.random()}`
done();//call the dropzone done
})
}
const getMeSomeUrl = (files) => {
return `${files[0].dynamicUploadUrl}?sugar&spice`;
}
let myDropzone = new Dropzone("#my-awesome-dropzone", {
method: "put",
accept: doStuffAsync,
url: getMeSomeUrl
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css">
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone">
</form>
If you need to change the URL dropzone posts to dynamically for each file, you can use the processingfile event and change the options.url.
<form id="my-dropzone" action="/some-url" class="dropzone"></form>
<script>
Dropzone.options.myDropzone = {
init: function() {
this.on("processing", function(file) {
this.options.url = "/some-other-url";
});
}
};
</script>
Another way that worked for me (accept event callback):
$('div#dropzone').dropzone({
options...,
accept: function (file, done) {
this.options.url = 'the url you want';
}
});
BlueWater86's answer didn't work for me. But I agree that changing myDropzone.options.url each time is bad practice, and it actually doesn't work if you are dragging a lot of files into the uploader at the same time.
I wrote the following code and it works well for uploading one file at time and for many at a time. I'm using Backblaze B2 but it should also work for S3.
myDropzone.on('addedfile', function(file) {
options = {
filename: file.name,
type: file.type,
_: Date.now()
};
// Make the request for the presigned Backblaze B2 information, then attach it
$.ajax({
url: '/presign_b2',
data: options,
type: 'GET',
success: function(response){
file.dynamicUrl = response['url'];
myDropzone.enqueueFile(file);
}
});
});
myDropzone.on('sending', function(file, xhr) {
xhr.open("PUT", file.dynamicUrl); // update the URL of the request here
var _send = xhr.send;
xhr.send = function() {
_send.call(xhr, file);
}
});
I need to upload image with ajax call. But POST field with image always is empty. Part of my form:
<div class="col-lg-6">
<?php echo CHtml::activeFileField($model, 'logo'); ?>
<?php echo CHtml::textField('test', 'test'); ?>
<?php echo CHtml::submitButton('Upload'); ?>
<?php echo CHtml::ajaxSubmitButton('Upload ajax', '#');?>
</div>
If i click submitButton, then i have both test and logo fields - image uploaded.
And if i click ajaxSubmitButton, then i have only test field, logo is empty. What is the solution?
PS: i need non-extension solution.
You cannot upload files with ajaxSubmitButton by default. Use simple submit or some uploader.
If you want to upload image via ajax, here's example:
<?php echo CHtml::link('Upload ajax', '#', array("onclick"=>"js:upload_file(this)"));?>
In your js:
function upload_file(){
var fd = new FormData();
var e = document.getElementById("Model_logo");
fd.append( "Model[logo]", $(e)[0].files[0]);
$.ajax({
url: 'upload',
type: 'POST',
cache: false,
data: fd,
processData: false,
contentType: false,
success: function (data) {
},
error: function () {
alert("ERROR in upload");
}
});
}
Change Model to your model name and this will work. Also now you can append any data to FormData and it will be passed in $_POST and your file in $_FILES.
Be carefull, this way doesn't work on ie7 and ie8 as i remember.
Based on ineersa's answer, I made some improvements:
<?php echo CHtml::link('Upload ajax', '#', array("onclick"=>"upload_file()")); ?>
In your js:
function upload_file(){
var fd = new FormData($('#model-form')[0]);
$.ajax({
url: 'upload',
type: 'POST',
cache: false,
data: fd,
processData: false,
contentType: false,
success: function (data) {
},
error: function () {
alert("ERROR in upload");
}
});
}
This way you don't have to append each form field manually. All form data will be read automatically (including files). Just make sure that #model-form is changed according to your form id.
A way you don't need to call $.ajax(...) by yourself.
$(document).on('ajaxBeforeSend', 'form.my-form', function (event, jqXHR, settings) {
if ((settings.url.indexOf("js_skip") == -1) && $("form.my-form input[type=file]")[0].files.length) {
jqXHR.abort();
settings.cache = false;
settings.contentType = false;
settings.processData = false;
settings.data = new FormData(this);
settings.url = settings.url + "&js_skip=1";
jqXHR = $.ajax(settings);
}
});