How to upload form data with image file to django model using ajax

I want to upload image file with some other data to Django database using ajax. Every time I do this using formData it always return empty when debugging. Also my serializer is not validating. Please help me to resolve this problem. Is there any other way to send image file to server.

function add_bike_model(btn){

    debugger;

    var data=new FormData()

    data.append('image',$("#bike_model_name")[0].files[0])

//    BikeModels = document.getElementById('bike_model_name').value;

//    var e = document.getElementById("city_drop");

//    var strUser = e.options[e.selectedIndex].value;

//    image = document.getElementById('img_file').value;

//    e.preventDefault();

//    var data = new FormData($('#form').closest('form')[0]);

    console.log('hello')

    data = {"CityForCars":strUser, "BikeModels": BikeModels, 'Image':image}

    $.ajax({

                type: 'POST',

                enctype: 'multipart/form-data',

                processData: false,

                contentType: false,

                cache: false,

                url: baseUrl + "/bike_model/",

                data:new FormData($("#moment-pane-upload-form")[0]),

                success: function(data) {

                  console.log('sucessfully done')

                  console.log(data)

                  window.location.href = baseUrl + "/bike_model/";

                }



            });

}

<form name="add_model_form" id="add_model_form"  enctype="multipart/form-data" class="comon-form"  method="post">

          <h3>ADD BIKE MODELS</h3>

<div class="col-md-6">

              <div class="avatar-upload">

                <div class="avatar-preview">

                  <div id="imagePreview" style="background-image: url(/static/Chatbot_Dashboard/img/logo/logo.png);"></div>

                    <img id="bike_image" src="">

                </div>

              </div>

            </div>





            <div class="col-md-6">

              <div class="form-group-inner">

                <label>Bike Model Name <em>*</em></label>

                <input class="form-control" placeholder="" type="name" id="bike_model_name" required="">

              </div>

            </div>

            <div class="col-md-6">

              <div class="form-group-inner">

                <label>City <em>*</em></label>

                <select style="width: 100%; background: #fff; padding: 7px;" id="city_drop">

                        <option value="" selected="selected">Select City</option>

                        {% for city in city.car_city %}

                      <option value="{{city.id}}">{{city.CityForCars}}</option>

                        {% endfor %}

                    </select>

                  </div>

              </div>

            <div class="col-md-6">

              <div class="form-group-inner">

                <label>Bike Image <em>*</em></label>

                <input class="form-control" placeholder="" type="file" id="img_file" required="">



              </div>

            </div>



  <div class="clearfix"></div>

 <div class="mt20 text-center">

     <button type="button" class="btn btn-primary" onclick="add_bike_model(this);" style="margin-right:10px;">Add</button><a href="/bike_model/"><input type="button" class="btn btn-primary" value="Cancel"></a>

 </div>

        <div class="clearfix"></div>

      </form>

my python code is -

if request.method == 'POST':

    import pdb;

    pdb.set_trace()

    print('a')

    # input_data = json.loads(request.read().decode('utf-8'))

    # print(input_data)

    serializer = serializers.BikeModelSerializer(request.FILES, request.POST)

    if serializer.is_valid():

        serializer.save()

        return render(request, "bike_model_add.html", {'car_city': car_city}, status=200)

return HttpResponse('error', status=400)

edited Nov 21 '18 at 9:23

Josh21

558

asked Nov 21 '18 at 7:57

Nitesh Kumar

234

add a comment |

function add_bike_model(btn){

    debugger;

    var data=new FormData()

    data.append('image',$("#bike_model_name")[0].files[0])

//    BikeModels = document.getElementById('bike_model_name').value;

//    var e = document.getElementById("city_drop");

//    var strUser = e.options[e.selectedIndex].value;

//    image = document.getElementById('img_file').value;

//    e.preventDefault();

//    var data = new FormData($('#form').closest('form')[0]);

    console.log('hello')

    data = {"CityForCars":strUser, "BikeModels": BikeModels, 'Image':image}

    $.ajax({

                type: 'POST',

                enctype: 'multipart/form-data',

                processData: false,

                contentType: false,

                cache: false,

                url: baseUrl + "/bike_model/",

                data:new FormData($("#moment-pane-upload-form")[0]),

                success: function(data) {

                  console.log('sucessfully done')

                  console.log(data)

                  window.location.href = baseUrl + "/bike_model/";

                }



            });

}

<form name="add_model_form" id="add_model_form"  enctype="multipart/form-data" class="comon-form"  method="post">

          <h3>ADD BIKE MODELS</h3>

