Django : Files not passed in the request even after setting enctype=multipart/form-data?

Question

I have a form which is dynamically generated. Input types can range from file, text and a table(using summer note). When I try to pass this form data to my Django view handler the file data is not received.

request.FILES is empty.

This is my Javascript function making an Ajax call -

function saveTagInputs() {
  //   debugger;
  formData.append(getTagName[getTagId], $("#" + getTagId).get(0).files[0]);
  formData.append("tagdict", JSON.stringify(tagDict));
  formData.append("tagnames", JSON.stringify(getTagName));
  formData.append("tempid", tempData.selectedTemp);

  var $thisURL = window.location.href;
  if ($thisURL.charAt($thisURL.length - 1) == "#") {
    // alert("");
    $thisURL = $thisURL.substring(0, $thisURL.length - 1);
  }

  for (var pair of formData.entries()) {
    console.log(pair[0] + ", " + pair[1]);
  }
  //ajax call passing template id's and taginput dictionary containing tag id and it's value
  $.ajax({
    url: $thisURL + "savetaginput/",
    type: "POST",
    data: formData,
    cache: false,
    processData: false,
    contentType: false,
    success: function(data) {
      console.log("Tags saved successfully !");
    }
  });
  debugger;
}

When I log this data in console this is shown for the file input field-

profile_image, [object File]

where profile_image = name of the input field and object file is the file...

now when I pass this ajax call to my Django views my request. FILES comes empty.

This is my Django view -

def generate_taginputs(request):
    if request.method == "POST":
        #get temp id and tag inputs from the request
        # import pdb; pdb.set_trace()
        files = request.FILES
        tempid = request.POST['tempid']
        taginputs = json.loads(request.POST['tagdict'])
        tagnames = json.loads(request.POST['tagnames'])

        print(tempid, taginputs)
        #load the template from id
        template = Dtemplates.objects.filter(id=tempid)
        temp_jsn = json.loads(serializers.serialize('json', template))
        print(temp_jsn)

        #save each tag input value along with it's section, template and user id
        for key, value in taginputs.items():
            tag = Snotetags.objects.get(id=key)
            # tag_jsn = json.loads(serializers.serialize('json', tag))
            if value[1] == 'file':
                try:
                    section = Dsections.objects.get(tags=tag)
                    taginput = TagInputs(
                        user=request.user.id,
                        template_id=tempid,
                        section_id=section.id,
                        tag_id=key,
                        value=request.FILES[tagnames[key]])
                    taginput.save()
                    print('Input data saved succesfully')

                except:
                    print('tag not from this section')
            try:
                section = Dsections.objects.get(tags=tag)
                print(section)
                taginput = TagInputs(
                    user=request.user.id,
                    template_id=tempid,
                    section_id=section.id,
                    tag_id=key,
                    value=value[0])
                print(taginput)
                taginput.save()
                print('Input data saved succesfully')
            except:
                print('tag not from this section')

        return JsonResponse({'message': 'success'})

For reference, this is the form HTML -

<form method="POST" enctype="multipart/form-data" id="taginputdata">
                            <input type="hidden" name="csrfmiddlewaretoken" value="h2O7NBSuw7UgfFswEQtyq3tGj5kaVJdQdBnuENMjo3yePRiliH34KNhvoCycya44">
                            <div id="tag_inputs"><input class="tagInputs" type="file" id="5" name="profile_image" onchange="enableTxt(this)"> 
 <label>@profile_image</label> 

        <input class="tagInputs" type="text" id="4" name="price" onchange="enableTxt(this)"> 
         <label>@price</label>
        <button class="btn btnList" onclick="saveTagInputs()">Save Inputs</button></div>

gachdavit · Accepted Answer · 2019-05-25T19:10:39.367

2

Imagine this is your file,,,

<input type="file" name="image" id="image" />

and now,,,

$('#someelement').click(function() {

        var image = $('#image')[0].files[0]; // this will return your image object
        var form = new FormData();
        form.append('image', image);
        console.log('fire');

        $.ajax({
            url: '<your_url>',
            method: 'POST',
            data: form,
            processData: false,
            contentType: false,
            success: function(result) {

            }
        })
    })

And on the server, your request.FILES will be filled with InMemoryUploadedFile object. This is what you want. (IMHO).

edited May 25 '19 at 19:10

answered May 20 '19 at 05:55

gachdavit

1,223
1
6
7

I applied the method shown in this thrread - https://stackoverflow.com/questions/20822823/django-jquery-ajax-file-upload – ParfectShot May 20 '19 at 05:57
Your sugesstion is producing more errors like - AttributeError: 'NoneType' object has no attribute 'decode' several times... – ParfectShot May 20 '19 at 06:16
I updated my answer,,, It works 100% for me. Hope it helps you. – gachdavit May 20 '19 at 06:57

Django : Files not passed in the request even after setting enctype=multipart/form-data?

1 Answers1