naiveDeveloper naiveDeveloper - 3 months ago 45
Python Question

MultiValueDictKeyError for django image File upload

I have spent a LOT of time trying to resolve this- Read Django docs, consulted forms but not got anything satisfactory. So please be patient here with me.
I am trying to do an upload of an Image file here from my html template.
This is my html form

<form id="tryOnPageForm" method="POST" enctype="multipart/form-data" action="/dummy/{{frame.slug}}/">
{% csrf_token %}
<input type="file" name="uploadFromPC" id="uploadFromPC" class="myButton" title="Upload From PC" value= "Upload from PC" onchange="uploadPC()" style="float:left;">
<input type="submit" id="Submit" class="myButton" value= "Done" style="display:none"><br><br>

</form>


The file upload happens properly an d I am able to see the uploaded image file in the HTML.

In my
views.py
,

def upload_image(request, frameslug):

frame= VTryON.objects.get(slug=frameslug)
if request.method == 'POST':
form = ImageUploadForm(request.POST, request.FILES)
print "FILES", request.FILES
if form.is_multipart():
save_file(request.FILES['image'])
return HttpResponseRedirect('Successful')
else:
return HttpResponse('Invalid image')
else:
form = ImageUploadForm()
return render_to_response('dummy.html', {'form': form})


def save_file(file, path=''):
''' Little helper to save a file
'''
filename = file._get_name()
fd = open('%s/%s' % (MEDIA_ROOT, str(path) + str(filename)), 'wb')
for chunk in file.chunks():
fd.write(chunk)
fd.close()


and in my
forms.py
,

from django import forms
class ImageUploadForm(forms.Form):
image = forms.ImageField(label='Select a file', help_text='max. 20 megabytes')


When I run my code I get this error

MultiValueDictKeyError at /dummy/fr1234/


The print statement in my from my view.py shows this

FILES <MultiValueDict: {u'uploadFromPC': [<InMemoryUploadedFile: model4.jpg (image/jpeg)>]}>


and this is the traceback

Traceback:
File "C:\Python27\lib\site-packages\django\core\handlers\base.py" in get_response
112. response = wrapped_callback(request, *callback_args, **callback_kwargs)
File "D:\Work-Backup\LiClipse Workspace\vTryON_DJango_Integration\vTryON\views.py" in upload_image
189. save_file(request.FILES['image'])
File "C:\Python27\lib\site-packages\django\utils\datastructures.py" in __getitem__
301. raise MultiValueDictKeyError(repr(key))

Exception Type: MultiValueDictKeyError at /dummy/fr1234/
Exception Value: "'image'"


I am aware that the enctype should be
multipart/form-data
since I have read it in tutorials. ALso, i have not used any field in my models.py to store the uploaded image.Instead I want to directly save it to thr MEDIA_URL location.Might that be an issue?
Please help. This has held me up for a long time. Thanks in advance.

Answer Source

I was able to solve this(after spending a lot of time and with some help from my friends...)

I think the error

Exception Type: MultiValueDictKeyError at /dummy/fr1234/ Exception Value: "'image'"

was coming because request.FILES was unable to get the uploaded image from the user input, the reason being that the name of the user input file that I provided was wrong!!

It should have been request.FILES['uploadFromPC'] instead of request.FILES['image'] because that is the name that I had kept in my HTML.

<input type="file" name="uploadFromPC" id="uploadFromPC" class="myButton" title="Upload From PC" value= "Upload from PC" onchange="uploadPC()" style="float:left;">

That was a stupid error and a lot of time wasted to fix it.. :(

.. but ya, good learning.

I hope this helps somebody else who is trying to do something similar. Although, I would like it if somebody can explain to me the use of forms.py here. Is it possible to do an user upload without forms.py?