<div class="col-md-6">

              <div class="avatar-upload">

                <div class="avatar-preview">

                  <div id="imagePreview" style="background-image: url(/static/Chatbot_Dashboard/img/logo/logo.png);"></div>

                    <img id="bike_image" src="">

                </div>

              </div>

            </div>





            <div class="col-md-6">

              <div class="form-group-inner">

                <label>Bike Model Name <em>*</em></label>

                <input class="form-control" placeholder="" type="name" id="bike_model_name" required="">

              </div>

            </div>

            <div class="col-md-6">

              <div class="form-group-inner">

                <label>City <em>*</em></label>

                <select style="width: 100%; background: #fff; padding: 7px;" id="city_drop">

                        <option value="" selected="selected">Select City</option>

                        {% for city in city.car_city %}

                      <option value="{{city.id}}">{{city.CityForCars}}</option>

                        {% endfor %}

                    </select>

                  </div>

              </div>

            <div class="col-md-6">

              <div class="form-group-inner">

                <label>Bike Image <em>*</em></label>

                <input class="form-control" placeholder="" type="file" id="img_file" required="">



              </div>

            </div>



  <div class="clearfix"></div>

 <div class="mt20 text-center">

     <button type="button" class="btn btn-primary" onclick="add_bike_model(this);" style="margin-right:10px;">Add</button><a href="/bike_model/"><input type="button" class="btn btn-primary" value="Cancel"></a>

 </div>

        <div class="clearfix"></div>

      </form>

my python code is -

if request.method == 'POST':

    import pdb;

    pdb.set_trace()

    print('a')

    # input_data = json.loads(request.read().decode('utf-8'))

    # print(input_data)

    serializer = serializers.BikeModelSerializer(request.FILES, request.POST)

    if serializer.is_valid():

        serializer.save()

        return render(request, "bike_model_add.html", {'car_city': car_city}, status=200)

return HttpResponse('error', status=400)

edited Nov 21 '18 at 9:23

Josh21

558

asked Nov 21 '18 at 7:57

Nitesh Kumar

234

add a comment |

function add_bike_model(btn){

    debugger;

    var data=new FormData()

    data.append('image',$("#bike_model_name")[0].files[0])

//    BikeModels = document.getElementById('bike_model_name').value;

//    var e = document.getElementById("city_drop");

//    var strUser = e.options[e.selectedIndex].value;

//    image = document.getElementById('img_file').value;

//    e.preventDefault();

//    var data = new FormData($('#form').closest('form')[0]);

    console.log('hello')

    data = {"CityForCars":strUser, "BikeModels": BikeModels, 'Image':image}

    $.ajax({

                type: 'POST',

                enctype: 'multipart/form-data',

                processData: false,

                contentType: false,

                cache: false,

                url: baseUrl + "/bike_model/",

                data:new FormData($("#moment-pane-upload-form")[0]),

                success: function(data) {

                  console.log('sucessfully done')

                  console.log(data)

                  window.location.href = baseUrl + "/bike_model/";

                }



            });

}

<form name="add_model_form" id="add_model_form"  enctype="multipart/form-data" class="comon-form"  method="post">

          <h3>ADD BIKE MODELS</h3>

<div class="col-md-6">

              <div class="avatar-upload">

                <div class="avatar-preview">

                  <div id="imagePreview" style="background-image: url(/static/Chatbot_Dashboard/img/logo/logo.png);"></div>

                    <img id="bike_image" src="">

                </div>

              </div>

            </div>





            <div class="col-md-6">

              <div class="form-group-inner">

                <label>Bike Model Name <em>*</em></label>

                <input class="form-control" placeholder="" type="name" id="bike_model_name" required="">

              </div>

            </div>

            <div class="col-md-6">

              <div class="form-group-inner">

                <label>City <em>*</em></label>

                <select style="width: 100%; background: #fff; padding: 7px;" id="city_drop">

                        <option value="" selected="selected">Select City</option>

                        {% for city in city.car_city %}

                      <option value="{{city.id}}">{{city.CityForCars}}</option>

                        {% endfor %}

                    </select>

                  </div>

              </div>

            <div class="col-md-6">

              <div class="form-group-inner">

                <label>Bike Image <em>*</em></label>

                <input class="form-control" placeholder="" type="file" id="img_file" required="">



              </div>

            </div>



  <div class="clearfix"></div>

 <div class="mt20 text-center">

     <button type="button" class="btn btn-primary" onclick="add_bike_model(this);" style="margin-right:10px;">Add</button><a href="/bike_model/"><input type="button" class="btn btn-primary" value="Cancel"></a>

 </div>

        <div class="clearfix"></div>

      </form>

my python code is -

if request.method == 'POST':

    import pdb;

    pdb.set_trace()

    print('a')

    # input_data = json.loads(request.read().decode('utf-8'))

    # print(input_data)

    serializer = serializers.BikeModelSerializer(request.FILES, request.POST)

    if serializer.is_valid():

        serializer.save()

        return render(request, "bike_model_add.html", {'car_city': car_city}, status=200)

