Connection keeps getting reset when trying to upload file to tomcat server

Question

I am trying to create a website where people can post stuff. Currently, I am trying to make it such that users can add files sequentially and send it as a multi-part request in ajax.However, I keep getting connection reset error in chrome when I am trying to upload files. I have to log back into the server in order to see the new files.

HTML code:

<form id="postForm" method="post" enctype="multipart/form-data">
                        <textarea name="text" rows="4" cols="" class="form-control" placeholder="What's Up" id="postTextarea"></textarea>
                        <div class="radio">
                            <label><input type="radio" name="privacy" value="restricted" checked>Restricted</label>
                            <label class="checkbox-inline"><input type="checkbox" name="group" value="family" class="group">Family</label>
                            <label class="checkbox-inline"><input type="checkbox" name="group" value="bestie" class="group">Besties</label>
                            <label class="checkbox-inline"><input type="checkbox" name="group" value="friend" class="group">Friends</label>
                        </div>
                        <div class="radio">
                            <label><input type="radio" name="privacy" value="public">Public</label>
                        </div>
                        <br>
                        <div id="fileContainer">

                        </div>
                        <div id="buttonContainer">
                            <label class="btn btn-default" id="fileUploadButton">
                                Add Files<input type="file" name="file" class="fileInput" hidden multiple>
                            </label>
                            <button class="btn btn-primary" id="postButton">Post</button>
                        </div>
                    </form>

JavaScript:

var submittedFileData = [] ;
$('.fileInput').on('change', function () {
        var files = $(this).prop('files') ;
        for (var i = 0; i < files.length; i++) {
            var p = document.createElement("p") ;
            $(p).text(files[i].name + " (Click here to remove file)") ;
            $(p).addClass("filename") ;
            $("#fileContainer").append(p) ;
            submittedFileData.push(files[i]);
        }
    });
$('#postButton').click(function () {
        var privacy = $( "input[type=radio][name=privacy]:checked" ).val();
        var formData = new FormData();
        //append privacy
        formData.append("privacy" , privacy) ;
        //append groups
        $( "input[type=checkbox][name=group]:checked" ).each(function(i) {
            formData.append("group" , $(this).val()) ;
        }) ;
        //append text
        formData.append("text" , $("#postTextarea").val()) ;
        //append files
        for (var i = 0; i < submittedFileData.length; i++) {
            formData.append("file" , submittedFileData[i]) ;
        }
        $.ajax({
            type: "POST",
            url: "post-upload",
            data: formData,
            processData: false,
            contentType: false,
            cache: false,
            async : false,
            success: function (data) {
            },
            error: function (jqXHR, textStatus, errorThrown) {
               alert(errorThrown) ;
            }
        });
        $.post("feed-view","relation="+activeTab ,getXMLResponse) ;
    });

server.xml for tomcat 9

<Connector port="8443" protocol="org.apache.coyote.http11.Http11NioProtocol"
sslImplementationName="org.apache.tomcat.util.net.jsse.JSSEImplementation"
           maxThreads="150" SSLEnabled="true"
            scheme="https"
       secure="true" maxPostSize="-1" disableUploadTimeout="false" connectionUploadTimeout="600000">
    <SSLHostConfig>
        <Certificate certificateKeystoreFile="C:/Users/Kathavarayan/.keystore"
            certificateKeystorePassword=""
                     type="RSA" />
    </SSLHostConfig>
</Connector>

Answer 1

It's very likely that there isn't anything code-wise that is wrong, but instead it is a server configuration issue.

By default, most servers are set to both rather small timeouts and rather small upload size limits.

It depends on what type of server you are using (nginx, Apache, Node/Express, etc) for what the defaults are and how to configure them, but that would be the first thing I look into if your connection is resetting or cutting off mid-upload.

Answer 2

I finally discovered the problem. You are probably not going to believe this but at the end of the day, the button in the form was still causing it to be submitted causing the entire process to mess up. All I had to do was add type="button" to the button element in the form. Now, this prevents the form from being submitted and only causes Ajax to take care of submitting the form.