request.FILES 为空

Question

I have a form with an <input type="file"> for selecting images to upload, and once upload button is clicked, a POST XMLHttpRequest is sent which calls the upload_view that should save the images on the server. However, my request.FILES is empty for some reason. When I console.log(document.getElementById('fileToUpload').files I can see the files there. And my request.POST looks like this:

<QueryDict: {'fileToUpload': ['[object FileList]'], 'csrfmiddlewaretoken': ['bOjUFzTnMVbHOWOQURj2egJuRizsVJIBMSfQra4yuz7MX3DOEaRPHbMVnY8xyIsU']}>

My view:

def upload_view(request):
    key = f'{request.user}-{datetime.datetime.now().strftime("%Y%m%d%H%M%S")}'
    for file in request.FILES.getlist('fileToUpload'):
        TemporaryImage.objects.create(image=file, key=key)
    return HttpResponse('complete')

My JS:

function uploadFile() {
  var fd = new FormData();
  fd.append("fileToUpload", document.getElementById('fileToUpload').files);

  var value = [];
  document.getElementsByName('csrfmiddlewaretoken').forEach(function(x) {
      value.push(x.value);
  })

  fd.append('csrfmiddlewaretoken', value[0]);

  var xhr = new XMLHttpRequest();

  xhr.open("POST", Urls['upload-view']());
  xhr.send(fd);
}

My form:

<form id="form1" enctype="multipart/form-data" method="post">
    {% csrf_token %}
    <label for="fileToUpload">Select a File to Upload</label>
    <input type="file" multiple="multiple" name="fileToUpload" id="fileToUpload">
    <input type="button" onclick="uploadFile()" value="Upload">
</form>

Answer 1

You need to append each file individually.

var fd = new FormData();
var files = document.getElementById('fileToUpload').files;
for (var x=0; x < files.length; x++) {
    fd.append("fileToUpload", files[x]);
}