return HttpResponse('error', status=400)

edited Nov 21 '18 at 9:23

Josh21

558

asked Nov 21 '18 at 7:57

Nitesh Kumar

234

function add_bike_model(btn){

    debugger;

    var data=new FormData()

    data.append('image',$("#bike_model_name")[0].files[0])

//    BikeModels = document.getElementById('bike_model_name').value;

//    var e = document.getElementById("city_drop");

//    var strUser = e.options[e.selectedIndex].value;

//    image = document.getElementById('img_file').value;

//    e.preventDefault();

//    var data = new FormData($('#form').closest('form')[0]);

    console.log('hello')

    data = {"CityForCars":strUser, "BikeModels": BikeModels, 'Image':image}

    $.ajax({

                type: 'POST',

                enctype: 'multipart/form-data',

                processData: false,

                contentType: false,

                cache: false,

                url: baseUrl + "/bike_model/",

                data:new FormData($("#moment-pane-upload-form")[0]),

                success: function(data) {

                  console.log('sucessfully done')

                  console.log(data)

                  window.location.href = baseUrl + "/bike_model/";

                }



            });

}

<form name="add_model_form" id="add_model_form"  enctype="multipart/form-data" class="comon-form"  method="post">

          <h3>ADD BIKE MODELS</h3>

<div class="col-md-6">

              <div class="avatar-upload">

                <div class="avatar-preview">

                  <div id="imagePreview" style="background-image: url(/static/Chatbot_Dashboard/img/logo/logo.png);"></div>

                    <img id="bike_image" src="">

                </div>

              </div>

            </div>





            <div class="col-md-6">

              <div class="form-group-inner">

                <label>Bike Model Name <em>*</em></label>

                <input class="form-control" placeholder="" type="name" id="bike_model_name" required="">

              </div>

            </div>

            <div class="col-md-6">

              <div class="form-group-inner">

                <label>City <em>*</em></label>

                <select style="width: 100%; background: #fff; padding: 7px;" id="city_drop">

                        <option value="" selected="selected">Select City</option>

                        {% for city in city.car_city %}

                      <option value="{{city.id}}">{{city.CityForCars}}</option>

                        {% endfor %}

                    </select>

                  </div>

              </div>

            <div class="col-md-6">

              <div class="form-group-inner">

                <label>Bike Image <em>*</em></label>

                <input class="form-control" placeholder="" type="file" id="img_file" required="">



              </div>

            </div>



  <div class="clearfix"></div>

 <div class="mt20 text-center">

     <button type="button" class="btn btn-primary" onclick="add_bike_model(this);" style="margin-right:10px;">Add</button><a href="/bike_model/"><input type="button" class="btn btn-primary" value="Cancel"></a>

 </div>

        <div class="clearfix"></div>

      </form>

my python code is -

if request.method == 'POST':

    import pdb;

    pdb.set_trace()

    print('a')

    # input_data = json.loads(request.read().decode('utf-8'))

    # print(input_data)

    serializer = serializers.BikeModelSerializer(request.FILES, request.POST)

    if serializer.is_valid():

        serializer.save()

        return render(request, "bike_model_add.html", {'car_city': car_city}, status=200)

return HttpResponse('error', status=400)

function add_bike_model(btn){

    debugger;

    var data=new FormData()

    data.append('image',$("#bike_model_name")[0].files[0])

//    BikeModels = document.getElementById('bike_model_name').value;

//    var e = document.getElementById("city_drop");

//    var strUser = e.options[e.selectedIndex].value;

//    image = document.getElementById('img_file').value;

//    e.preventDefault();

//    var data = new FormData($('#form').closest('form')[0]);

    console.log('hello')

    data = {"CityForCars":strUser, "BikeModels": BikeModels, 'Image':image}

    $.ajax({

                type: 'POST',

                enctype: 'multipart/form-data',

                processData: false,

                contentType: false,

                cache: false,

                url: baseUrl + "/bike_model/",

                data:new FormData($("#moment-pane-upload-form")[0]),

                success: function(data) {

                  console.log('sucessfully done')

                  console.log(data)

                  window.location.href = baseUrl + "/bike_model/";

                }



            });

}

<form name="add_model_form" id="add_model_form"  enctype="multipart/form-data" class="comon-form"  method="post">

          <h3>ADD BIKE MODELS</h3>

