php - How to upload document and other JSON string using AJAX? ← (PHP, HTML)
I'd like to do some file upload with some JSON string to my controller. This is my current AJAX
var data_upload = new FormData();
$.each($(".uploads")[0].files, function(i, file) {
data_upload.append('input_upload_file['+i+']', file);
});
$.ajax({
url : url,
type : 'POST',
async : false,
enctype : 'multipart/form-data',
dataType : 'JSON',
data : { upload_data : data_upload ,
json_string1 : $('#myjson_string1').val(),
json_string2 : $('#myjson_string2').val(),
'<?php echo $this->security->get_csrf_token_name(); ?>' : csrfHash
}
})
.done(function(data){
alert("Success");
})
.fail(function(jqXHR, textStatus, errorThrown){
alert("Fail");
});
This is my HTML form (simplified):
<body>
<form id="uploadMe">
<label class="fileContainer">
<input type="text" class="form-control" name="myName" />
<input type="text" class="form-control" name="myAge" />
<input type="file" class="uploads" name="input_upload_file[]" multiple />
<input type="file" class="uploads" name="input_upload_file[]" multiple />
<input type="text" class="json_string" id="myjson_string1" name="json_string1" />
<input type="text" class="json_string" id="myjson_string2" name="json_string2" />
</label>
</form>
<button type="button" onclick="uploadFile()">Upload</button>
<?php
$token_name = $this->security->get_csrf_token_name();
$token_hash = $this->security->get_csrf_hash();
echo "<input type='hidden' id='csrf_name' name='".$token_name."' value='".$token_name."' />";
echo "<input type='hidden' id='csrf_hash' name='".$token_hash."' value='".$token_hash."' />";
?>
</body>
I also need to send the CSRF token with my AJAX upload. Currently, it's not working at all. Any help is greatly appreciated.
Answer
Solution:
Answer taken from here Link
You can use the FormData
const form = new FormData()
form.append('upload_data',$('#myjson_string1').val())
form.append('csrfHash','csrfHash_here')
$.ajax({
url : url,
type : 'POST',
async : false,
enctype : 'multipart/form-data',
dataType : 'JSON',
data : {
upload_data : data_upload ,
json_string1 : $('#myjson_string1').val(),
json_string2 : $('#myjson_string2').val(),
'<?php echo $this->security->get_csrf_token_name(); ?>' : csrfHash
}
})
.done(function(data){
alert("Success");
})
.fail(function(jqXHR, textStatus, errorThrown){
alert("Fail");
});
Add properties to ajax
processData: false,
contentType: false,