AttributeError: 'NoneType' object has no attribute 'decode' when sending a form through JS

Question

I'm trying to send some data through a form using JavaScript Fetch to a Django view, including an image. I keep getting this error message nine times as if no data was sent to the back end:

My view is as follows:

if "contributors" in data: try: Project.objects.get(title=data['title']) return JsonResponse({'error': 'Project title already exists!'}, status=406) except Project.DoesNotExist: form = ProjectForm(request.POST, request.FILES) project = Project.objects.create( title=data['title'], description=data['description'], logo=data['logo']) return JsonResponse({"message": "Project successfully created!"}, status=201)

and my JavaScript:

 const projectName = document.getElementById("project_name"); const contributors = document.getElementById("id_contributors"); const description = document.getElementById("id_description"); const logo = document.getElementById("id_logo"); const projectCsrf = document.getElementsByName("csrfmiddlewaretoken")[0]; document.getElementById("submitProjectForm").addEventListener("click", () => { let formData = { title: projectName.value, contributors: contributors.value, description: description.value, logo: logo.files[0], }; submitForm(projectCsrf, formData); }); function submitForm(csrf, fields) { const request = new Request(window.location.origin, { headers: { "X-CSRFToken": csrf.value, "Content-Type": "multipart/form-data", }, }); fetch(request, { method: "POST", body: JSON.stringify(fields), }) .then((response) => response.json()) .then((result) => alert(result.message ? result.message : result.error)) .catch((err) => console.log(err)); }

is it maybe due to python's Json.loads method not being able to decode the JavaScript File object? Thanks in advance!

Richard Quigley · Accepted Answer · 2021-05-25 17:12:58Z

So after hours of debugging I managed to figure it out. Ali javanmardi was partially right in that i should not have been converting the data to JSON because I was sending files.

The main issue for this error was in my headers in my fetch function:

"Content-Type": "multipart/form-data",

This appeared to be causing the main issue, when I changed this to:

"X-Requested-With": "XMLHttpRequest"

it worked.

I also converted all of the data collected from the form into FormData, rather than creating my own object:

let formData = new FormData(); formData.append("logo", logo.files[0]); formData.append("title", projectName.value); formData.append("contributors", contributors.value); formData.append("description", description.value);

On the back end in my view, I should have been saving the form instance instead of creating a new Project object:

new_form = ProjectForm(request.POST, request.FILES) if new_form.is_valid(): new_form.save()

Now I can upload images fine.

Ali javanmardi · Accepted Answer · 2021-05-25 13:32:29Z

As you are including an image in your data and your data is a formdata why you are converting it to a string:

fetch(request, { method: "POST", body: JSON.stringify(fields), })

I think you should add formdata itself to body of fetch api

fetch(request, { method: "POST", body: fields, })

Collectives™ on Stack Overflow

AttributeError: 'NoneType' object has no attribute 'decode' when sending a form through JS

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related