<div class="col-md-6">

              <div class="avatar-upload">

                <div class="avatar-preview">

                  <div id="imagePreview" style="background-image: url(/static/Chatbot_Dashboard/img/logo/logo.png);"></div>

                    <img id="bike_image" src="">

                </div>

              </div>

            </div>





            <div class="col-md-6">

              <div class="form-group-inner">

                <label>Bike Model Name <em>*</em></label>

                <input class="form-control" placeholder="" type="name" id="bike_model_name" required="">

              </div>

            </div>

            <div class="col-md-6">

              <div class="form-group-inner">

                <label>City <em>*</em></label>

                <select style="width: 100%; background: #fff; padding: 7px;" id="city_drop">

                        <option value="" selected="selected">Select City</option>

                        {% for city in city.car_city %}

                      <option value="{{city.id}}">{{city.CityForCars}}</option>

                        {% endfor %}

                    </select>

                  </div>

              </div>

            <div class="col-md-6">

              <div class="form-group-inner">

                <label>Bike Image <em>*</em></label>

                <input class="form-control" placeholder="" type="file" id="img_file" required="">



              </div>

            </div>



  <div class="clearfix"></div>

 <div class="mt20 text-center">

     <button type="button" class="btn btn-primary" onclick="add_bike_model(this);" style="margin-right:10px;">Add</button><a href="/bike_model/"><input type="button" class="btn btn-primary" value="Cancel"></a>

 </div>

        <div class="clearfix"></div>

      </form>

function add_bike_model(btn){

    debugger;

    var data=new FormData()

    data.append('image',$("#bike_model_name")[0].files[0])

//    BikeModels = document.getElementById('bike_model_name').value;

//    var e = document.getElementById("city_drop");

//    var strUser = e.options[e.selectedIndex].value;

//    image = document.getElementById('img_file').value;

//    e.preventDefault();

//    var data = new FormData($('#form').closest('form')[0]);

    console.log('hello')

    data = {"CityForCars":strUser, "BikeModels": BikeModels, 'Image':image}

    $.ajax({

                type: 'POST',

                enctype: 'multipart/form-data',

                processData: false,

                contentType: false,

                cache: false,

                url: baseUrl + "/bike_model/",

                data:new FormData($("#moment-pane-upload-form")[0]),

                success: function(data) {

                  console.log('sucessfully done')

                  console.log(data)

                  window.location.href = baseUrl + "/bike_model/";

                }



            });

}

<form name="add_model_form" id="add_model_form"  enctype="multipart/form-data" class="comon-form"  method="post">

          <h3>ADD BIKE MODELS</h3>

<div class="col-md-6">

              <div class="avatar-upload">

                <div class="avatar-preview">

                  <div id="imagePreview" style="background-image: url(/static/Chatbot_Dashboard/img/logo/logo.png);"></div>

                    <img id="bike_image" src="">

                </div>

              </div>

            </div>





            <div class="col-md-6">

              <div class="form-group-inner">

                <label>Bike Model Name <em>*</em></label>

                <input class="form-control" placeholder="" type="name" id="bike_model_name" required="">

              </div>

            </div>

            <div class="col-md-6">

              <div class="form-group-inner">

                <label>City <em>*</em></label>

                <select style="width: 100%; background: #fff; padding: 7px;" id="city_drop">

                        <option value="" selected="selected">Select City</option>

                        {% for city in city.car_city %}

                      <option value="{{city.id}}">{{city.CityForCars}}</option>

                        {% endfor %}

                    </select>

                  </div>

              </div>

            <div class="col-md-6">

              <div class="form-group-inner">

                <label>Bike Image <em>*</em></label>

                <input class="form-control" placeholder="" type="file" id="img_file" required="">



              </div>

            </div>



  <div class="clearfix"></div>

 <div class="mt20 text-center">

     <button type="button" class="btn btn-primary" onclick="add_bike_model(this);" style="margin-right:10px;">Add</button><a href="/bike_model/"><input type="button" class="btn btn-primary" value="Cancel"></a>

 </div>

        <div class="clearfix"></div>

      </form>

javascript jquery ajax django python-3.x

edited Nov 21 '18 at 9:23

Josh21

558

asked Nov 21 '18 at 7:57

Nitesh Kumar

234

edited Nov 21 '18 at 9:23

Josh21

558

asked Nov 21 '18 at 7:57

Nitesh Kumar

234

edited Nov 21 '18 at 9:23

Josh21

558

edited Nov 21 '18 at 9:23

Josh21

558

edited Nov 21 '18 at 9:23

Josh21

558

asked Nov 21 '18 at 7:57

Nitesh Kumar

234

asked Nov 21 '18 at 7:57

Nitesh Kumar

234

asked Nov 21 '18 at 7:57

Nitesh Kumar

234

add a comment |

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53407489%2fhow-to-upload-form-data-with-image-file-to-django-model-using-ajax%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg