Решено Django загрузка файла с ajax без JQuery

Question

все в названии, поэтому перед любыми дальнейшими объяснениями есть мой код.

{% extends 'informations/userpage.html' %}
{% load static %}
{% block redaction %}
<div class="redaction">
    <form method="POST" enctype="multipart/form-data" action="/redaction/" class="article-post">
        {% csrf_token %}
        <div class="article-picture">
            {% if article.image %}
                {{article.image}}
            {% else %}
                <img class="generic-image" src="{% static 'informations/images/none-picture.svg' %}" alt="Image article">
            {% endif %}
                <img class="edit" id="article-image" src="{% static 'informations/images/edit.svg' %}">
        </div>
        <div id="id01" class="modal" style="display: none;">
            <div class="upload-container">
                <input type='file' name="newImage">
                <div class="button" id="uploadImage" name="upload" value="envoyer">Envoyer</div>
            </div>
        </div>
    </form>
    {% csrf_token %}
    <script id="picturesend">
        var csrf_token = document.getElementsByName('csrfmiddlewaretoken').value
    </script>
    <script type="text/javascript"
            id="django-admin-popup-response-constants"
            src="{% static 'informations/redaction.js' %}">
    </script>
</div>
{% endblock %}

var articleImage = document.getElementById('article-image');
var uploadImage = document.getElementById('uploadPic');

uploadImage.addEventListener('click', displayUpload);
articleImage.addEventListener('click', displayUpload);

function displayUpload() {
    var uploadfile = document.getElementById('id01');
    var uploadPicture = document.getElementById('uploadImage');
    uploadPicture.addEventListener('click', uploadFile);
    uploadfile.style.display='block'
}

function uploadFile() {
    var formData = new FormData();
    var file = document.getElementsByName('newImage');
    var image = document.getElementsByClassName('generic-image')[0];
    formData.append('newImage', file);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload/', true);
    xhr.onload = function () {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
            image.setAttribute('src',JSON.parse(xhr.responseText));
        } else {
            alert('An error occurred!');
        }
    };
    xhr.setRequestHeader('Content-Type', file.type);
    xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
    xhr.send(formData);
}

моя файловая модель

def userDirectoryPath(instance, filename):
    # file will be uploaded to MEDIA_ROOT/user_<id>/<filename>
    return 'user_{0}/{1}'.format(instance.user.username, filename)

class Media(models.Model):
    user = models.ForeignKey(User, null=True , on_delete=models.CASCADE)
    media = models.FileField(upload_to=userDirectoryPath)

обработка моего представления ajax.

@login_required
def upload_media(request):
    user = request.user
    data = {}

    if request.POST:
        newFile = Media()
        newFile.media = request.FILES['newImage']
        newFile.user = user
        newFile.save()
        data.update({"media_url": newFile.media.url})

    return JsonResponse(data)

Итак, теперь немного пояснений, что я хочу сделать, без JQuery, отправить файл на мой сервер, зарегистрировать файл и добавить запись в базу данных, а затем вернуть URL с JsonResponse делать все, что мне нужно, с javascript.

Я новичок во всех этих технологиях и намеренно делаю это без Jquery. Я знаю, что мой код не совсем соответствует лучшим практикам, но я надеюсь, что это понятно.

Проблема с кодом, который я отправляю, заключается в том, что когда я смотрю на свой console.log(xhr.responseText);, я вижу {}, поэтому кажется, что он не понимает, что метод запроса является методом POST, Я пытался с if request.method == 'POST': Я получил тот же результат. Поскольку я не знаю всего о ajax, я думаю, что проблема возникла из моего javascript кода. Я провел некоторый поиск по Inte rnet, но все, что я получаю, это примеры с JQuery, которые я не использую.

Так что если кто-то видит какие-либо решения или знает, где я могу их получить Я буду очень благодарен, конечно, если вам понадобится больше деталей, я дам все, что вам нужно.

Спасибо за чтение и, в конечном итоге, за помощь.

[ОБНОВЛЕНИЕ]

с request.method == "POST" условия истинны, но ошибки возникают внутри, если я получаю MultiValueDictKeyError at /upload/ newImage У меня уже была эта ошибка, когда я использовал <form> и забыл enctype="multipart/form-data" Теперь я застрял с этим.

Answer 1

[решено] После некоторого поиска, чтения моего кода и некоторых попыток, я обнаружил некоторые ошибки в своем коде. Вот код, который работает:

function uploadFile() {
    var formData = new FormData();
    var file = document.getElementsByName('newImage')[0];
    var image = document.getElementsByClassName('generic-image')[0];
    formData.append('newImage', file.files[0], file.files[0].name);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", '/upload/', true);
    xhr.onload = function () {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
            image.setAttribute('src',JSON.parse(xhr.responseText));
        } else {
            alert('An error occurred!');
        }
    };
    xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
    xhr.send(formData);
}

Нет необходимости в строке javascript xhr.setRequestHeader('Content-Type', file.type);, и для получения файла вам нужно использовать файлы атрибутов ваших входных

var file = document.getElementsByName('newImage')[0];
 formData.append('newImage', file.files[0], file.files[0].name);

файлов. [0] потому что я загружаю только один файл за раз! Я надеюсь, что мои ошибки помогают другим.

До встречи! Проблема решена, по крайней мере, для загрузки файла!