Как загружать изображения с помощью AJAX в DJANGO

Недавно я использовал AJAX с DJANGO для отправки текстовых данных. Это работает гладко и кажется простым методом. Но я не могу понять и нет подходящего ресурса, чтобы научиться отправлять изображения с помощью AJAX и сохранять их в базе данных Django.

HTML:

<input type="file" id="fileInput-single" class="drop-zoon__file-input" accept="image/*">

JS:

        $(".add-prop").click(function() {
            var data = new FormData();
            data.append("image", $("#fileInput-single")[0].files[0])
            data.append("csrfmiddlewaretoken", $("input[name=csrfmiddlewaretoken]").val())
            $.ajax({
                method: "POST",
                url: "{% url 'upload-prop-images' %}",
                processData: false,
                contentType: false,
                mimeType: "multipart/form-data",
                data: data,
                success: function(data) {
                    if (data.status == "Upload Done") {
                        console.log("Uploading Done successfully")
                    }
                }
            })
        });

models.py

class Property(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE, null=True, related_name='property_user')
    prop_images = models.ImageField(upload_to="prop_images")

views.py

def uploadPropImages(request):
    image = request.POST['image']

    property_new = Property(user_id=request.user.id, prop_images=image)
    property_new.save()

    return JsonResponse({'status': 'Upload Done'})

urls.py

urlpatterns = [
    path('upload-prop-images/', views.uploadPropImages, name='upload-prop-images')
]

Есть один учебник с использованием файла forms.py, но я не хочу создавать файл forms.py.

HTML

<form id="upload-file" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="file" name="file">
    <button type="submit" class="btn btn-success">Upload</button>
</form>

JS

$('body').on('submit','#upload-file',function(e){
   e.preventDefault()
   var formData = new FormData(this);
   $.ajax({
         url:'/url/',
         type: 'POST',
         data: formData,
         success: function (response) {
         },
         error: function (response) {
         },
        cache: false,
        contentType: false,
        processData: false
   });

VIEWS.py

def fileupload(request):
     if request.method=="POST":
          property = Property()
          property.prop_images = request.FILES['file_name']
          property.user = self.request.user.username
          property.save()
      return JsonResponse({})
Вернуться на верх