file upload using jquery: POST 500 (Internal Server Error)

Question

I'm trying to upload image and some input into a server, using Jquery, with POST method. I tried this code But it's throwing me error : POST 500 (Internal Server Error). Can someone help me to figure out what is wrong with the code. Thank you for helping.

<!DOCTYPE html>
<html>
<head>
    <title>Image Upload Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        function submitForm() {
            console.log("submit event");
            var fd = new FormData(document.getElementById("fileinfo"));
            fd.append("label", "WEBUPLOAD");
            $.ajax({
              url: "http://URL?api_token=fb24085da58dad6decb9271fb170ef2ed8c80617",
              type: "POST",
              data: fd,
              processData: false,  // tell jQuery not to process the data
              contentType: false   // tell jQuery not to set contentType
            }).done(function( data ) {
                console.log("PHP Output:");
                console.log( data );
            });
            return false;
        }
    </script>
</head>

<body>
    <form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">
        <label>Select a file:</label><br>
        <input type="file" name="file" required />
        <input type="text" name="text" required />
        <input type="submit" value="Upload" />
    </form>
    <div id="output"></div>
</body>
</html>

With the fidder i had this output :

When debuging it stops in this part it seems that the problem is comming from the client, because in the serveur the image is required, it has not to be null so that's why he is throwing an error. :

Is your URL really "http://URL?api_token=fb24085da58dad6decb9271fb170ef2ed8c80617" or did you replace the real URL with 'URL' when you posted the question? — Franck Jeannin, Dec 02 '16 at 13:25
Your form should have enctype="multipart/form-data". See [this question](http://stackoverflow.com/questions/4526273/what-does-enctype-multipart-form-data-mean). — Alex K, Dec 02 '16 at 13:29
Error 5XX means the problem is on the server so your client code might not be enough to find a solution. — Franck Jeannin, Dec 02 '16 at 13:29

score 2 · Accepted Answer · answered Dec 02 '16 at 13:58

2

You need enctype="multipart/form-data" property assigned to your html form.

answered Dec 02 '16 at 13:58

user1080381

1,597
1
16
22

Thank you for replying. form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();" enctype="multipart/form-data" > But still has the error , after inspecting I found this error, it means the server is not recieving the image. what do you think is the issue. SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'img' cannot be null (SQL: insert into `menus` (`img`, `user_id`, `restaurant_id`, `updated_at`, `created_at`) values (, 9, 3, 2016-12-02 13:59:50, 2016-12-02 13:59:50)) – Amina Dec 02 '16 at 14:02
Do you map the parameters correctly? I mean the form input fields and server-side parameters. After submitting the request the input fields will be submitted as 'file' and 'text'. Do you have corresponding parameters on the server side? – user1080381 Dec 02 '16 at 14:18
This the SQL error from the server : QueryException in Connection.php line 761: SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'img' cannot be null (SQL: insert into `menus` (`img`, `user_id`, `restaurant_id`, `updated_at`, `created_at`) values (, 9, 3, 2016-12-02 14:37:18, 2016-12-02 14:37:18)) ==> It seems that the server is not recieving the image – Amina Dec 02 '16 at 14:40
Please rename your input fields to 'img' and 'name', so your html form should look like this: `
Select a file:

` – user1080381 Dec 02 '16 at 14:52
Thank youu, It works now, you made my day ,Thank you for your precious help ! I'll post the correct code. – Amina Dec 02 '16 at 18:23

score 2 · Answer 2 · answered Dec 02 '16 at 18:27

This the right code, just need to change the URL of the server. Thanks to user1080381, he gave me the solution in comments.

<!DOCTYPE html>
<html>
<head>
    <title>Image Upload Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        function submitForm() {
            console.log("submit event");
            var fd = new FormData(document.getElementById("fileinfo"));
            console.log(fd);
            //fd.append("label", "WEBUPLOAD");
            console.log(fd);
            $.ajax({
              url: "http://TypeYourURL?api_token=fb24085da58dad6decb9271fb170ef2ed8c80617",
              type: "POST",
              data: fd,

              processData: false,  // tell jQuery not to process the data
              contentType: false   // tell jQuery not to set contentType
            }).done(function( data ) {
                console.log("PHP Output:");
                console.log( data );
            });
            return false;
        }
    </script>
</head>

<body>
  <form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();" enctype="multipart/form-data">
    <label>Select a file:</label><br>
     <input type="file" name="img" required />
      <input type="text" name="name" required />
       <input type="submit" value="Upload" />
      </form>


      
    <div id="output"></div>
</body>
</html>

file upload using jquery: POST 500 (Internal Server Error)

2 Answers2