Why am I getting 500 Internal server error using jquery ajax and python bottle?

Question

I am trying to perform this AJAX post but for some reason I am getting a server 500 error. I can't see any error in the python code. So the problem seems to be on the callback. I am posting the code that I am using presently. Anyone?

Html form part is the front end html part how the form is written

<form method="post"  id="uploadform" onsubmit="formupload()"  enctype="multipart/form-data">
    <div class="form-group">
        <input type="file" id="exampleInputFile" name="file">
    </div>
    <div class="form-group ">
        <button type="submit" class="btn btn-primary pull-right" id="upload_button">Upload File</button>
    </div>
</form>

Th AJAX call is made to the python code and alerts 'upload fail':

function formupload(){
    event.preventDefault();
    $.ajax({
        url: '/uploadEmpData',
        type: 'POST',
        data: $('#uploadform').serialize(),
        dataType: 'json',
        success: function(data){
            alert(data);
            alert('file uploaded successfully');
        },
        error: function(data){
            alert('upload fail');
            //console.log(error);
        }
    });
}

The python bottle part where the function is created and data is being received from AJAX request:

def uploadEmpData():
data = request.files.get('file')
data.save('files/',overwrite=True)
if data and data.file:
    return json_dumps("File uploaded successfully")
return json_dumps({'error':'Permission Denied.'})

A 500 error means the problem is in your Python code on the server. Check the network tab for a description of the error arising from the request. Also note that you're calling `preventDefault()` on the global `event` object, presumably you need to change that to a form submission event. You also cannot serialize a file input. You need to send a multipart request using FormData — Rory McCrossan, Feb 12 '16 at 09:24

score 0 · Answer 1 · edited May 23 '17 at 11:59

0

You are ajaxing without without blocking the submit.

Remove onsubmit="formupload()" and change the script to this, assuming that would work in the first place.

Have a read of this too: How can I upload files asynchronously?

$(function() {
  $("#uploadform").on("submit", function(e) {
    e.preventDefault();

    $.ajax({
      url: '/uploadEmpData',
      type: 'POST',
      data: $('#uploadform').serialize(),
      dataType: 'json',
      success: function(data) {
        console.log(data);
        alert('file uploaded successfully');
      },
      error: function(data) {
        alert('upload fail');
        //console.log(error);
      }
    });
  });
});

edited May 23 '17 at 11:59

Community

1
1

answered Feb 12 '16 at 09:27

mplungjan

169,008
28
173
236

This in itself wouldn't cause a 500 error. There's quite a few issues in fact, such as attempting to serialize a file input. – Rory McCrossan Feb 12 '16 at 09:28
It might if the form is submitted, interrupting the ajax – mplungjan Feb 12 '16 at 09:28

score 0 · Answer 2 · answered Feb 12 '16 at 09:35

0

You can use instead of "Submit" and remove event.preventDefault() from your function and then try. And if it still give the error, then check the serialized data you send.

answered Feb 12 '16 at 09:35

Sahil Kanani

52
8

Sorry but type="button" was not get printed in above answer. So I mean to say use input type='button' instead of "submit" and remove event.preventDefault() from your function. – Sahil Kanani Feb 12 '16 at 09:37

Why am I getting 500 Internal server error using jquery ajax and python bottle?

2 Answers2