Agfdhyk

I have this form:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">





<div class='col-sm-6' style="padding-left:0px;" >

    <form action="/main/" method="post" id="my_form" enctype="multipart/form-data">

      {% csrf_token %}

      <br>



      <div> <input type="text" name="description" id="id_description" /> </div>

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





      <button type="submit" disabled style="display: none" aria-hidden="true"></button>

      <input class="btn btn-success" type="submit" name="submit" value="Gem" />

    </form>

</div>

This successfully sends the form and it is valid on the server side. But I can´t access the image from the form on the server.

<script>

    var frm = $('#my_form');

    frm.submit(function (e) {

        e.preventDefault(e);

        $.ajax({

            async: true,

            type: frm.attr('method'),

            url: frm.attr('action'),

            data: frm.serialize(),

            success: function (data) {

                console.log("success")

            },

            error: function(request, status, error) {

                console.log("error")

            }

       });

    });

</script>

This solution sends the FormData with the image file, but it does not include the other form data and the form is not valid on the server side:

<script type="text/javascript">

    var frm = $('#my_form');

    frm.submit(function (e) {

        e.preventDefault(e);



        var formData = new FormData();

        formData.append(

            "image",

            document.getElementById("id_image").files[0]

        );



        $.ajax({

            async: true,

            type: frm.attr('method'),

            url: frm.attr('action'),

            data: formData,

            cache: false,

            processData: false,

            contentType: false,

            type: 'POST',



            success: function (data) {

                console.log("success")

            },

            error: function(request, status, error) {

                console.log("error")

            }

       });

   });





</script>

Is there a way to send both the file and the other form dara at the same time?

Try passing this to FormData Also, you were setting type twice.

var frm = $('#my_form');

frm.submit(function (e) {

  e.preventDefault(e);



  var formData = new FormData(this);



  $.ajax({

    async: true,

    type: frm.attr('method'),

    url: frm.attr('action'),

    data: formData,

    cache: false,

    processData: false,

    contentType: false,



    success: function (data) {

      console.log("success")

    },

    error: function(request, status, error) {

      console.log("error")

    }

  });

});

Your last block using formData is only appending the file. This is why data only contains the file no other form data. Be sure to fully populate formData first.