CODEWITHSUNDEEP
javascriptjquerypythonajaxdjango
GauthamGAjith
GauthamGAjith

Reputation: 377

How to send file using ajax post request in django

I want the user to upload a file in a form which can be sent via post request using ajax .But I am getting 500: MultiValueDictKeyError at /uploaded/ "'files'" error when I try this code.THANKS in advance.

view.py

def uploaded(request):
    upl=job(jobtitle=request.POST.get('jt'),jobdes=request.POST.get('tag'))
    upl.save()
    fil=resume(job=upl,resume=request.FILES['files'])
    fil.save()
    return redirect(selected)

form html

<form method="post" id="upload" enctype="multipart/form-data">
  {% csrf_token %}
  <div class="form-group">
    <label for="JobTitile">Job Title</label>
    <input type="text" class="form-control" id="JobTitle" name="jt" placeholder="Job Title" required>
  </div>
  <div class="form-group">
    <label for="FileInput">Select Resumes</label>
    <input type="file" name="files" id="FileInput" required>
  </div>
  <div class="control-group">
    <label class="control-label">Sections to look for</label>
    <div class="">
      <input id="tags_1" type="text" class="tags form-control" name="tag" value="" required style="height:1px !important;">
      <div id="suggestions-container" style="position: relative; float: left; width: 250px; margin: 10px;"></div>
    </div>
  </div><br/>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ajax

$('#upload').on('submit', function(event){
  event.preventDefault();
  console.log("form submitted!")  // sanity check
  create_post();
});

function create_post() {
  var files = $('#FileInput').get(0).files[0];
  console.log("create post is working!")
  console.log(files)
  $.ajax({
    url : "/uploaded/", // the endpoint
    type : "POST", // http method
    data : {
      jt: $('#JobTitle').val(),
      file: files.name,
      tag: $('#tags_1').val(),
      'csrfmiddlewaretoken': '{{ csrf_token }}'

    }, // data sent with the post request

    // handle a successful response
    success : function(json) {
      $('#JobTitle').val(''); // remove the value from the input
      $('#FileInput').val(''); 
      $('#tags_1').html("<div class='alert alert-success alert-dismissable'><a href='#'' class='close' data-dismiss='alert' aria-label='close'>×</a><strong>Success!</strong> Your request has been recored</div>");
      console.log(json); // log the returned json to the console
      console.log("success"); // another sanity check
    },

    // handle a non-successful response
    error : function(xhr,errmsg,err) {
      $('#results').html("<div class='alert alert-danger alert-dismissable'><a href='#'' class='close' data-dismiss='alert' aria-label='close'>×</a><strong>Oops!</strong> Something went wrong</div>"); // add the error to the dom
      console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
    }
  });
};

Upvotes: 1

Views: 1651

Answers (1)

chachan
chachan

Reputation: 2452

You can reuse mature solutions lilke jQuery-File-Upload and there's a good example about how to handle uploaded files in django docs

Upvotes: 1

Related Questions