Myujth

I know the topics aren't missing on this subject that's why I looked into a huge amount of posts about this topic and couldn't find something that'd satisfy me, so I'm trying to build it by myself.

All I want to do is to upload a file using Ajax with Django to avoid page refresh.

Here's what I did :

basic_upload.html :

<form method="post" id="creationOptionsForm" enctype="multipart/form-data">
% csrf_token %

<div>
 form.name.errors 
 form.name 
</div>

<div>
 form.email.errors 
 form.email 
</div>

<div>
 form.logo.errors 
 form.logo 
</div>

<input type="submit" value="submit">
</form>

Ajax.js :

$(document).on('submit', '#creationOptionsForm', function(e)
 e.preventDefault();

 var form_data = new FormData();
 form_data.append('file', $('#creationOptionsForm').get(0).files);

 $.ajax(
 type:'POST',
 url:'/designer/results/',
 processData: false,
 contentType: false,
 data:
 organisation:$('#id_organisation').val(),
 email:$('#id_email').val(),
 logo:form_data,
 csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
 ,
 );
);

Views.py :

def creationResult(request):
 if request.method == 'POST':
 form = UserInfos(request.POST, request.FILES)
 if form.is_valid():
 photo = form.save()
 ...
...

(forms.py & urls.py are correctly configured, it is not necessary to include them).

I guess there's an issue with the way I do on the ajax.js since on debug (pdb) request.POST return every datas except logo.

What am I doing incorectly ?

The below method works for me, it will submit all form value as serialize(). You will get all form input's inside request.POST and logo request.FILES

Try this:

$(document).on('submit', '#creationOptionsForm', function(e)
 e.preventDefault();

 var form_data = new FormData($('#creationOptionsForm')[0]);
 $.ajax(
 type:'POST',
 url:'/designer/results/',
 processData: false,
 contentType: false,
 async: false,
 cache: false,
 data : form_data,
 success: function(response)

 
 );
);

Update:

basically async:false will do ajax request and stop executing further js code till the time request get complete, because upload file might take some time to upload to server.

While cache will force browser to not cache uploaded data to get updated data in ajax request

Official Documentation here