request.FILES пусто

Question

У меня есть форма с <input type="file"> для выбора изображений для загрузки, и после нажатия кнопки загрузки отправляется запрос POST XMLHttpRequest, который вызывает upload_view, который должен сохранить изображения на сервере. Тем не менее, мой request.FILES по какой-то причине пуст. Когда я console.log(document.getElementById('fileToUpload').files я могу видеть файлы там. И мой request.POST выглядит так:

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

Мой взгляд:

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')

Мой 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);
}

Моя форма:

<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

Вам необходимо добавить каждый файл отдельно.

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