Search code examples
javascriptjqueryfile-uploadhttp-status-code-500

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

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 :enter image description here

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. : enter image description here

Solution

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