I'm trying to upload a file using AJAX. I tried to do it using formData() object as well. How can I add a file to following Ajax request?
$.ajax({
url: '/api/add_new_pair/',
method: "POST",
type: 'POST',
FILES: {
'image' : file,
},
data: {
'csrfmiddlewaretoken': csrftoken,
'text': text,
},
}).done(function(response){
console.log(response);
}
You can access the multipart(multimedia) data(header along with data in base64 format) in request.FILES and other data in request.POST
var data = new FormData();
data.append('csrfmiddlewaretoken', '{{csrf_token}}');
data.append('image', $('#image-id').files[0]);
$.ajax({
type: "POST",
url: "/save_design/",
contentType: false,
data: data,
async: true,
cache: false,
processData: false,
beforeSend: function() {
},
success: function(t) {
},
complete: function() {
},
error: function(t) {}
}),
}
Related
I try to create upload photos in my nodejs site.
I used this code to choose file and upload the image:
var fileData = null;
function loadFile() {
var preview = document.querySelector('file');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
fileData = file;
}
if (file) {
reader.readAsDataURL(file);
}
}
function uploadFile() {
data = new FormData();
data.append('file', fileData);
$.ajax({
url: "/post_pdf/",
type: "POST",
data: data,
enctype: 'multipart/form-data',
processData: false,
contentType: false,
success: function(data) {
document.getElementById("result").innerHTML = 'Result: Upload successful';
},
error: function(e) {
document.getElementById("result").innerHTML = 'Result: Error occurred: ' + e.message;
}
});
}
With loadfile funcion i choose my image, and with Uploadfile function i upload the image with ajax.
if i use it alone its work perfect and upload the image to the location.
but when i try to add this code to my code, it make alot of errors.
in my code i send to back end all the forms in the pug file:
$('#account-form').ajaxForm({
error : function(e){
if (e.responseText == 'title-empty'){
av.showInvalidTitle();
}
},
success : function(responseText, status, xhr, $form){
if (status == 'success')
{
$('.modal-alert').modal('show');
console.log(responseText)
}}
});
i try to merge the ajaxform with the ajax but when i merege the formdata or i send in ajaxform the data of the file is send error.
how can i merge the codes?
thanks for helping.
Try to submit form it will submit form with your image.
let form = $("#form_id");
$.ajax({
url : $(form).attr("action"),
type: "POST",
dataType: "json",
processData: false,
contentType: false,
cache: false,
data: new FormData(form[0]),
success:function(data){
},
error: function (xhr, status, e) {
}
});
#Yogesh Patel
when i use this code:
$('#account-form-btn2').on('click', function(e) {
let form = $("#account-form");
$.ajax({
url: $(form).attr("action"),
type: "POST",
dataType: "json",
processData: false,
contentType: false,
cache: false,
data: new FormData(form[0]),
error: function (e) {
if (e.responseText == 'title-empty') {
av.showInvalidTitle();
}
},
success: function (responseText, status, xhr, $form) {
if (status == 'success') {
$('.modal-alert').modal('show');
}
}
});
});
for some reason it sends the values to "routes" three times.
and it doesn't catch the erorrs or success.
and it sends me to a white window with the value of the callback.
if needed, i can send the function that gets the values and returns them (app.post).
After giving an update via ajax in jsgrid the line returns blank
controller: {
loadData: function(filter) {
var data = $.Deferred();
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: "/app/Play/",
dataType: "json"
}).done(function(response) {
data.resolve(response);
});
return data.promise();
},
updateItem: function(item) {
return $.ajax({
type: "POST",
url: "/app/Play/change.php",
data: item,
});
},
}
In the return of the url update: /app/Play/change.php
I return the updated record data in a normal json, same as the initial json used in the load
Resolved:
controller: {
loadData: function(filter) {
var data = $.Deferred();
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: "/app/Jogos/app/",
data: filter, // <--Insert line, this is a problem
dataType: "json"
}).done(function(response) {
data.resolve(response);
});
return data.promise();
},
updateItem: function(item) {
return $.ajax({
type: "POST",
url: "/app/Jogos/app/change.php",
data: item
});
},
},
I have this Ajax script where I pass a link to the data variable link, but I
get a 412 error.
$(function() {
$(".check-multi").change(function() {
$.ajax({
type: "POST",
url: "<?php echo site_url('adm/updateproperty'); ?>",
async: true,
data: {
link: $(this).data('link')
},
success: function(msg) {
alert('Success');
if (msg != 'success') {
alert('Fail');
}
}
});
});
});
I have tried
link: encodeURI($(this).data('link'))
And
link: encodeURIComponent($(this).data('link'))
as is suggested on other threads but I still get the 412 error message.
Hope this will help you :
you have added newline character to json data that is why you got error
Do like this :
var link = $(this).data('link');
data: {"link" : link},
/*----OR do this -----*/
data: {"link" : $(this).data('link')},
instead of this :
data: {
link: $(this).data('link')
},
Whole code should be like this :
var link = $(this).data('link');
/*console.log(link)*/
$.ajax({
type: "POST",
url: "<?php echo site_url('adm/updateproperty'); ?>",
async: true,
data: {"link" : link },
success: function(msg) {
alert('Success');
if (msg != 'success') {
alert('Fail');
}
}
});
For More :https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/412
Please change your code in data options. Use this way
data: {"id": ID},
i.e. store the value in a variable and send that variable in data option. If we assume
ID=$(this).data('link');`
Then the code will be as follows:
$(function() {
$(".check-multi").change(function() {
$.ajax({
type: "POST",
url: "<?php echo site_url('adm/updateproperty'); ?>",
async: true,
data: {"id":ID},
success: function(msg) {
alert('Success');
if (msg != 'success') {
alert('Fail');
}
}
});
});
});
Please check it.
With my code i get a internal Server error:
#using (Html.BeginForm("", "Manage", FormMethod.Post, new { role = "form"}))
{
#Html.AntiForgeryToken()
}
<script>
function Like(id) {
var requestData = {
profileId: id,
__RequestVerificationToken: $('[name=__RequestVerificationToken]').val(),
};
$.ajax({
url: '/Manage/Like',
type: 'POST',
data: JSON.stringify(requestData),
dataType: "json",
contentType: 'application/json; charset=utf-8',
error: function (xhr) { alert('Error: ' + xhr.statusText); },
success: function (result) {},
async: true,
processData: false
});
}
</script>
Controller:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Like(string profileId)
{ ... }
If i remove [ValidateAntiForgeryToken] everything works fine, but i lose the sercurity. How can i fix the internal server error?
I see in fiddler SyntaxView 2 requests:
/Manage/Like
{"profileId":13,"__RequestVerificationToken":"jH2ofYlcTiHl8lixW_ANEHOg5KgwRh5Xl43lQfGkDFh55jX-x5cmz4RfPtbDfu92oQsTM7zsop83ldfbxMdIIELYZ0kfByFcXjUp-5mwyKZcQzjXP2gy6qW0iQOtLsqaDjFSzoxnyqM2MD42CbItzw2"}
/Manage
__RequestVerificationToken=MNiKOJHZg7BGaTNccOjrR2Obf_nPhKfcwIPZVBUl53G368n5euzB4y1htH47VKg3V3mHfxkjYZDz6iPepQ7jpeXGARtlj6vV74B8zQbp4by9JR4Rcz4sHANm3WHb6WAXaLcsnFvWJth_8c98XKda5w2
Taking this from a sim. question here include antiforgerytoken in ajax post ASP.NET MVC
function Like(id) {
var form = $('form');
var token = $('input[name="__RequestVerificationToken"]', form).val();
$.ajax({
url: '/Manage/Like',
type: 'POST',
data: { __RequestVerificationToken: token, profileID: id },
error: function (xhr) { alert('Error: ' + xhr.statusText); },
success: function (result) {},
async: true,
processData: false
});
}
I am getting value through post method when i am add it into variable it is showing the same value but when i accessing the value from the outside. it showing me undefined.
var Trends =this.$elm.data('title.poshytip');
var value;
var path = window.location.pathname;
var name = path.substring(path.lastIndexOf('/') + 1);
var dataToSend='{ID:"'+Trends+'"}';
$.ajax({
type: "POST",
url: "UnitedStatesTrends.aspx/serverside",
data: dataToSend,
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function( data )
{
value = data.d;
},
error: function() {
alert('error');
}
})
//here
alert(value);
// here i am getting value=undefined in alert but my value is 'UnitedStates'
this.$inner.append(
typeof content == 'function' ?
content.call(this.$elm[0], function(newContent) {
self.update(newContent);
}) :
//here i am setting the value to tooltip
content == '[title]' ? value : content
);
Well I think, you are forgetting to put a semicolan ; after this
$.ajax({
type: "POST",
url: "UnitedStatesTrends.aspx/serverside",
data: dataToSend,
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function( data )
{
value = data.d;
},
error: function() {
alert('error');
}
});