How to access image files sent usingajax in django backend using
I'm having a problem with sending files from ajax to django.
I collect template form using new formData()
and append additional data to it, then i try to submit using ajax. On submission, i print out the submitted data in web console and i clearly see keys corresponding to dictionary containing the names of chosen images (images collected in form using input tag) and i also see other string data but when it reaches django end i print json.loads(request.body)
and i only see the string data while the keys that corresponded to images are now empty dictionaries . And also request.FILES is empty.
js code
function accept(formdata){
const data1=Object.fromEntries(formdata.entries());
console.log(data1);//prints all content and i see image names in it
$.ajax(
{type:'POST',
url:document.getElementById('url').getAttribute('data-url'),
data:JSON.stringify({"formdata":data1}),
headers:{
"X-Requested-With":"XMLHttpRequest",
"X-CSRFToken":getCookie("csrftoken"),
},
success:(data) =>{
console.log('data');
},
dataType:'json',
contentType:false,
processData:false
}
);
}
function set_table(event){
event.preventDefault();
const table = document.getElementById('tb');
const list=table.children;
console.log(list.length);
let arr=[];
for (let row =0; row<list.length;row++ ){
let rows=list[row];
if (rows.getAttribute('name') !='head'){
let data={
"agent":rows.querySelector('#personnel').value,
"number":rows.querySelector('#number').value ,
"work":rows.querySelector('#for').value
};
arr.push(JSON.stringify(data));
}
}
//console.log(event.target.data);
const formdata=new FormData(event.target);
formdata.append('tab',arr);
accept(formdata);
}
django views
def project_creation_page(request):
context={"cat":project_cat}
is_ajax = request.headers.get('X-Requested-With') == 'XMLHttpRequest'
if is_ajax:
print(34)
if request.method=='POST':
data=json.loads(request.body)
print(data)
for file ,files in request.FILES:
print(file, files.name)#nothing is printed
return render(request,"Projectscreation.html",context)
data printed in web console
{csrfmiddlewaretoken: 'g74kJdKBuemLDoIkkEzkZJ6T4b7EAAzBzMgaKn6qhcD224xHlyrhVJaYTGC552gy', title: 'all for one', cathegorie: 'Projet web', probleme: 'one for all', pb_image: File, …}
cathegorie
:
"Projet web"
csrfmiddlewaretoken
:
"g74kJdKBuemLDoIkkEzkZJ6T4b7EAAzBzMgaKn6qhcD224xHlyrhVJaYTGC552gy"
description
:
"bankai"
ds_image
:
File {name: '', lastModified: 1728416012252, lastModifiedDate: Tue Oct 08 2024 20:33:32 GMT+0100 (West Africa Standard Time), webkitRelativePath: '', size: 0, …}
pb_image
:
File {***name: '1718940148812.jpg'***, lastModified: 1718940577000, lastModifiedDate: Fri Jun 21 2024 04:29:37 GMT+0100 (West Africa Standard Time), webkitRelativePath: '', size: 10404, …}
probleme
:
"one for all"
services
:
"tensa zangetsu"
sv_image
:
File {name: '', lastModified: 1728416012253, lastModifiedDate: Tue Oct 08 2024 20:33:32 GMT+0100 (West Africa Standard Time), webkitRelativePath: '', size: 0, …}
tab
:
"{\"agent\":\"dfdsf\",\"number\":\"cv\",\"work\":\"csdvfds\"}"
title
:
"all for one"
pb_image contains an image you notice this line:
pb_image
:
File {***name: '1718940148812.jpg'***, lastModified: 1718940577000, lastModifiedDate: Fri Jun 21 2024 04:29:37 GMT+0100 (West Africa Standard Time), webkitRelativePath: '', size: 10404, …}
data printed in terminal. pb_image is now empty dictionary
{'formdata': {'csrfmiddlewaretoken': 'g74kJdKBuemLDoIkkEzkZJ6T4b7EAAzBzMgaKn6qhcD224xHlyrhVJaYTGC552gy', 'title': 'all for one', 'cathegorie': 'Projet web', 'probleme': 'one for all', 'pb_image': {}, 'description': 'bankai', 'ds_image': {}, 'services': 'tensa zangetsu', 'sv_image': {}, 'tab': '{"agent":"dfdsf","number":"cv","work":"csdvfds"}'}}
please any help will be really appreaciated. If you think any necessayry info is lacking please let me know so that i can add it